darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-07-12 09:24:15 -04:00
Code Issues Packages Projects Releases Wiki Activity
Files
0aa1dd89e9e62e41023abdb1f4e91c00a5fb7d18
notifications-admin/app/templates/components/pill.html

28 lines
1003 B
HTML
Raw Normal View History

Put counts into the notification filters We can filter notifications on the activity page by state. This commit adds counts to those filters. This is mainly so that we can consistently do the same thing on the job page later on.
2016-06-08 15:15:59 +01:00
{% from 'components/big-number.html' import big_number %}
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
{% macro pill(
items=[],
Filter and navigate usage by financial year Right now we tell people that the usage page is for the current financial year. This is a lie – it’s for all time. So this commit calls through to the API to get the stats for (by default) the current financial year. We already do this for the monthly breakdown, this just does the same thing for the yearly totals. It also adds navigation to show the data for other financial years: - previous so you can go back and see your usage and verify that the bill you’re about to pay is correct - next so that you can check what your SMS allowance is going to be before you actually get into it
2017-01-25 15:59:06 +00:00
current_value=None,
Make list of templates filterable by type When users are trying to find a template there’s a fair chance that they know whether or not it’s an email/text message/(letter) that they’re looking for. Making them scroll past a whole bunch of templates of a different type means it will take them longer to find the template they are looking for. We already have search on the templates page, but this is only good for where they can remember the name of the template. This will be sometimes but not always. This commit adds some navigation to filter down the list of templates to only show one type at a time. By default it will show all templates. It adapts the pattern we use for filtering notifications by sending/failed/delivered, but without the counts of how many things are in each bucket (I don’t think there’s any value in knowing you have X text message templates; on this page you only really care about the one template you’re looking for). _Note: required re-arranging the functions in `templates.py`. The route for `/template/:uuid` needs to come before the route for `template/:string` otherwise Flask tries to interpret a template’s ID as its type.
2017-06-13 15:28:33 +01:00
big_number_args={'smaller': True},
show_count=True
Allow filter links to be used in combination Means you can see, for example emails that have failed. Means adding: - logic to generate links which can have a type parameter, a status parameter, or both - a ‘pill’ UI component for seeing which filters you currently have applied - some logic to change the page title based on which filters you have applied
2016-04-13 12:50:28 +01:00
) %}
Change pills from tabs to navigation Changes the HTML to do the following: - remove all tabs semantics - give the list a role of navigation - label the navigation with the h1 - mark the selected item with aria-current
2020-09-03 16:05:08 +01:00
<nav aria-labelledby='page-header'>
<ul class='pill'>
{% for label, option, link, count in items %}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
<li class="pill-item__container">
Change pills from tabs to navigation Changes the HTML to do the following: - remove all tabs semantics - give the list a role of navigation - label the navigation with the h1 - mark the selected item with aria-current
2020-09-03 16:05:08 +01:00
{% if current_value == option %}
Give selected pill item an id
2020-09-09 22:31:11 +01:00
<a id="pill-selected-item" class="pill-item pill-item--selected govuk-link govuk-link--no-visited-state{% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
Change pills from tabs to navigation Changes the HTML to do the following: - remove all tabs semantics - give the list a role of navigation - label the navigation with the h1 - mark the selected item with aria-current
2020-09-03 16:05:08 +01:00
{% else %}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
<a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
Make list of templates filterable by type When users are trying to find a template there’s a fair chance that they know whether or not it’s an email/text message/(letter) that they’re looking for. Making them scroll past a whole bunch of templates of a different type means it will take them longer to find the template they are looking for. We already have search on the templates page, but this is only good for where they can remember the name of the template. This will be sometimes but not always. This commit adds some navigation to filter down the list of templates to only show one type at a time. By default it will show all templates. It adapts the pattern we use for filtering notifications by sending/failed/delivered, but without the counts of how many things are in each bucket (I don’t think there’s any value in knowing you have X text message templates; on this page you only really care about the one template you’re looking for). _Note: required re-arranging the functions in `templates.py`. The route for `/template/:uuid` needs to come before the route for `template/:string` otherwise Flask tries to interpret a template’s ID as its type.
2017-06-13 15:28:33 +01:00
{% endif %}
Change pills from tabs to navigation Changes the HTML to do the following: - remove all tabs semantics - give the list a role of navigation - label the navigation with the h1 - mark the selected item with aria-current
2020-09-03 16:05:08 +01:00
{% if show_count %}
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
{{ big_number(count, **big_number_args) }}
Change pills from tabs to navigation Changes the HTML to do the following: - remove all tabs semantics - give the list a role of navigation - label the navigation with the h1 - mark the selected item with aria-current
2020-09-03 16:05:08 +01:00
{% endif %}
Remove pill-item__label--selected class It was used to mark labels of selected items when we thought they might need extra styling but is now redundant.
2020-09-08 11:46:32 +01:00
<div class="pill-item__label{% if not show_count %} pill-item--centered{% endif %}">{{ label }}</div>
Make the selected pill item a link All other navigations have their selected item as a link so we should match this. Includes changes to the pill CSS so: 1. it doesn't use elements in the selectors 2. all the selectors use BEM I did 2. because I had to change the classes/selectors anyway, they might as well match the style GOVUK Design System uses.
2020-09-04 13:32:34 +01:00
</a>
</li>
Change pills from tabs to navigation Changes the HTML to do the following: - remove all tabs semantics - give the list a role of navigation - label the navigation with the h1 - mark the selected item with aria-current
2020-09-03 16:05:08 +01:00
{% endfor %}
</ul>
</nav>
Put counts into the notification filters We can filter notifications on the activity page by state. This commit adds counts to those filters. This is mainly so that we can consistently do the same thing on the job page later on.
2016-06-08 15:15:59 +01:00
{% endmacro %}
Reference in New Issue Copy Permalink