Skip to content

Commit

Permalink
Update the layout and add aria-*
Browse files Browse the repository at this point in the history
  • Loading branch information
@theskumar
theskumar committed Nov 7, 2024
1 parent f6ed30e commit cdbfd8e
Showing 1 changed file with 68 additions and 57 deletions.
125 changes: 68 additions & 57 deletions hypha/apply/funds/templates/funds/submissions_result.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,81 +12,92 @@
<div class="wrapper wrapper--large wrapper--inner-space-medium">
<section class="wrapper wrapper--bottom-space">
<h3>{% trans "Summary" %}</h3>
<div class="prose max-w-none grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-8">
<div class="border p-4 shadow">
<h5>{% trans "Amounts" %}</h5>
<table class="mb-0 mt-2">
<tr class="text-fg-muted">
<th class="pb-2 text-center">{% trans "Applied" %} ({% get_currency_symbol %})</th>
<th class="pb-2 text-center">{% trans "Accepted" %} ({% get_currency_symbol %})</th>
</tr>
<tr class="text-xl font-semibold">
<td class="pt-2 text-center">{{ submission_sum|default:"0"|format_number_as_currency }}</td>
<td class="pt-2 text-center">{{ 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 table-fixed">
<tr class="text-fg-muted">
<th class="pb-2 text-center">{% trans "Applied" %}</th>
<th class="pb-2 text-center">{% trans "Accepted" %}</th>
<th class="pb-2 text-center">{% trans "Pending" %}</th>
</tr>
<tr class="text-xl font-semibold">
<td class="pt-2 text-center">{{ object_list.count }}</td>
<td class="pt-2 text-center">{{ submission_accepted_count|default:"0" }}</td>
<td class="pt-2 text-center">{{ 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 table-fixed">
<tr class="text-fg-muted">
<th class="pb-2 text-center">{% trans "All" %}</th>
<th class="pb-2 text-center">{% trans "You" %}</th>
<th class="pb-2 text-center">{% trans "Your avg. score" %}</th></tr>
<tr class="text-xl font-semibold">
<th class="pt-2 text-center">{{ review_count|default:"0" }}</td>
<th class="pt-2 text-center">{{ review_my_count|default:"0" }}</td>
<th class="pt-2 text-center">{{ review_my_score|floatformat:"0"|default:"0" }}</td>
</tr>
</table>
</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>
</section>

<section class="wrapper wrapper--bottom-space">
<h3>{% trans "Submission value totals" %}</h3>
<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="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-8">
<div class='border shadow p-4 flex flex-col gap-4'>
<span>{% trans "Number of submissions" %}</span>
<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>
</div>
<div class='border shadow p-4 flex flex-col gap-4'>
<span>{% trans "Average value" %}</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>
</div>
<div class='border shadow p-4 flex flex-col gap-4'>
<span>{% trans "Total value" %}</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>

</div>
</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">
<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 %}
Expand Down

0 comments on commit cdbfd8e

Please sign in to comment.