Skip to content

Commit 96fe11f

Browse files
theskumartheskumar
authored
Various UI tweaks to project detail page (#4437)
- invoice and reports card have consistent padding now - Update table styling of invoices and past reportsg - Fix jumpy behaviour on clicking "Show rejected" in invoices section - Reports: update how freqrency is displayed, show it in the header tosave space - Sidebar PAF approvals now has icons - cleanup the use of `_data-block.scss` ## Before ![Screenshot 2025-03-08 at 3  28 14@2x](https://github.com/user-attachments/assets/645de814-fab7-4c33-a6ca-8e07bbd9aa61) ## After <img width="1326" alt="image" src="https://github.com/user-attachments/assets/01eb96d8-ed9c-4803-bef5-34f0b8de107c" />
1 parent 71830de commit 96fe11f

File tree

10 files changed

+172
-266
lines changed

10 files changed

+172
-266
lines changed

‎hypha/apply/projects/templates/application_projects/includes/invoices.html‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{% load i18n invoice_tools humanize heroicons %}
22

3-
<div id="invoices" class="data-block">
4-
<div class="data-block__header">
5-
<p class="data-block__title">{% trans "Invoices" %}</p>
3+
<section id="invoices" class="docs-block wrapper--outer-space-large">
4+
<div class="docs-block__header">
5+
<h2 class="m-0 text-lg font-semibold">{% trans "Invoices" %}</h2>
66
{% user_can_add_invoices object user as can_add_invoice %}
77
{% if can_add_invoice %}
88
<a class="button button--project-action button--project-action--white" target="_blank"
@@ -11,7 +11,7 @@
1111
</a>
1212
{% endif %}
1313
</div>
14-
<div class="data-block__body" x-data="{ showrejected: false }">
14+
<div class="docs-block__inner" x-data="{ showrejected: false }">
1515
{% if object.invoices.not_rejected %}
1616
<table class="data-block__table">
1717
<thead>
@@ -32,12 +32,20 @@
3232
{% endif %}
3333

3434
{% if object.invoices.rejected %}
35-
<p class="data-block__rejected">
36-
{% trans "Show rejected" as showrejectedtext %}{% trans "Hide rejected" as hiderejectedtext %}
37-
<a class="data-block__rejected-link" href="#" @click="showrejected = ! showrejected" x-text="showrejected ? '{{ hiderejectedtext }}' : '{{ showrejectedtext }}'">{{ showrejectedtext }}</a>
35+
<p class="text-center">
36+
{% trans "Show rejected" as showrejectedtext %}
37+
{% trans "Hide rejected" as hiderejectedtext %}
38+
<a
39+
class="font-semibold"
40+
href="#"
41+
@click.prevent="showrejected = ! showrejected"
42+
x-text="showrejected ? '{{ hiderejectedtext }}' : '{{ showrejectedtext }}'"
43+
>
44+
{{ showrejectedtext }}
45+
</a>
3846
</p>
3947

40-
<table class="data-block__table" x-show="showrejected" x-transition>
48+
<table class="data-block__table" x-show="showrejected">
4149
<thead>
4250
<tr>
4351
<th class="data-block__table-date">{% trans "Date submitted" %}</th>
@@ -53,4 +61,4 @@
5361
</table>
5462
{% endif %}
5563
</div>
56-
</div>
64+
</section>

‎hypha/apply/projects/templates/application_projects/includes/report_line.html‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
11
{% load i18n heroicons %}
2-
<li class="data-block__list-item">
3-
<div class="data-block__info">
2+
<li class="gap-2 data-block__list-item">
3+
<p class="flex-1 m-0">
44
{% if current %}
55
{% trans "The" %} {% if report.can_submit %}{% trans "current" %}{% else %}{% trans "next" %}{% endif %} {% trans "reporting period is" %}
66
{% else %}
77
{% trans "A report is due for the period" %}
88
{% endif %}
9-
<b>{{ report.start_date }}</b> {% trans "to" %} <b>{{ report.end_date }}</b>
9+
<b class="font-semibold">{{ report.start_date }}</b> {% trans "to" %} <b class="font-semibold">{{ report.end_date }}</b>
1010
{% if report.is_very_late %}
1111
{% heroicon_outline 'exclamation-circle' stroke_width=2 size=22 class="inline me-1 stroke-red-500" aria_hidden=true %}
1212
{% endif %}
13-
</div>
14-
15-
<div class="data-block__links">
16-
{% if report.can_submit %}
17-
<a
18-
class="data-block__button button button--project-action"
19-
href="{% url "apply:projects:reports:edit" pk=report.pk %}"
20-
>
21-
{% if report.draft %}{% trans "Continue Editing" %}{% else %}{% trans "Add Report" %}{% endif %}
22-
</a>
23-
{% endif %}
24-
2513
{% if request.user.is_apply_staff and report.can_submit %}
26-
27-
<input
14+
<button
2815
hx-post="{% url "apply:projects:reports:skip" pk=report.id %}"
2916
hx-confirm="{% blocktrans with start_date=report.start_date end_date=report.end_date %} You're skipping the report for {{ start_date }} - {{ end_date }}. This will result in a gap in reporting for the project. You can undo this at any time. {% endblocktrans %}"
30-
type="submit"
3117
value="{% trans 'Skip' %}"
3218
class="btn data-block__action-link"
33-
></input>
34-
19+
>
20+
{% trans 'Skip' %}
21+
</button>
3522
{% endif %}
36-
</div>
23+
</p>
24+
25+
{% if report.can_submit %}
26+
<span>
27+
<a
28+
class="button button--project-action"
29+
href="{% url "apply:projects:reports:edit" pk=report.pk %}"
30+
>
31+
{% if report.draft %}{% trans "Continue Editing" %}{% else %}{% trans "Add Report" %}{% endif %}
32+
</a>
33+
</span>
34+
{% endif %}
3735
</li>

‎hypha/apply/projects/templates/application_projects/includes/reports.html‎

Lines changed: 93 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -2,103 +2,104 @@
22

33
{% user_can_update_project_reports object user as can_update_project_reports %}
44
{% if can_update_project_reports %}
5-
<div class="wrapper wrapper--outer-space-large">
6-
<div class="data-block">
7-
<div class="data-block__header">
8-
<p class="data-block__title">{% trans "Reports" %}</p>
9-
</div>
10-
<div class="data-block__body">
11-
{% user_can_update_report_config object user as can_update_report_config %}
12-
{% if can_update_report_config %}
13-
<div class="data-block__card">
14-
<p class="data-block__card-title">{% trans "Report frequency" %}</p>
15-
<p class="data-block__card-copy">{{ object.report_config.get_frequency_display }}</p>
16-
<p class="data-block__card-copy">
17-
<a class="data-block__action-link"
18-
href="{% url 'apply:projects:report_frequency_update' pk=object.id %}"
19-
hx-get="{% url 'apply:projects:report_frequency_update' pk=object.id %}"
20-
hx-target="#htmx-modal"
21-
>
22-
{% if object.report_config.disable_reporting %}{% trans "Enable" %}{% else %}{% trans "Change" %}{% endif %}
23-
</a>
24-
</p>
25-
</div>
26-
{% endif %}
27-
<ul class="data-block__list">
28-
{% for report in object.report_config.past_due_reports %}
29-
{% include "application_projects/includes/report_line.html" with report=report %}
30-
{% endfor %}
31-
{% with next_report=object.report_config.current_due_report %}
32-
{% if next_report %}
33-
{% include "application_projects/includes/report_line.html" with report=next_report current=True %}
5+
<section class="docs-block wrapper--outer-space-large">
6+
<div class="docs-block__header">
7+
<h2 class="m-0 text-lg font-semibold">
8+
{% trans "Reports" %}
9+
</h2>
10+
{% user_can_update_report_config object user as can_update_report_config %}
11+
{% if can_update_report_config %}
12+
<p class="m-0 text-fg-muted">
13+
{{ object.report_config.get_frequency_display }} &middot;
14+
<a class="font-semibold"
15+
href="{% url 'apply:projects:report_frequency_update' pk=object.id %}"
16+
hx-get="{% url 'apply:projects:report_frequency_update' pk=object.id %}"
17+
hx-target="#htmx-modal"
18+
>
19+
{% if object.report_config.disable_reporting %}
20+
{% trans "Enable" %}
21+
{% else %}
22+
{% trans "Update" %}
3423
{% endif %}
35-
{% endwith %}
36-
</ul>
37-
</div>
24+
</a>
25+
</p>
26+
{% endif %}
3827
</div>
39-
</div>
28+
29+
<div class="docs-block__inner">
30+
<ul class="data-block__list">
31+
{% for report in object.report_config.past_due_reports %}
32+
{% include "application_projects/includes/report_line.html" with report=report %}
33+
{% endfor %}
34+
{% with next_report=object.report_config.current_due_report %}
35+
{% if next_report %}
36+
{% include "application_projects/includes/report_line.html" with report=next_report current=True %}
37+
{% endif %}
38+
{% endwith %}
39+
</ul>
40+
</div>
41+
</section>
4042
{% endif %}
4143

4244

43-
<div class="wrapper wrapper--outer-space-large">
44-
<div class="data-block">
45-
<div class="data-block__header">
46-
<p class="data-block__title">{% trans "Past reports" %}</p>
47-
</div>
48-
<div class="data-block__body">
49-
<table class="data-block__table js-past-reports-table">
50-
<thead>
51-
<tr>
52-
<th class="data-block__table-date">{% trans "Period End" %}</th>
53-
<th class="data-block__table-date">{% trans "Submitted" %}</th>
54-
<th class="data-block__table-update"></th>
55-
</tr>
56-
</thead>
57-
<tbody>
58-
{% for report in object.reports.done %}
59-
<tr {% if forloop.counter > 8 %}class="is-hidden"{% endif %}>
60-
<td class="py-4 px-2.5">
61-
<span class="data-block__mobile-label">{% trans "Period End" %}: </span>{{ report.end_date }}
62-
</td>
63-
<td class="py-4 px-2.5">
64-
<span class="data-block__mobile-label">{% trans "Submitted" %}: </span>{{ report.submitted_date|default:"Skipped" }}
65-
</td>
66-
<td class="py-4 px-2.5 data-block__links">
67-
{% if not report.skipped %}
68-
{% user_can_view_report report user as can_view_report %}
69-
{% if can_view_report %}
70-
<a class="data-block__action-icon-link" href="{% url "apply:projects:reports:detail" pk=report.pk %}">
71-
{% heroicon_micro "eye" class="inline w-4 h-4 me-1" aria_hidden=true %}
72-
{% trans "View" %}
73-
</a>
74-
{% endif %}
7545

76-
{% user_can_update_report report user as can_update_report %}
77-
{% if can_update_report %}
78-
<a class="data-block__action-icon-link" href="{% url "apply:projects:reports:edit" pk=report.pk %}">
79-
{% heroicon_micro "pencil-square" class="inline me-1" aria_hidden=true %}
80-
{% trans "Edit" %}
81-
</a>
82-
{% endif %}
83-
{% else %}
84-
{% if can_update_project_reports %}
85-
<button type="button" class="btn data-block__action-link" hx-post="{% url "apply:projects:reports:skip" pk=report.pk %}">{% trans "Unskip" %}</button>
86-
{% endif %}
46+
<section class="docs-block wrapper--outer-space-large">
47+
<h2 class="m-0 text-lg font-semibold docs-block__header">
48+
{% trans "Past reports" %}
49+
</h2>
50+
<div class="docs-block__inner">
51+
<table class="data-block__table js-past-reports-table">
52+
<thead>
53+
<tr>
54+
<th class="data-block__table-date">{% trans "Period End" %}</th>
55+
<th class="data-block__table-date">{% trans "Submitted" %}</th>
56+
<th class="data-block__table-update"></th>
57+
</tr>
58+
</thead>
59+
<tbody>
60+
{% for report in object.reports.done %}
61+
<tr {% if forloop.counter > 8 %}class="is-hidden"{% endif %}>
62+
<td class="py-4 px-2.5">
63+
<span class="data-block__mobile-label">{% trans "Period End" %}: </span>{{ report.end_date }}
64+
</td>
65+
<td class="py-4 px-2.5">
66+
<span class="data-block__mobile-label">{% trans "Submitted" %}: </span>{{ report.submitted_date|default:"Skipped" }}
67+
</td>
68+
<td class="flex gap-2 py-4 px-2.5 md:justify-end">
69+
{% if not report.skipped %}
70+
{% user_can_view_report report user as can_view_report %}
71+
{% if can_view_report %}
72+
<a class="data-block__action-icon-link" href="{% url "apply:projects:reports:detail" pk=report.pk %}">
73+
{% heroicon_micro "eye" class="inline w-4 h-4 me-1" aria_hidden=true %}
74+
{% trans "View" %}
75+
</a>
8776
{% endif %}
88-
</td>
89-
</tr>
90-
{% empty %}
91-
<tr>
92-
<td colspan="3">{% trans "No reports submitted" %}</td>
93-
</tr>
94-
{% endfor %}
95-
</tbody>
96-
</table>
97-
{% if object.reports.done.count > 8 %}
98-
<p class="data-block__pagination">
99-
<a class="data-block__pagination-link js-data-block-pagination" href="#">{% trans "Show more" %}</a>
100-
</p>
101-
{% endif %}
102-
</div>
77+
78+
{% user_can_update_report report user as can_update_report %}
79+
{% if can_update_report %}
80+
<a class="data-block__action-icon-link" href="{% url "apply:projects:reports:edit" pk=report.pk %}">
81+
{% heroicon_micro "pencil-square" class="inline me-1" aria_hidden=true %}
82+
{% trans "Edit" %}
83+
</a>
84+
{% endif %}
85+
{% else %}
86+
{% if can_update_project_reports %}
87+
<button type="button" class="btn data-block__action-link" hx-post="{% url "apply:projects:reports:skip" pk=report.pk %}">{% trans "Unskip" %}</button>
88+
{% endif %}
89+
{% endif %}
90+
</td>
91+
</tr>
92+
{% empty %}
93+
<tr>
94+
<td colspan="3">{% trans "No reports submitted" %}</td>
95+
</tr>
96+
{% endfor %}
97+
</tbody>
98+
</table>
99+
{% if object.reports.done.count > 4 %}
100+
<p class="text-center">
101+
<a class="font-semibold js-data-block-pagination" href="#">{% trans "Show more" %}</a>
102+
</p>
103+
{% endif %}
103104
</div>
104-
</div>
105+
</section>

‎hypha/apply/projects/templates/application_projects/partials/invoice_status_table.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
{% endif %}
3131
{% can_change_status invoice user as can_change_invoice_status %}
3232
{% if can_change_invoice_status %}
33-
<button class="data-block__button button button--project-action" hx-get="{% url 'apply:projects:invoice-update' pk=invoice.project.pk invoice_pk=invoice.pk %}" hx-target="#htmx-modal">
33+
<button class="button button--project-action" hx-get="{% url 'apply:projects:invoice-update' pk=invoice.project.pk invoice_pk=invoice.pk %}" hx-target="#htmx-modal">
3434
{% trans "Update Status" %}
3535
</button>
3636
{% endif %}

‎hypha/apply/projects/templates/application_projects/project_detail.html‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,12 +181,23 @@ <h5>{% trans "Project form approvals" %}</h5>
181181
</div>
182182
</div>
183183
{% else %}
184-
<p class="m-0 sidebar__paf-approvals--pending">{% trans "Pending approval from " %}{% if paf_approval.user %}{{ paf_approval.user }}{% else %} {{ paf_approval.paf_reviewer_role.label }}{% trans " (nobody assigned yet)" %} {% endif %}</p>
184+
<p class="flex gap-2 items-center m-0 mb-2 text-red-600">
185+
<span>{% heroicon_micro "clock" class="inline-block w-4 h-4 align-middle" aria_hidden=true %}</span>
186+
<span>{% trans "Pending approval from " %}{% if paf_approval.user %}{{ paf_approval.user }}{% else %} {{ paf_approval.paf_reviewer_role.label }} ({% trans "nobody assigned yet" %}){% endif %}</span>
187+
</p>
185188
{% endif %}
186189
{% else %}
187-
<p class="m-0 sidebar__paf-approvals--approved">{% trans "Approved by " %}{{ paf_approval.user }} {% if paf_approval.approved_at %}(<i>{{ paf_approval.approved_at|date }}</i>){% endif %}</p>
190+
<p class="flex gap-2 items-center m-0 mb-2">
191+
{% heroicon_micro "check-circle" class="inline align-middle fill-green-500" aria_hidden=true %}
192+
193+
<span>{{ paf_approval.user }} {% trans "approved" %}
194+
{% if paf_approval.approved_at %}
195+
<relative-time datetime="{{ paf_approval.approved_at|date:"c" }}" class="text-fg-muted">
196+
{{ paf_approval.approved_at|date }}
197+
</relative-time>
198+
{% endif %}</span>
199+
</p>
188200
{% endif %}
189-
<br>
190201
{% endfor %}
191202

192203
</div>

‎hypha/static_src/javascript/past-reports-pagination.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
}
2020

2121
/**
22-
* Check remaning.
22+
* Check remaining.
2323
*/
2424
function checkRemaining() {
2525
const [...remaining] = $(".js-past-reports-table tr.is-hidden");

0 commit comments

Comments
 (0)