From ee217a55f28a76cd5625df3669a48252935c32b4 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Tue, 23 Apr 2024 15:28:50 +0800
Subject: [PATCH] Update styling of My Tasks section (#3879)
- ~Change the background of the page to light grey~
- Add border to each of the tasks
---
.../dashboard/applicant_dashboard.html | 11 +--------
.../dashboard/contracting_dashboard.html | 12 ++--------
.../templates/dashboard/dashboard.html | 22 ++++-------------
.../dashboard/finance_dashboard.html | 12 ++--------
.../dashboard/includes/my-tasks.html | 24 +++++++++++++++++++
.../submissions-waiting-for-review.html | 2 +-
6 files changed, 34 insertions(+), 49 deletions(-)
create mode 100644 hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
diff --git a/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html b/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
index e5af42f98..521db8ffc 100644
--- a/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
+++ b/hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
@@ -26,16 +26,7 @@
<div class="wrapper wrapper--large wrapper--inner-space-medium">
{% if my_tasks.count %}
- <div class="w-8/12 m-auto mb-10">
- <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
- {% for task in my_tasks.data %}
- <div class="bg-white p-1 flex mb-1 items-center">
- <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
- <div class="flex-1">{{ task.text|markdown|nh3 }}</div>
- <a class="button button-primary m-2" href="{{ task.url }}">{% trans "View" %}</a>
- </div>
- {% endfor %}
- </div>
+ {% include "dashboard/includes/my-tasks.html" with mytasks=mytasks %}
{% endif %}
{% if my_submissions_exists %}
diff --git a/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html b/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html
index 70ed5fce2..203b254c7 100644
--- a/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html
+++ b/hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html
@@ -15,17 +15,9 @@
{% endadminbar %}
<div class="wrapper wrapper--large wrapper--inner-space-medium">
+
{% if my_tasks.count %}
- <div class="w-8/12 m-auto mb-10">
- <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
- {% for task in my_tasks.data %}
- <div class="bg-white p-1 flex mb-1 items-center">
- <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
- <div class="flex-1">{{ task.text|markdown|nh3 }}</div>
- <a class="button button-primary m-2" href="{{ task.url }}">{% trans "View" %}</a>
- </div>
- {% endfor %}
- </div>
+ {% include "dashboard/includes/my-tasks.html" with mytasks=mytasks %}
{% endif %}
{% if paf_for_review.count %}
diff --git a/hypha/apply/dashboard/templates/dashboard/dashboard.html b/hypha/apply/dashboard/templates/dashboard/dashboard.html
index 39534f753..6f228a04e 100644
--- a/hypha/apply/dashboard/templates/dashboard/dashboard.html
+++ b/hypha/apply/dashboard/templates/dashboard/dashboard.html
@@ -25,39 +25,25 @@
<div class="wrapper wrapper--large wrapper--inner-space-medium">
<div class="wrapper wrapper--bottom-space">
{% if my_tasks.count %}
- <div class="w-8/12 m-auto mb-10">
- <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
- {% for task in my_tasks.data %}
- <div class="bg-white p-1 flex mb-1 items-center border border-gray-600">
- <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
- <div class="flex flex-1 items-center">
- {{ task.text|markdown|nh3 }}
- {% if task.type == "Draft" %}
- <span class="bg-red-200 hover:opacity-70 transition-opacity rounded-full whitespace-nowrap inline-block ms-1 my-2 px-2 pt-0.5 pb-1 text-sm font-medium text-gray-800">{{ task.type }}</span>
- {% endif %}
- </div>
- <a class="button button-primary m-2" href="{{ task.url }}">{% trans "View" %}</a>
- </div>
- {% endfor %}
- </div>
+ {% include "dashboard/includes/my-tasks.html" with mytasks=mytasks %}
{% endif %}
<div class="stat-block">
- <a href="#submissions-awaiting-review" class="stat-block__item border">
+ <a href="#submissions-awaiting-review" class="stat-block__item border shadow-sm">
<p class="stat-block__number">{{ awaiting_reviews.count }}</p>
<p class="stat-block__text">{% trans "Submissions waiting for your review" %}</p>
{% if awaiting_reviews.count %}
<div class="stat-block__view">{% trans "View" %}</div>
{% endif %}
</a>
- <a href="#active-projects" class="stat-block__item border">
+ <a href="#active-projects" class="stat-block__item border shadow-sm">
<p class="stat-block__number">{{ projects.count }}</p>
<p class="stat-block__text">{% trans "Live projects under your management" %}</p>
{% if projects.count %}
<div class="stat-block__view">{% trans "View" %}</div>
{% endif %}
</a>
- <a href="#active-invoices" class="stat-block__item border">
+ <a href="#active-invoices" class="stat-block__item border shadow-sm">
<p class="stat-block__number">{{ active_invoices.count }}</p>
<p class="stat-block__text">{% trans "Requests for invoices requiring your attention" %}</p>
{% if active_invoices.count %}
diff --git a/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html b/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html
index dfc2298d3..2b6b93834 100644
--- a/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html
+++ b/hypha/apply/dashboard/templates/dashboard/finance_dashboard.html
@@ -15,17 +15,9 @@
{% endadminbar %}
<div class="wrapper wrapper--large wrapper--inner-space-medium">
+
{% if my_tasks.count %}
- <div class="w-8/12 m-auto mb-10">
- <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
- {% for task in my_tasks.data %}
- <div class="bg-white p-1 flex mb-1 items-center">
- <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
- <div class="flex-1">{{ task.text|markdown|nh3 }}</div>
- <a class="button button-primary m-2" href="{{ task.url }}">{% trans "View" %}</a>
- </div>
- {% endfor %}
- </div>
+ {% include "dashboard/includes/my-tasks.html" with mytasks=mytasks %}
{% endif %}
<div class="wrapper wrapper--bottom-space"
diff --git a/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html b/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
new file mode 100644
index 000000000..fdefb9137
--- /dev/null
+++ b/hypha/apply/dashboard/templates/dashboard/includes/my-tasks.html
@@ -0,0 +1,24 @@
+{% load i18n markdown_tags nh3_tags %}
+
+<div class="w-8/12 m-auto mb-10">
+ <h2 class="text-center font-light">{% trans "My tasks" %}</h2>
+
+ <div class="task--list border divide-y shadow-sm">
+ {% for task in my_tasks.data %}
+ <div class="bg-white p-2 flex items-center">
+ <svg class="icon icon--dashboard-tasks"><use xlink:href="#{{ task.icon }}"></use></svg>
+ <div class="flex flex-1 items-center">
+ <span>{{ task.text|markdown|nh3 }}</span>
+ {% if task.type == "Draft" %}
+ <span
+ class="bg-red-200 rounded-full whitespace-nowrap inline-block ms-1 my-2 px-2 pt-0.5 pb-1 text-sm font-medium text-gray-800"
+ >
+ {{ task.type }}
+ </span>
+ {% endif %}
+ </div>
+ <a class="button button-primary" href="{{ task.url }}">{% trans "View" %}</a>
+ </div>
+ {% endfor %}
+ </div>
+</div>
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 526a5f9cc..06fdedc1f 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
@@ -15,7 +15,7 @@
{% endif %}
{% else %}
- <div class="border py-10 bg-white w-full text-center px-2">
+ <div class="border shadow-sm py-10 bg-white w-full text-center px-2">
<p class="text-base my-2">{% trans "Nice! You're all caught up. 🎉" %}</p>
<a class="button button--primary" href="{% url 'apply:submissions:list' %}" hx-boost='true'>{% trans "Find new applications to review" %}</a>
</div>
--
GitLab