darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-19 14:09:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make the selected pill item a link

Browse Source 
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.
This commit is contained in:
Tom Byers
2020-09-04 13:32:34 +01:00
parent c6711a113c
commit 452e253e2c
2 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/templates/components/pill.html
View File

@@ -9,23 +9,18 @@
<nav aria-labelledby='page-header'>
<ul class='pill'>
{% for label, option, link, count in items %}
<li class="pill-item__container">
{% if current_value == option %}
<li>
<div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0' aria-current='page'>
<a 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">
{% else %}
<li>
<a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
<a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
{% endif %}
{% if show_count %}
{{ big_number(count, **big_number_args) }}
{{ big_number(count, **big_number_args) }}
{% endif %}
<div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
{% if current_value == option %}
</div>
{% else %}
</a>
{% endif %}
</li>
<div class="pill-item__label{% if current_value == option %} pill-item__label--selected{% endif %}{% if not show_count %} pill-item--centered{% endif %}">{{ label }}</div>
</a>
</li>
{% endfor %}
</ul>
</nav>