Layout fixes for application form and auth form (#3563)

More updates to 19d69d9
HyphaApp · Sep 8, 2023 · 85e609f · 85e609f
1 parent 19d69d9
commit 85e609f
Show file tree

Hide file tree

Showing 24 changed files with 476 additions and 408 deletions.
diff --git a/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html b/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
@@ -1,67 +1,82 @@
 {% extends "base-apply.html" %}
 {% load render_table from django_tables2 %}
-{% load i18n static wagtailcore_tags workflow_tags statusbar_tags %}
+{% load i18n static wagtailcore_tags workflow_tags statusbar_tags heroicons %}
 
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner wrapper--applicant-dashboard">
-        <div>
-            <h3 class="heading heading--no-margin">{% trans "Dashboard" %}</h3>
-            <h5>{% trans "An overview of active and past submissions and projects" %}</h5>
-        </div>
+    {% adminbar %}
+        {% slot header %}{% trans "Dashboard" %}{% endslot %}
+        {% slot sub_heading %}{% trans "An overview of active and past submissions and projects" %}{% endslot %}
+
         <div class="wrapper wrapper--cta-box">
-            <h4 class="heading heading--no-margin">{% trans "Submit a new application" %}</h4>
-            <h5 class="heading heading--normal">{% trans "Apply now for our open rounds" %}</h5>
+            <h3 class="text-xl mb-0">{% trans "Submit a new application" %}</h3>
+            <p class="mt-0 mb-4 text-fg-muted text-sm">{% trans "Apply now for our open rounds" %}</p>
             <a class="button button--primary" href="{% pageurl APPLY_SITE.root_page %}" class="button">{% trans "Apply" %}</a>
         </div>
-    </div>
-</div>
+    {% endadminbar %}
 
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    <h3>{% trans "Your active submissions" %}</h3>
+<div class="wrapper wrapper--large wrapper--inner-space-medium mb-4">
+    <h2 class="text-xl mb-2">
+        {% trans "Your active submissions" %}
+    </h2>
+    <div class="">
     {% for submission in my_active_submissions %}
         <div class="wrapper wrapper--status-bar-outer">
             <div class="wrapper wrapper--status-bar-inner">
-                <div>
-                    <h5 class="heading heading--no-margin"><a class="link link--underlined" href="{% url 'funds:submissions:detail' submission.id %}">{{ submission.title }}</a></h5>
-                    <h6 class="heading heading--no-margin heading--submission-meta"><span>{% trans "Submitted" %}:</span> {{ submission.submit_time.date }} {% trans "by" %} {{ submission.user.get_full_name }}</h6>
+                <div class="flex max-w-sm sm:max-w-lg flex-col gap-2 md:flex-row md:justify-between md:w-full md:max-w-none lg:flex-col lg:justify-start lg:w-auto lg:max-w-sm">
+                    <div>
+                        <h3 class="heading heading--no-margin text-base font-bold">
+                            <a class="link link--underlined" href="{% url 'funds:submissions:detail' submission.id %}">
+                                {{ submission.title }}
+                            </a>
+                        </h3>
+                        <p class="heading heading--no-margin text-fg-muted text-sm">
+                            {% trans "Submitted" %}: {{ submission.submit_time.date }} {% trans "by" %} {{ submission.user.get_full_name }}
+                        </p>
+                    </div>
+                    {% if request.user|has_edit_perm:submission %}
+                    <div>
+                        <a class="button button--primary" href="{% url 'funds:submissions:edit' submission.id %}">
+                            {% if submission.status == 'draft_proposal' %}
+                                {% trans "Start your" %} {{ submission.stage }} {% trans "application" %}
+                            {% else %}
+                                <span class="whitespace-nowrap">
+                                    {% heroicon_mini "pencil-square" size=18 class="inline mr-1 align-text-bottom" aria_hidden=true %}
+                                    {% trans "Edit" %}
+                                </span>
+                            {% endif %}
+                        </a>
+                    </div>
+                    {% endif %}
+
                 </div>
                 {% status_bar submission.workflow submission.phase request.user css_class="status-bar--small" %}
             </div>
-            {% if request.user|has_edit_perm:submission %}
-                <a class="button button--primary" href="{% url 'funds:submissions:edit' submission.id %}">
-                    {% if submission.status == 'draft_proposal' %}
-                        {% trans "Start your" %} {{ submission.stage }} {% trans "application" %}
-                    {% else %}
-                        {% trans "Edit" %}
-                    {% endif %}
-                </a>
-            {% endif %}
         </div>
     {% empty %}
         {% trans "No active submissions" %}
     {% endfor %}
+    </div>
 </div>
 
 {% if active_projects.count %}
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    <h3>{% trans "Your active projects" %}</h3>
+<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
+    <h2 class="text-xl mb-2">{% trans "Your active projects" %}</h2>
     {% render_table active_projects.table %}
 </div>
 {% endif %}
 
 {% if historical_submissions.count %}
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    <h3>{% trans "Submission history" %}</h3>
+<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
+    <h2 class="text-xl mb-2">{% trans "Submission history" %}</h3>
     {% render_table historical_submissions.table %}
 </div>
 {% endif %}
 
 {% if historical_projects.count %}
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
-    <h3>{% trans "Project history" %}</h3>
+<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
+    <h2 class="text-xl mb-2">{% trans "Project history" %}</h2>
     {% render_table historical_projects.table %}
 </div>
 {% endif %}

diff --git a/hypha/apply/dashboard/templates/dashboard/community_dashboard.html b/hypha/apply/dashboard/templates/dashboard/community_dashboard.html
@@ -1,6 +1,6 @@
 {% extends "base-apply.html" %}
 {% load render_table from django_tables2 %}
-{% load i18n static statusbar_tags workflow_tags wagtailcore_tags %}
+{% load i18n static statusbar_tags workflow_tags wagtailcore_tags heroicons %}
 
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
@@ -11,65 +11,85 @@
         {% slot sub_heading %}{% trans "An overview of active and past submissions" %}{% endslot %}
 
         <div class="wrapper wrapper--cta-box">
-            <h4 class="heading heading--no-margin">{% trans "Submit a new application" %}</h4>
-            <h5 class="heading heading--normal">{% trans "Apply now for our open rounds" %}</h5>
+            <h3 class="text-xl mb-0">{% trans "Submit a new application" %}</h3>
+            <p class="mt-0 mb-4 text-fg-muted text-sm">{% trans "Apply now for our open rounds" %}</p>
             <a class="button button--primary" href="{% pageurl APPLY_SITE.root_page %}" class="button">{% trans "Apply" %}</a>
         </div>
     {% endadminbar %}
 
-<div class="wrapper wrapper--large wrapper--inner-space-medium">
+    <div class="wrapper wrapper--large wrapper--inner-space-medium">
 
-    <div class="wrapper wrapper--bottom-space">
-        <h4 class="heading heading--normal">
-            {% trans "Community review submissions" %} <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">{{ my_community_review_count }}</span>
-        </h4>
+        <div class="wrapper wrapper--bottom-space">
+            <h2 class="text-xl mb-2">
+                {% trans "Community review submissions" %} <span class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded">{{ my_community_review_count }}</span>
+            </h2>
+
+            {% if my_community_review.data %}
+                {% render_table my_community_review %}
+            {% else %}
+                {% trans "No submissions" %}
+            {% endif %}
+        </div>
 
-        {% if my_community_review.data %}
-            {% render_table my_community_review %}
-        {% else %}
-            {% trans "No submissions" %}
+        {% if my_reviewed.data %}
+            <div class="wrapper wrapper--bottom-space">
+                <h2 class="text-xl mb-2">
+                    {% trans "Your previous reviews" %}
+                </h2>
+                {% render_table my_reviewed %}
+            </div>
         {% endif %}
-    </div>
 
-    {% if my_reviewed.data %}
         <div class="wrapper wrapper--bottom-space">
-            <h4 class="heading heading--normal">{% trans "Your previous reviews" %}</h4>
-            {% render_table my_reviewed %}
-        </div>
-    {% endif %}
+            <h2 class="text-xl mb-2">
+                {% trans "Your active submissions" %}
+            </h2>
+            {% for submission in my_submissions %}
+                <div class="wrapper wrapper--status-bar-outer">
+                    <div class="wrapper wrapper--status-bar-inner">
+                        <div class="flex max-w-sm sm:max-w-lg flex-col gap-2 md:flex-row md:justify-between md:w-full md:max-w-none lg:flex-col lg:justify-start lg:w-auto lg:max-w-sm">
+                            <div>
+                                <h3 class="heading heading--no-margin text-base font-bold">
+                                    <a class="link link--underlined" href="{% url 'funds:submissions:detail' submission.id %}">
+                                        {{ submission.title }}
+                                    </a>
+                                </h3>
+                                <p class="heading heading--no-margin text-fg-muted text-sm">
+                                    {% trans "Submitted" %}: {{ submission.submit_time.date }} {% trans "by" %} {{ submission.user.get_full_name }}
+                                </p>
+                            </div>
+                            {% if request.user|has_edit_perm:submission %}
+                            <div>
+                                <a class="button button--primary" href="{% url 'funds:submissions:edit' submission.id %}">
+                                    {% if submission.status == 'draft_proposal' %}
+                                        {% trans "Start your" %} {{ submission.stage }} {% trans "application" %}
+                                    {% else %}
+                                        <span class="whitespace-nowrap">
+                                            {% heroicon_mini "pencil-square" size=18 class="inline mr-1 align-text-bottom" aria_hidden=true %}
+                                            {% trans "Edit" %}
+                                        </span>
+                                    {% endif %}
+                                </a>
+                            </div>
+                            {% endif %}
+                        </div>
 
-    <div class="wrapper wrapper--bottom-space">
-        <h4 class="heading heading--normal">{% trans "Your active submissions" %}</h4>
-        {% for submission in my_submissions %}
-            <div class="wrapper wrapper--status-bar-outer">
-                <div class="wrapper wrapper--status-bar-inner">
-                    <div>
-                        <h5 class="heading heading--no-margin"><a class="link link--underlined" href="{% url 'funds:submissions:detail' submission.id %}">{{ submission.title }}</a></h5>
-                        <h6 class="heading heading--no-margin heading--submission-meta"><span>{% trans "Submitted" %}:</span> {{ submission.submit_time.date }} {% trans "by" %} {{ submission.user.get_full_name }}</h6>
+                        {% status_bar submission.workflow submission.phase request.user css_class="status-bar--small" %}
                     </div>
-                    {% status_bar submission.workflow submission.phase request.user css_class="status-bar--small" %}
                 </div>
-                {% if request.user|has_edit_perm:submission %}
-                    <a class="button button--primary" href="{% url 'funds:submissions:edit' submission.id %}">
-                        {% if submission.status == 'draft_proposal' %}
-                            {% trans "Start your" %} {{ submission.stage }} {% trans "application" %}
-                        {% else %}
-                            {% trans "Edit" %}
-                        {% endif %}
-                    </a>
-                {% endif %}
+            {% empty %}
+                {% trans "No active submissions" %}
+            {% endfor %}
+        </div>
+
+        {% if my_inactive_submissions.data %}
+            <div class="wrapper wrapper--bottom-space">
+                <h2 class="text-xl mb-2">
+                    {% trans "Submission history" %}
+                </h2>
+                {% render_table my_inactive_submissions %}
             </div>
-        {% empty %}
-            {% trans "No active submissions" %}
-        {% endfor %}
+        {% endif %}
     </div>
 
-    {% if my_inactive_submissions.data %}
-        <div class="wrapper wrapper--bottom-space">
-            <h4 class="heading heading--normal">{% trans "Submission history" %}</h4>
-            {% render_table my_inactive_submissions %}
-        </div>
-    {% endif %}
-</div>
-
 {% endblock %}
diff --git a/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html b/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html
@@ -5,17 +5,14 @@
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
 {% block content %}
-<div class="admin-bar">
-    <div class="admin-bar__inner admin-bar__inner--with-button">
-        {% block page_header %}
-            <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Dashboard" %}</h1>
-        {% endblock %}
+    {% adminbar %}
+        {% slot header %}{% trans "Dashboard" %}{% endslot %}
+
         <a href="{% url 'wagtailadmin_home' %}" class="button button--primary button--arrow-pixels-white">
             {% trans "Apply admin" %}
             <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
         </a>
-    </div>
-</div>
+    {% endadminbar %}
 
 <div class="wrapper wrapper--large wrapper--inner-space-medium">
     {% if paf_waiting_for_approval.count %}

diff --git a/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html b/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html
@@ -5,17 +5,15 @@
 {% block title %}{% trans "Dashboard" %}{% endblock %}
 
 {% block content %}
-    <div class="admin-bar">
-        <div class="admin-bar__inner admin-bar__inner--with-button">
-            {% block page_header %}
-                <h1 class="gamma heading heading--no-margin heading--bold">{% trans "Dashboard" %}</h1>
-            {% endblock %}
-            <a href="{% url 'wagtailadmin_home' %}" class="button button--primary button--arrow-pixels-white">
-                {% trans "Apply admin" %}
-                <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
-            </a>
-        </div>
-    </div>
+
+    {% adminbar %}
+        {% slot header %}{% trans "Dashboard" %}{% endslot %}
+        <a href="{% url 'wagtailadmin_home' %}" class="button button--primary button--arrow-pixels-white">
+            {% trans "Apply admin" %}
+            <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
+        </a>
+    {% endadminbar %}
+
     <div class="wrapper wrapper--large wrapper--inner-space-medium">
         <div class="wrapper wrapper--bottom-space"
             role="tablist" aria-label="Invoice Tabs"
@@ -56,7 +54,9 @@ <h4 class="heading heading--normal heading--no-margin">{% trans 'Invoices' %} </
                 {% if active_invoices.count %}
                     {% render_table active_invoices.table %}
                 {% else %}
-                    {% trans "No Active Invoices" %}
+                    <div class="border px-2 py-4">
+                        {% trans "No Active Invoices" %}
+                    </div>
                 {% endif %}
             </div>
 
@@ -65,7 +65,9 @@ <h4 class="heading heading--normal heading--no-margin">{% trans 'Invoices' %} </
                 {% if invoices_for_approval.count %}
                     {% render_table invoices_for_approval.table %}
                 {% else %}
-                    {% trans "No Invoices for Approval " %}
+                    <div class="border px-2 py-4">
+                        {% trans "No Invoices for Approval " %}
+                    </div>
                 {% endif %}
             </div>
 
@@ -74,7 +76,9 @@ <h4 class="heading heading--normal heading--no-margin">{% trans 'Invoices' %} </
                 {% if invoices_to_convert.count %}
                     {% render_table invoices_to_convert.table %}
                 {% else %}
-                    {% trans "No Invoices for Conversion " %}
+                    <div class="border px-2 py-4">
+                        {% trans "No Invoices for Conversion " %}
+                    </div>
                 {% endif %}
             </div>
 

diff --git a/hypha/apply/dashboard/templates/dashboard/includes/flagged.html b/hypha/apply/dashboard/templates/dashboard/includes/flagged.html
@@ -1,9 +1,9 @@
 {% load render_table from django_tables2 %}
 {% load i18n %}
 
-<h4 class="heading heading--normal">
+<h2 class="text-xl mb-2">
     {% trans "Your Flagged Submissions" %}
-</h4>
+</h2>
 
 {% if my_flagged.data %}
     {% render_table my_flagged %}

diff --git a/hypha/apply/dashboard/templates/dashboard/includes/paf_waiting_for_approval.html b/hypha/apply/dashboard/templates/dashboard/includes/paf_waiting_for_approval.html
@@ -3,7 +3,9 @@
 
 <div id="paf-awaiting-approval" class="wrapper wrapper--bottom-space" x-data="{ tab: '{% trans "Awaiting your approval" %}' }">
     <section class="section section--with-options">
-        <h4 class="heading heading--normal heading--no-margin">{% trans 'PAF waiting for internal approval' %}</h4>
+        <h2 class="text-xl mb-2">
+            {% trans 'PAF waiting for internal approval' %}
+        </h2>
         <nav>
             <a class="tab__item tab__item--alt"
                 role="tab"
@@ -28,14 +30,18 @@ <h4 class="heading heading--normal heading--no-margin">{% trans 'PAF waiting for
         {% if paf_waiting_for_approval.awaiting_your_approval.count %}
             {% render_table paf_waiting_for_approval.awaiting_your_approval.table %}
         {% else %}
-            {% trans "You have approved all PAFs, no PAF is waiting for your Approval " %}
+            <div class="border px-2 py-4">
+                {% trans "You have approved all PAFs, no PAF is waiting for your Approval " %}
+            </div>
         {% endif %}
     </div>
     <div x-show="tab === '{% trans "Approved by you" %}'" role="tabpanel" tabindex="0" aria-labelledby="tab-paf-approved" id="panel-paf-approved">
         {% if paf_waiting_for_approval.approved_by_you.count %}
             {% render_table paf_waiting_for_approval.approved_by_you.table %}
         {% else %}
-            {% trans "No PAF is approved by you yet " %}
+            <div class="border px-2 py-4">
+                {% trans "No PAF is approved by you yet " %}
+            </div>
         {% endif %}
     </div>