Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enhance look and feel of the submission results page #4200

Merged
merged 2 commits into from
Nov 7, 2024
Merged

Enhance look and feel of the submission results page #4200

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6ed30e
Improve look and feel of the submission results page
theskumar Nov 6, 2024
cdbfd8e
Update the layout and add aria-*
theskumar Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 89 additions & 49 deletions hypha/apply/funds/templates/funds/submissions_result.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,59 +9,99 @@
{% slot sub_heading %}{% trans "Track and explore submission results" %}{% endslot %}
{% endadminbar %}


<div class="wrapper wrapper--large wrapper--inner-space-medium">
<div class="wrapper wrapper--bottom-space">
<section class="wrapper wrapper--bottom-space">
<h3>{% trans "Summary" %}</h3>
<div class="prose max-w-none"><div class="flex flex-wrap gap-4">
<div class="border p-4 shadow">
<h5>{% trans "Amounts" %}</h5>
<table class="mb-0 mt-2">
<tr><th class="pe-4">{% trans "Applied" %} ({% get_currency_symbol %})</th><th>{% trans "Accepted" %} ({% get_currency_symbol %})</th></tr>
<tr><td>{{ submission_sum|default:"0"|format_number_as_currency }}</td><td>{{ submission_accepted_sum|default:"0"|format_number_as_currency }}</td></tr>
</table>
</div>
<div class="border p-4 shadow">
<h5>{% trans "Submissions" %}</h5>
<table class="mb-0 mt-2">
<tr>
<th class="pe-4">{% trans "Applied" %}</th>
<th class="pe-4">{% trans "Accepted" %}</th>
<th>{% trans "Pending" %}</th>
</tr>
<tr>
<td>{{ object_list.count }}</td>
<td>{{ submission_accepted_count|default:"0" }}</td>
<td>{{ submission_undetermined_count|default:"0" }}</td>
</tr>
</table>
</div>
<div class="border p-4 shadow">
<h5>{% trans "Reviews" %}</h5>
<table class="mb-0 mt-2">
<tr>
<th class="pe-4">{% trans "All" %}</th>
<th class="pe-4">{% trans "You" %}</th>
<th>{% trans "Your avg. score" %}</th></tr>
<tr><td>{{ review_count|default:"0" }}</td><td>{{ review_my_count|default:"0" }}</td><td>{{ review_my_score|floatformat:"0"|default:"0" }}</td></tr>
</table>
</div>
</div>

<div class="grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 lg:gap-8">
<section class="border p-4 shadow" aria-labelledby="amounts-heading">
<h5 id="amounts-heading">{% trans "Amounts" %}</h5>

<div class="flex flex-wrap gap-4">
<dl role="list" aria-label="{% trans 'Applied amounts' %}" class="flex-grow">
<dt class="text-fg-muted pb-2 border-b">{% trans "Applied" %} ({% get_currency_symbol %})</dt>
<dd class="text-xl font-semibold pt-2">{{ submission_sum|default:"0"|format_number_as_currency }}</dd>
</dl>
<dl role="list" aria-label="{% trans 'Accepted amounts' %}" class="flex-grow">
<dt class="text-fg-muted pb-2 border-b">{% trans "Accepted" %} ({% get_currency_symbol %})</dt>
<dd class="text-xl font-semibold pt-2">{{ submission_accepted_sum|default:"0"|format_number_as_currency }}</dd>
</dl>
</div>
</section>

<section class="border p-4 shadow" aria-labelledby="submissions-heading">
<h5 id="submissions-heading">{% trans "Submissions" %}</h5>
<div class="grid grid-cols-3 gap-4">
<dl role="list" aria-label="{% trans 'Applied submissions' %}">
<dt class="text-fg-muted pb-2 border-b">{% trans "Applied" %}</dt>
<dd class="text-xl font-semibold pt-2">{{ object_list.count }}</dd>
</dl>
<dl role="list" aria-label="{% trans 'Accepted submissions' %}">
<dt class="text-fg-muted pb-2 border-b">{% trans "Accepted" %}</dt>
<dd class="text-xl font-semibold pt-2">{{ submission_accepted_count|default:"0" }}</dd>
</dl>
<dl role="list" aria-label="{% trans 'Pending submissions' %}">
<dt class="text-fg-muted pb-2 border-b">{% trans "Pending" %}</dt>
<dd class="text-xl font-semibold pt-2">{{ submission_undetermined_count|default:"0" }}</dd>
</dl>
</div>
</section>

