From 56978c82795ce87ea76cc12d37e997eec6abd4ae Mon Sep 17 00:00:00 2001 From: Saurabh Kumar Date: Mon, 20 Mar 2023 15:45:11 +0530 Subject: [PATCH] Add Tailwind + Django Web Component (#3277) Fixes #ISSUEID Introduce tailwindcss[1] utilities and django-web-component[2] for frontend design isolation and reusability. Notes: - Saas rules take preference over the tailwind (we might want to change it) - In the future, the saas should be depreciated, and reusable classes should be updated to use tailwindcss [1] https://tailwindcss.com/ [2] https://github.com/Xzya/django-web-components --------- Co-authored-by: Fredrik Jonsson --- .../dashboard/community_dashboard.html | 16 +- .../templates/dashboard/dashboard.html | 24 +- .../submissions-waiting-for-review.html | 8 +- .../dashboard/partner_dashboard.html | 16 +- .../funds/grouped_application_list.html | 16 +- .../templates/funds/reviewer_leaderboard.html | 30 +- .../funds/reviewer_leaderboard_detail.html | 26 +- hypha/apply/funds/templates/funds/rounds.html | 13 +- .../templates/funds/staff_assignments.html | 38 +- .../funds/templates/funds/submissions.html | 14 +- .../funds/submissions_awaiting_review.html | 22 +- .../templates/funds/submissions_by_round.html | 23 +- .../templates/funds/submissions_overview.html | 93 ++-- .../templates/funds/submissions_result.html | 31 +- .../application_projects/invoice_list.html | 14 +- .../application_projects/overview.html | 16 +- .../application_projects/project_list.html | 14 +- .../application_projects/report_list.html | 12 +- hypha/core/apps.py | 11 + hypha/core/components.py | 6 + .../core/templates/components/admin_bar.html | 12 + hypha/settings/base.py | 3 + hypha/settings/django.py | 3 +- .../static_src/src/sass/apply/base/_base.scss | 1 - .../src/sass/apply/components/_heading.scss | 17 +- .../sass/apply/components/_stat-block.scss | 1 - .../src/sass/apply/components/_wrapper.scss | 2 +- hypha/static_src/src/tailwind-entry.css | 3 + hypha/templates/base-apply.html | 3 +- package-lock.json | 509 +++++++++++++++++- package.json | 19 +- requirements.txt | 1 + tailwind.config.js | 8 + 33 files changed, 760 insertions(+), 265 deletions(-) create mode 100644 hypha/core/apps.py create mode 100644 hypha/core/components.py create mode 100644 hypha/core/templates/components/admin_bar.html create mode 100644 hypha/static_src/src/tailwind-entry.css create mode 100644 tailwind.config.js diff --git a/hypha/apply/dashboard/templates/dashboard/community_dashboard.html b/hypha/apply/dashboard/templates/dashboard/community_dashboard.html index f2e013dd2a..56296aca20 100644 --- a/hypha/apply/dashboard/templates/dashboard/community_dashboard.html +++ b/hypha/apply/dashboard/templates/dashboard/community_dashboard.html @@ -5,25 +5,23 @@ {% block title %}{% trans "Dashboard" %}{% endblock %} {% block content %} -
-
-
-

{% trans "Dashboard" %}

-
{% trans "An overview of active and past submissions" %}
-
+ + {% adminbar %} + {% slot header %}{% trans "Dashboard" %}{% endslot %} + {% slot sub_heading %}{% trans "An overview of active and past submissions" %}{% endslot %} +

{% trans "Submit a new application" %}

{% trans "Apply now for our open rounds" %}
{% trans "Apply" %}
-
-
+ {% endadminbar %}

- {% trans "Community review submissions" %} {{ my_community_review_count }} + {% trans "Community review submissions" %} {{ my_community_review_count }}

{% if my_community_review.data %} diff --git a/hypha/apply/dashboard/templates/dashboard/dashboard.html b/hypha/apply/dashboard/templates/dashboard/dashboard.html index 45badad03e..1cda540e09 100644 --- a/hypha/apply/dashboard/templates/dashboard/dashboard.html +++ b/hypha/apply/dashboard/templates/dashboard/dashboard.html @@ -9,32 +9,30 @@ {% block title %}{% trans "Dashboard" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -

{% trans "Dashboard" %}

- {% endblock %} + + {% adminbar %} + {% slot header %}{% trans "Dashboard" %}{% endslot %} + {% slot sub_heading %}{% trans "Welcome" %}, {{ request.user }}!{% endslot %} + {% if perms.wagtailadmin.access_admin %} {% trans "Apply admin" %} {% endif %} -
-
-
- + {% endadminbar %} +
- +

{{ awaiting_reviews.count }}

{% trans "Submissions waiting for your review" %}

{% if awaiting_reviews.count %}
{% trans "View" %}
{% endif %} - +

{{ projects.count }}

{% trans "Live projects under your management" %}

{% if projects.count %} @@ -42,7 +40,7 @@

{% trans "Dashboard" {% endif %} {% if not paf_waiting_for_approval.count is None%} - +

{{ paf_waiting_for_approval.count }}

{% trans "Projects awaiting approval" %}

{% if paf_waiting_for_approval.count %} @@ -50,7 +48,7 @@

{% trans "Dashboard" {% endif %} {% endif %} - +

{{ active_invoices.count }}

{% trans "Requests for invoices requiring your attention" %}

{% if active_invoices.count %} diff --git a/hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html b/hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html index 294f2a71b1..416a634090 100644 --- a/hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html +++ b/hypha/apply/dashboard/templates/dashboard/includes/submissions-waiting-for-review.html @@ -1,8 +1,8 @@ {% load render_table from django_tables2 %} {% load i18n %} -

- {% trans "Submissions waiting for your review" %} {{ in_review_count }} +

+ {% trans "Submissions waiting for your review" %} {{ in_review_count }}

{% if my_review.data %} @@ -15,8 +15,8 @@

{% endif %} {% else %} -
-
{% trans "Nice! You're all caught up." %}
+
+

{% trans "Nice! You're all caught up. 🎉" %}

{% trans "Find new applications to review" %}
{# TODO Fill in data and update styles in future ticket #} diff --git a/hypha/apply/dashboard/templates/dashboard/partner_dashboard.html b/hypha/apply/dashboard/templates/dashboard/partner_dashboard.html index 38a6514bba..ff466c71f6 100644 --- a/hypha/apply/dashboard/templates/dashboard/partner_dashboard.html +++ b/hypha/apply/dashboard/templates/dashboard/partner_dashboard.html @@ -5,19 +5,19 @@ {% block title %}{% trans "Dashboard" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -

{% trans "Dashboard" %}

- {% endblock %} -
-
+ + {% adminbar %} + + {% slot header %}{% trans "Dashboard" %}{% endslot %} + {% slot sub_heading %}{% trans "Welcome" %}, {{ request.user }}!{% endslot %} + + {% endadminbar %}

- {% trans "You are the partner of these submissions" %} {{ partner_submissions_count }} + {% trans "You are the partner of these submissions" %} {{ partner_submissions_count }}

{% if partner_submissions.data %} diff --git a/hypha/apply/funds/templates/funds/grouped_application_list.html b/hypha/apply/funds/templates/funds/grouped_application_list.html index 1d5dc04634..03bc7b1b3b 100644 --- a/hypha/apply/funds/templates/funds/grouped_application_list.html +++ b/hypha/apply/funds/templates/funds/grouped_application_list.html @@ -6,16 +6,12 @@ {{ filter.form.media.css }} {% endblock %} -{% block content%} -
-
- {% block page_header %} -
-

{% trans "List of Submissions summary" %}

-
- {% endblock %} -
-
+{% block content %} + + {% adminbar %} + {% slot header %}{% trans "List of Submissions summary" %}{% endslot %} + {% endadminbar %} +
{% endblock %} diff --git a/hypha/apply/funds/templates/funds/reviewer_leaderboard.html b/hypha/apply/funds/templates/funds/reviewer_leaderboard.html index d83233db7c..b66e81eb1f 100644 --- a/hypha/apply/funds/templates/funds/reviewer_leaderboard.html +++ b/hypha/apply/funds/templates/funds/reviewer_leaderboard.html @@ -5,19 +5,25 @@ {% block title %}{% trans "Reviews" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "Reviewer leaderboard" %}

-
{% trans "Track and explore the reviews" %}
+ + {% adminbar %} + {% slot header %}{% trans "Reviewer leaderboard" %}{% endslot %} + {% slot sub_heading %}{% trans "Track and explore the reviews" %}{% endslot %} + + {% if request.user.is_apply_staff %} +
+ + {% trans "Staff assignments" %} + + + {% trans "Reviews" %} + + + {% trans "Results" %} +
- {% endblock %} - {% block page_header_tabs %} - {{ block.super }} - {% endblock %} -
-
+ {% endif %} + {% endadminbar %}
{% block table %} diff --git a/hypha/apply/funds/templates/funds/reviewer_leaderboard_detail.html b/hypha/apply/funds/templates/funds/reviewer_leaderboard_detail.html index b9eb1e1036..ab2dba3293 100644 --- a/hypha/apply/funds/templates/funds/reviewer_leaderboard_detail.html +++ b/hypha/apply/funds/templates/funds/reviewer_leaderboard_detail.html @@ -5,23 +5,15 @@ {% block title %}{% trans "Reviews" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% blocktrans %}Reviews by {{ object }}{% endblocktrans %}

-
{% trans "Track and explore the reviews" %}
-
- {% endblock %} - {% block page_header_tabs %} - {{ block.super }} + + {% adminbar %} + {% slot header %}{% blocktrans %}Reviews by {{ object }}{% endblocktrans %}{% endslot %} + {% slot sub_heading %}{% trans "Track and explore the reviews" %}{% endslot %} + {% endadminbar %} + +
+ {% block table %} + {% render_table table %} {% endblock %}
-
- -
- {% block table %} - {% render_table table %} - {% endblock %} -
{% endblock %} diff --git a/hypha/apply/funds/templates/funds/rounds.html b/hypha/apply/funds/templates/funds/rounds.html index bf65d8b83a..2037d39cf3 100644 --- a/hypha/apply/funds/templates/funds/rounds.html +++ b/hypha/apply/funds/templates/funds/rounds.html @@ -10,14 +10,11 @@ {% block content %} -
-
-
-

{% trans "Rounds" %}

-
{% trans "Explore current and past rounds" %}
-
-
-
+ + {% adminbar %} + {% slot header %}{% trans "Rounds" %}{% endslot %} + {% slot sub_heading %}{% trans "Explore current and past rounds" %}{% endslot %} + {% endadminbar %}
{% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form search_term=search_term use_batch_actions=False %} diff --git a/hypha/apply/funds/templates/funds/staff_assignments.html b/hypha/apply/funds/templates/funds/staff_assignments.html index c7c3d29483..c8ebeec6d4 100644 --- a/hypha/apply/funds/templates/funds/staff_assignments.html +++ b/hypha/apply/funds/templates/funds/staff_assignments.html @@ -5,23 +5,29 @@ {% block title %}{% trans "Staff assignments" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "Staff assignments" %}

-
{% trans "Track and explore the staff assignments" %}
+ + {% adminbar %} + {% slot header %}{% trans "Staff assignments" %}{% endslot %} + {% slot sub_heading %}{% trans "Track and explore the staff assignments" %}{% endslot %} + + {% if request.user.is_apply_staff %} +
+ + {% trans "Staff assignments" %} + + + {% trans "Reviews" %} + + + {% trans "Results" %} +
- {% endblock %} - {% block page_header_tabs %} - {{ block.super }} + {% endif %} + {% endadminbar %} + +
+ {% block table %} + {% render_table table %} {% endblock %}
-
- -
- {% block table %} - {% render_table table %} - {% endblock %} -
{% endblock %} diff --git a/hypha/apply/funds/templates/funds/submissions.html b/hypha/apply/funds/templates/funds/submissions.html index 6fb0b879fd..7990a2c932 100644 --- a/hypha/apply/funds/templates/funds/submissions.html +++ b/hypha/apply/funds/templates/funds/submissions.html @@ -4,15 +4,11 @@ {% block title %}{% trans "Submissions" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "All Submissions" %} ({{ table.rows|length }})

-
- {% endblock %} -
-
+ + {% adminbar %} + {% slot header %}{% trans "All Submissions" %} ({{ table.rows|length }}){% endslot %} + {% slot sub_heading %}{% trans "Search and filter all submissions" %}{% endslot %} + {% endadminbar %}
{% block table %} diff --git a/hypha/apply/funds/templates/funds/submissions_awaiting_review.html b/hypha/apply/funds/templates/funds/submissions_awaiting_review.html index 65a5997a92..aec9c60ed2 100644 --- a/hypha/apply/funds/templates/funds/submissions_awaiting_review.html +++ b/hypha/apply/funds/templates/funds/submissions_awaiting_review.html @@ -4,19 +4,15 @@ {% block title %}{% trans "Submissions awaiting Review" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "Submissions waiting for your review" %} ({{ table.rows|length }})

-
+ + {% adminbar %} + {% slot header %}{% trans "Submissions waiting for your review" %} ({{ table.rows|length }}){% endslot %} + {% comment %} {% slot sub_heading %}{% trans "Search and filter all submissions" %}{% endslot %} {% endcomment %} + {% endadminbar %} + +
+ {% block table %} + {% render_table table %} {% endblock %}
-
- -
- {% block table %} - {% render_table table %} - {% endblock %} -
{% endblock %} diff --git a/hypha/apply/funds/templates/funds/submissions_by_round.html b/hypha/apply/funds/templates/funds/submissions_by_round.html index 9ad0515ed2..ebc84903f9 100644 --- a/hypha/apply/funds/templates/funds/submissions_by_round.html +++ b/hypha/apply/funds/templates/funds/submissions_by_round.html @@ -4,18 +4,15 @@ {% block title %}{{ object }}{% endblock %} {% block content %} -
-
-
-

{{ object }} ({{ table.rows|length }})

-

{% if object.fund %}{{ object.fund }} | {% endif %}{% trans "Lead" %}: {{ object.lead }}

-
-
-
-
- {% block table %} - {{ block.super }} - {% endblock %} -
+ {% adminbar %} + {% slot header %}{{ object }} ({{ table.rows|length }}){% endslot %} + {% slot sub_heading %}{% if object.fund %}{{ object.fund }} | {% endif %}{% trans "Lead" %}: {{ object.lead }}{% endslot %} + {% endadminbar %} + +
+ {% block table %} + {{ block.super }} + {% endblock %} +
{% endblock %} diff --git a/hypha/apply/funds/templates/funds/submissions_overview.html b/hypha/apply/funds/templates/funds/submissions_overview.html index a399b937d9..0655226ea0 100644 --- a/hypha/apply/funds/templates/funds/submissions_overview.html +++ b/hypha/apply/funds/templates/funds/submissions_overview.html @@ -4,65 +4,58 @@ {% block title %}{% trans "Submissions" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "Submissions" %}

-
{% trans "Track and explore recent submissions" %}
-
- {% endblock %} - {% block page_header_tabs %} - {% if request.user.is_apply_staff %} -
-
- - {% trans "Staff assignments" %} - - - {% trans "Reviews" %} - - - {% trans "Results" %} - -
+ + {% adminbar %} + {% slot header %}{% trans "Submissions" %}{% endslot %} + {% slot sub_heading %}{% trans "Track and explore recent submissions" %}{% endslot %} + + {% if request.user.is_apply_staff %} +
+ + {% trans "Staff assignments" %} + + + {% trans "Reviews" %} + + + {% trans "Results" %} +
- {% endif %} - {% endblock %} -
-
+ {% endif %} -
+ {% endadminbar %} - {% include "funds/includes/status-block.html" with type="Applications" %} +
- {% if closed_rounds or open_rounds %} - {% include "funds/includes/round-block.html" with closed_rounds=closed_rounds open_rounds=open_rounds title=rounds_title page_type='submission' %} - {% endif %} + {% include "funds/includes/status-block.html" with type="Applications" %} - {% block table %} -
- {% trans "All Submissions" as all_submissions %} - {% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form search_term=search_term use_search=True filter_action=filter_action search_action=search_action use_batch_actions=False heading=all_submissions %} + {% if closed_rounds or open_rounds %} + {% include "funds/includes/round-block.html" with closed_rounds=closed_rounds open_rounds=open_rounds title=rounds_title page_type='submission' %} + {% endif %} - {% render_table table %} -
- {% trans "Show all" %} -
-
+ {% block table %} +
+ {% trans "All Submissions" as all_submissions %} + {% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form search_term=search_term use_search=True filter_action=filter_action search_action=search_action use_batch_actions=False heading=all_submissions %} - {% if staff_flagged.table.data %} -
-

{% trans "Staff Flagged Submissions" %}

- {% render_table staff_flagged.table %} - {% if staff_flagged.display_more %} + {% render_table table %}
- {% trans "Show all" %} + {% trans "Show all" %} +
+
+ + {% if staff_flagged.table.data %} +
+

{% trans "Staff Flagged Submissions" %}

+ {% render_table staff_flagged.table %} + {% if staff_flagged.display_more %} +
+ {% trans "Show all" %} +
+ {% endif %}
{% endif %} -
- {% endif %} - {% endblock %} -
+ {% endblock %} +
{% endblock %} diff --git a/hypha/apply/funds/templates/funds/submissions_result.html b/hypha/apply/funds/templates/funds/submissions_result.html index 3fbca32471..6bde66c866 100644 --- a/hypha/apply/funds/templates/funds/submissions_result.html +++ b/hypha/apply/funds/templates/funds/submissions_result.html @@ -3,19 +3,26 @@ {% block title %}{% trans "Submissions results" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "Submissions results" %}

-
{% trans "Track and explore the results" %}
+ + {% adminbar %} + {% slot header %}{% trans "Submissions results" %}{% endslot %} + {% slot sub_heading %}{% trans "Track and explore submission results" %}{% endslot %} + + {% if request.user.is_apply_staff %} +
+ + {% trans "Staff assignments" %} + + + {% trans "Reviews" %} + + + {% trans "Results" %} +
- {% endblock %} - {% block page_header_tabs %} - {{ block.super }} - {% endblock %} -
-
+ {% endif %} + {% endadminbar %} +
diff --git a/hypha/apply/projects/templates/application_projects/invoice_list.html b/hypha/apply/projects/templates/application_projects/invoice_list.html index a20552a4ad..9f8b746bdc 100644 --- a/hypha/apply/projects/templates/application_projects/invoice_list.html +++ b/hypha/apply/projects/templates/application_projects/invoice_list.html @@ -6,15 +6,11 @@ {% block title %}{% trans "Invoices" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "All Invoices" %}

-
- {% endblock %} -
-
+ + {% adminbar %} + {% slot header %}{% trans "All Invoices" %} ({{ table.rows|length }}){% endslot %} + {% slot sub_heading %}{% trans "View, search and filter all project invoices" %}{% endslot %} + {% endadminbar %}
{% if table %} diff --git a/hypha/apply/projects/templates/application_projects/overview.html b/hypha/apply/projects/templates/application_projects/overview.html index 8d7d8a8409..9e55563bda 100644 --- a/hypha/apply/projects/templates/application_projects/overview.html +++ b/hypha/apply/projects/templates/application_projects/overview.html @@ -11,16 +11,12 @@ {% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "Projects" %}

-
{% trans "Track and explore recent projects" %}
-
- {% endblock %} -
-
+ + {% adminbar %} + {% slot header %}{% trans "Projects" %}{% endslot %} + {% slot sub_heading %} {% trans "Track and explore recent projects" %} {% endslot %} + {% endadminbar %} +
diff --git a/hypha/apply/projects/templates/application_projects/project_list.html b/hypha/apply/projects/templates/application_projects/project_list.html index c42e02c418..78162663bd 100644 --- a/hypha/apply/projects/templates/application_projects/project_list.html +++ b/hypha/apply/projects/templates/application_projects/project_list.html @@ -6,15 +6,11 @@ {% block title %}{% trans "Projects" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -
-

{% trans "All Projects" %} ({{ table.rows|length }})

-
- {% endblock %} -
-
+ + {% adminbar %} + {% slot header %}{% trans "All Projects" %} ({{ table.rows|length }}){% endslot %} + {% slot sub_heading %}{% trans "View, Search and filter all projects" %}{% endslot %} + {% endadminbar %}
{% if table %} diff --git a/hypha/apply/projects/templates/application_projects/report_list.html b/hypha/apply/projects/templates/application_projects/report_list.html index f72d2f03e8..29c4c583f7 100644 --- a/hypha/apply/projects/templates/application_projects/report_list.html +++ b/hypha/apply/projects/templates/application_projects/report_list.html @@ -6,13 +6,11 @@ {% block title %}{% trans "Reports" %}{% endblock %} {% block content %} -
-
- {% block page_header %} -

{% trans "Submitted Reports" %}

- {% endblock %} -
-
+ + {% adminbar %} + {% slot header %}{% trans "Submitted Reports" %} ({{ table.rows|length }}){% endslot %} + {% slot sub_heading %}{% trans "View and filter all Submitted Reports" %}{% endslot %} + {% endadminbar %}
{% if table %} diff --git a/hypha/core/apps.py b/hypha/core/apps.py new file mode 100644 index 0000000000..324164610f --- /dev/null +++ b/hypha/core/apps.py @@ -0,0 +1,11 @@ +from django.apps import AppConfig +from django_web_components import component + + +class CoreAppConfig(AppConfig): + name = "hypha.core" + + def ready(self): + from . import components # noqa + component.register("adminbar", component=components.AdminBar) + diff --git a/hypha/core/components.py b/hypha/core/components.py new file mode 100644 index 0000000000..f799393057 --- /dev/null +++ b/hypha/core/components.py @@ -0,0 +1,6 @@ +from django_web_components import component + + +@component.register("admin_bar") +class AdminBar(component.Component): + template_name = "components/admin_bar.html" diff --git a/hypha/core/templates/components/admin_bar.html b/hypha/core/templates/components/admin_bar.html new file mode 100644 index 0000000000..ab2b1910a6 --- /dev/null +++ b/hypha/core/templates/components/admin_bar.html @@ -0,0 +1,12 @@ +{% load components %} + +
+
+
+

{% render_slot slots.header %}

+ {% if slots.sub_heading %}{% endif %} +
+ + {% render_slot slots.inner_block %} +
+
diff --git a/hypha/settings/base.py b/hypha/settings/base.py index a586f37284..e8e7ecb93f 100644 --- a/hypha/settings/base.py +++ b/hypha/settings/base.py @@ -159,6 +159,9 @@ 'hypha.apply.activity.context_processors.notification_context', 'hypha.core.context_processors.global_vars', ], + "builtins": [ + "django_web_components.templatetags.components", + ], }, }, ] diff --git a/hypha/settings/django.py b/hypha/settings/django.py index e0e4375345..bf4b9e7fd0 100644 --- a/hypha/settings/django.py +++ b/hypha/settings/django.py @@ -8,7 +8,7 @@ 'hypha.cookieconsent', 'hypha.images', - 'hypha.core', + 'hypha.core.apps.CoreAppConfig', 'hypha.apply.activity', 'hypha.apply.categories', @@ -38,6 +38,7 @@ 'social_django', 'django_htmx', + 'django_web_components', 'wagtail.contrib.modeladmin', 'wagtail.contrib.settings', diff --git a/hypha/static_src/src/sass/apply/base/_base.scss b/hypha/static_src/src/sass/apply/base/_base.scss index 64d385b22d..02c07ac82f 100644 --- a/hypha/static_src/src/sass/apply/base/_base.scss +++ b/hypha/static_src/src/sass/apply/base/_base.scss @@ -85,7 +85,6 @@ details > summary { transition: opacity, z-index, $transition; } -.hidden, .is-hidden, %is-hidden { display: none; diff --git a/hypha/static_src/src/sass/apply/components/_heading.scss b/hypha/static_src/src/sass/apply/components/_heading.scss index 898ddfe600..1c2aeff121 100644 --- a/hypha/static_src/src/sass/apply/components/_heading.scss +++ b/hypha/static_src/src/sass/apply/components/_heading.scss @@ -56,7 +56,9 @@ } &--normal { - font-weight: $weight--normal; + font-weight: 500; + font-size: 1.25rem; + line-height: 1.75rem; } &--bold { @@ -73,17 +75,4 @@ text-align: left; } } - - &--submission-count { - display: inline-block; - padding: 2px 10px; - font-size: 13px; - font-weight: $weight--bold; - color: $color--marine; - text-align: center; - background-color: $color--sky-blue; - border-radius: 20%; - border: 1px solid $color--light-blue-90; - vertical-align: middle; - } } diff --git a/hypha/static_src/src/sass/apply/components/_stat-block.scss b/hypha/static_src/src/sass/apply/components/_stat-block.scss index 200b1afe12..a778fe0517 100644 --- a/hypha/static_src/src/sass/apply/components/_stat-block.scss +++ b/hypha/static_src/src/sass/apply/components/_stat-block.scss @@ -7,7 +7,6 @@ &__item { position: relative; - border: 1px solid $color--mid-dark-grey; padding: 1rem; background-color: $color--white; flex: 1; diff --git a/hypha/static_src/src/sass/apply/components/_wrapper.scss b/hypha/static_src/src/sass/apply/components/_wrapper.scss index 5a93980c6d..f46a2d4492 100644 --- a/hypha/static_src/src/sass/apply/components/_wrapper.scss +++ b/hypha/static_src/src/sass/apply/components/_wrapper.scss @@ -285,7 +285,7 @@ padding: 20px 0; @include media-query(tablet-portrait) { - padding: 4rem 0; + padding: 2rem 0; } } diff --git a/hypha/static_src/src/tailwind-entry.css b/hypha/static_src/src/tailwind-entry.css new file mode 100644 index 0000000000..b5c61c9567 --- /dev/null +++ b/hypha/static_src/src/tailwind-entry.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html index 306c681c8b..6fc830f7b3 100644 --- a/hypha/templates/base-apply.html +++ b/hypha/templates/base-apply.html @@ -22,7 +22,8 @@ - + {% comment %} {% endcomment %} + {% block extra_css %}{% endblock %} diff --git a/package-lock.json b/package-lock.json index eb7b66c70e..52e03abbdf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,8 @@ "sass": "^1.57.1", "stylelint": "^14.16.1", "stylelint-config-standard-scss": "^6.1.0", - "stylelint-scss": "^4.3.0" + "stylelint-scss": "^4.3.0", + "tailwindcss": "^3.2.7" }, "engines": { "node": "16.18.x" @@ -1889,6 +1890,38 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/acorn-node": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", + "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", + "dev": true, + "dependencies": { + "acorn": "^7.0.0", + "acorn-walk": "^7.0.0", + "xtend": "^4.0.2" + } + }, + "node_modules/acorn-node/node_modules/acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-walk": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", + "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", + "dev": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -1939,6 +1972,12 @@ "node": ">= 8" } }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true + }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -2094,6 +2133,15 @@ "node": ">=6" } }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/camelcase-keys": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz", @@ -2112,9 +2160,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001449", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz", - "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==", + "version": "1.0.30001464", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz", + "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==", "dev": true, "funding": [ { @@ -2342,6 +2390,38 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/defined": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", + "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/detective": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", + "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", + "dev": true, + "dependencies": { + "acorn-node": "^1.8.2", + "defined": "^1.0.0", + "minimist": "^1.2.6" + }, + "bin": { + "detective": "bin/detective.js" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -2354,6 +2434,12 @@ "node": ">=8" } }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -3381,6 +3467,15 @@ "node": ">= 0.8.0" } }, + "node_modules/lilconfig": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", + "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -3629,6 +3724,15 @@ "node": "*" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/minimist-options": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz", @@ -3821,6 +3925,15 @@ "node": ">=10" } }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -4021,12 +4134,96 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-import": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", + "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "dev": true, + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, + "dependencies": { + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" + }, + "engines": { + "node": ">= 10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": ">=8.0.9", + "ts-node": ">=9.0.0" + }, + "peerDependenciesMeta": { + "postcss": { + "optional": true + }, + "ts-node": { + "optional": true + } + } + }, "node_modules/postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", "dev": true }, + "node_modules/postcss-nested": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", + "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", + "dev": true, + "dependencies": { + "postcss-selector-parser": "^6.0.10" + }, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, "node_modules/postcss-resolve-nested-selector": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", @@ -4143,6 +4340,24 @@ "node": ">=8" } }, + "node_modules/read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "dependencies": { + "pify": "^2.3.0" + } + }, + "node_modules/read-cache/node_modules/pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -4964,6 +5179,77 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "dev": true }, + "node_modules/tailwindcss": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz", + "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==", + "dev": true, + "dependencies": { + "arg": "^5.0.2", + "chokidar": "^3.5.3", + "color-name": "^1.1.4", + "detective": "^5.2.1", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.2.12", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "lilconfig": "^2.0.6", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.0.9", + "postcss-import": "^14.1.0", + "postcss-js": "^4.0.0", + "postcss-load-config": "^3.1.4", + "postcss-nested": "6.0.0", + "postcss-selector-parser": "^6.0.11", + "postcss-value-parser": "^4.2.0", + "quick-lru": "^5.1.1", + "resolve": "^1.22.1" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=12.13.0" + }, + "peerDependencies": { + "postcss": "^8.0.9" + } + }, + "node_modules/tailwindcss/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/tailwindcss/node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/tailwindcss/node_modules/quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -5179,6 +5465,15 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, + "node_modules/xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "dev": true, + "engines": { + "node": ">=0.4" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", @@ -6518,6 +6813,31 @@ "dev": true, "requires": {} }, + "acorn-node": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz", + "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==", + "dev": true, + "requires": { + "acorn": "^7.0.0", + "acorn-walk": "^7.0.0", + "xtend": "^4.0.2" + }, + "dependencies": { + "acorn": { + "version": "7.4.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", + "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", + "dev": true + } + } + }, + "acorn-walk": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz", + "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==", + "dev": true + }, "ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -6555,6 +6875,12 @@ "picomatch": "^2.0.4" } }, + "arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true + }, "argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -6664,6 +6990,12 @@ "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", "dev": true }, + "camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true + }, "camelcase-keys": { "version": "6.2.2", "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz", @@ -6676,9 +7008,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001449", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz", - "integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw==", + "version": "1.0.30001464", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001464.tgz", + "integrity": "sha512-oww27MtUmusatpRpCGSOneQk2/l5czXANDSFvsc7VuOQ86s3ANhZetpwXNf1zY/zdfP63Xvjz325DAdAoES13g==", "dev": true }, "chalk": { @@ -6837,6 +7169,29 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "defined": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz", + "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==", + "dev": true + }, + "detective": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz", + "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==", + "dev": true, + "requires": { + "acorn-node": "^1.8.2", + "defined": "^1.0.0", + "minimist": "^1.2.6" + } + }, + "didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true + }, "dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -6846,6 +7201,12 @@ "path-type": "^4.0.0" } }, + "dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true + }, "doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -7632,6 +7993,12 @@ "type-check": "~0.4.0" } }, + "lilconfig": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", + "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "dev": true + }, "lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", @@ -7820,6 +8187,12 @@ "brace-expansion": "^1.1.7" } }, + "minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "dev": true + }, "minimist-options": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz", @@ -7966,6 +8339,12 @@ } } }, + "object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true + }, "once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -8099,12 +8478,51 @@ "source-map-js": "^1.0.2" } }, + "postcss-import": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", + "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", + "dev": true, + "requires": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + } + }, + "postcss-js": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", + "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, + "requires": { + "camelcase-css": "^2.0.1" + } + }, + "postcss-load-config": { + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, + "requires": { + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" + } + }, "postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==", "dev": true }, + "postcss-nested": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", + "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", + "dev": true, + "requires": { + "postcss-selector-parser": "^6.0.10" + } + }, "postcss-resolve-nested-selector": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz", @@ -8171,6 +8589,23 @@ "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==", "dev": true }, + "read-cache": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", + "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, + "requires": { + "pify": "^2.3.0" + }, + "dependencies": { + "pify": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true + } + } + }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -8778,6 +9213,60 @@ } } }, + "tailwindcss": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.7.tgz", + "integrity": "sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==", + "dev": true, + "requires": { + "arg": "^5.0.2", + "chokidar": "^3.5.3", + "color-name": "^1.1.4", + "detective": "^5.2.1", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.2.12", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "lilconfig": "^2.0.6", + "micromatch": "^4.0.5", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.0.0", + "postcss": "^8.0.9", + "postcss-import": "^14.1.0", + "postcss-js": "^4.0.0", + "postcss-load-config": "^3.1.4", + "postcss-nested": "6.0.0", + "postcss-selector-parser": "^6.0.11", + "postcss-value-parser": "^4.2.0", + "quick-lru": "^5.1.1", + "resolve": "^1.22.1" + }, + "dependencies": { + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "requires": { + "is-glob": "^4.0.3" + } + }, + "quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true + } + } + }, "text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -8935,6 +9424,12 @@ "signal-exit": "^3.0.7" } }, + "xtend": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", + "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "dev": true + }, "yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/package.json b/package.json index e739f55bdc..2a1e43814c 100644 --- a/package.json +++ b/package.json @@ -36,34 +36,33 @@ "sass": "^1.57.1", "stylelint": "^14.16.1", "stylelint-config-standard-scss": "^6.1.0", - "stylelint-scss": "^4.3.0" + "stylelint-scss": "^4.3.0", + "tailwindcss": "^3.2.7" }, "scripts": { "heroku-postbuild": "npm run build", "build": "npx npm-run-all --print-label --parallel build:*", "watch": "npx npm-run-all --print-label --parallel watch:*", "lint": "npx npm-run-all --parallel lint:*", - "build:js": "npx babel ./hypha/static_src/src/javascript --out-dir ./hypha/static_compiled/js", - "build:css": "sass ./hypha/static_src/src/sass:./hypha/static_compiled/css --load-path ./hypha/static_src/src/sass --no-source-map", + "build:sass": "sass ./hypha/static_src/src/sass:./hypha/static_compiled/css --load-path ./hypha/static_src/src/sass --no-source-map", + "build:tailwind": "tailwindcss -i ./hypha/static_src/src/tailwind-entry.css -o ./hypha/static_compiled/css/tailwind-output.css --minify", "build:images": "npx babel ./hypha/static_src/src/images --out-dir ./hypha/static_compiled/images --copy-files", "build:fonts": "npx babel ./hypha/static_src/src/fonts --out-dir ./hypha/static_compiled/fonts --copy-files", - "watch:js": "npx babel --watch ./hypha/static_src/src/javascript --out-dir ./hypha/static_compiled/js", - "watch:css": "sass --watch ./hypha/static_src/src/sass:./hypha/static_compiled/css --load-path ./hypha/static_src/src/sass", + "watch:sass": "sass --watch ./hypha/static_src/src/sass:./hypha/static_compiled/css --load-path ./hypha/static_src/src/sass", + "watch:tailwind": "tailwindcss -i ./hypha/static_src/src/tailwind-entry.css -o ./hypha/static_compiled/css/tailwind-output.css --watch", "watch:static": "nodemon --delay 3 --exec \"npm run collectstatic\" --watch ./hypha/static_compiled --ext css,js,json,png,svg", "watch:lint": "nodemon --exec \"npm run lint\" --watch ./hypha/static_src/src/sass --watch ./hypha/static_src/src/javscript --ext scss,js", - "dev:build": "npx npm-run-all --print-label --serial clean --parallel dev:build:* --serial collectstatic", "dev:build:js": "npm run build:js", - "dev:build:css": "sass ./hypha/static_src/src/sass:./hypha/static_compiled/css --load-path ./hypha/static_src/src/sass", + "dev:build:sass": "sass ./hypha/static_src/src/sass:./hypha/static_compiled/css --load-path ./hypha/static_src/src/sass", "dev:build:lint": "npm run lint", + "dev:build:tailwind": "tailwindcss -i ./hypha/static_src/src/tailwind-entry.css -o ./hypha/static_compiled/css/tailwind-output.css", "dev:build:images": "npm run build:images", "dev:build:fonts": "npm run build:fonts", - - "lint:css": "stylelint \"hypha/static_src/src/sass/**/*.scss\"", + "lint:sass": "stylelint \"hypha/static_src/src/sass/**/*.scss\"", "lint:js": "eslint \"hypha/static_src/src/javascript/**/*.js\"", - "collectstatic": "python manage.py collectstatic --no-post-process --noinput --verbosity 0 --settings=hypha.settings.dev", "clean": "rm -rf ./static ./hypha/static_compiled" }, diff --git a/requirements.txt b/requirements.txt index 9349895932..333a6b917b 100644 --- a/requirements.txt +++ b/requirements.txt @@ -30,6 +30,7 @@ django-storages==1.13.2 django-tables2==2.5.1 django-tinymce==3.5.0 django-two-factor-auth==1.14.0 +django-web-components==0.1.1 django==3.2.18 djangorestframework-api-key==2.3.0 djangorestframework==3.14.0 diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000000..e87828eaa1 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./hypha/templates/**/*.html", "./hypha/**/templates/**/*.html"], + theme: { + extend: {}, + }, + plugins: [], +};