<section class="border p-4 shadow" aria-labelledby="reviews-heading">
<h5 id="reviews-heading">{% trans "Reviews" %}</h5>
<div class="mb-0 mt-2">
<div class="grid grid-cols-4 gap-4">
<dl role="list" aria-label="{% trans 'All reviews' %}">
<dt class="text-fg-muted pb-2 border-b">{% trans "All" %}</dt>
<dd class="text-xl font-semibold pt-2">{{ review_count|default:"0" }}</dd>
</dl>
<dl role="list" aria-label="{% trans 'Your reviews' %}">
<dt class="text-fg-muted pb-2 border-b">{% trans "You" %}</dt>
<dd class="text-xl font-semibold pt-2">{{ review_my_count|default:"0" }}</dd>
</dl>
<dl role="list" aria-label="{% trans 'Your average score' %}" class="col-span-2">
<dt class="text-fg-muted pb-2 border-b">{% trans "Your avg. score" %}</dt>
<dd class="text-xl font-semibold pt-2">{{ review_my_score|floatformat:"0"|default:"0" }}</dd>
</dl>
</div>
</div>
</section>
</div>
</div>
</section>

<h3>{% trans "Submission value totals" %}</h3>
{% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form search_term=search_term filter_action=filter_action use_batch_actions=False filter_classes="filters-open" %}
<div class="hypha-grid">
<div><strong>{% trans "Number of submissions" %}:</strong> {{ count_values }}{% if not count_values == object_list.count %}*{% endif %}</div>
<div><strong>{% trans "Average value" %}:</strong> {{ average_value|format_number_as_currency }}</div>
<div><strong>{% trans "Total value" %}:</strong> {{ total_value|format_number_as_currency }}</div>
</div>
{% if not count_values == object_list.count %}
{% with object_list.count|subtract:count_values as count_diff %}
<p class="text-xs">{% blocktrans %}*{{ count_diff }} submission(s) lack requested amount fields or data and are not included.{% endblocktrans %}</p>
{% endwith %}
{% endif %}
<section class="wrapper wrapper--bottom-space" aria-labelledby="submission-value-total">
<h3 id="submission-value-total">{% trans "Submission value totals" %}</h3>

{% include "funds/includes/table_filter_and_search.html" with filter_form=filter_form search_term=search_term filter_action=filter_action use_batch_actions=False filter_classes="filters-open" %}

<div class="prose max-w-none grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 lg:gap-8">
<section class='border shadow p-4 flex flex-col gap-4' aria-labelledby="submissions-count-heading">
<span id="submissions-count-heading" class="text-fg-muted">{% trans "Number of submissions" %}</span>
<span class="text-2xl font-semibold">
{{ count_values }}<sup>{% if not count_values == object_list.count %}*{% endif %}</sup>
</span>
</section>
<section class='border shadow p-4 flex flex-col gap-4' aria-labelledby="average-value-heading">
<span id="average-value-heading" class="text-fg-muted">{% trans "Average value" %}</span>
<span class="text-2xl font-semibold">
{{ average_value|format_number_as_currency }}
</span>
</section>

<section class='border shadow p-4 flex flex-col gap-4' aria-labelledby="total-value-heading">
<span id="total-value-heading" class="text-fg-muted">{% trans "Total value" %}</span>
<span class="text-2xl font-semibold">
{{ total_value|format_number_as_currency }}
</span>
</section>
</div>
{% if not count_values == object_list.count %}
{% with object_list.count|subtract:count_values as count_diff %}
<p class="text-xs text-fg-muted" aria-live="polite">
{% blocktrans %}*{{ count_diff }} submission(s) lack requested amount fields or data and are not included.{% endblocktrans %}
</p>
{% endwith %}
{% endif %}
</section>
</div>
{% endblock %}
Loading