Change list items on /users page

Change the HTML & CSS for user-list-item's to
support their content being split into 2 columns
of a grid instead of the edit link being
positioned absolutely.

Also includes:
1. removes `<div>`s from `<ul>` (non-valid HTML)
2. split action link out from permissions list
3. split summary of folder permissions out from
   permissions list
4. introduces a class for blocks of text that
   appear when there are no items.
5. fixes tests broken by changes to HTML
This commit is contained in:
Tom Byers
2020-08-19 14:52:17 +01:00
parent 3bebb1fbfd
commit be83ea36ea
4 changed files with 95 additions and 80 deletions

View File

@@ -22,33 +22,35 @@
<div class="user-list">
{% for user in users %}
<div class="user-list-item">
<h2 class="user-list-item-heading" title="{{ user.email_address }}">
{%- if user.name -%}
<span class="heading-small live-search-relevant">{{ user.name }}</span>&ensp;
{%- endif -%}
<span class="hint">
{%- if user.status == 'pending' -%}
<span class="live-search-relevant">{{ user.email_address }}</span> (invited)
{%- elif user.status == 'cancelled' -%}
<span class="live-search-relevant">{{ user.email_address }}</span> (cancelled invite)
{%- elif user.id == current_user.id -%}
<span class="live-search-relevant">(you)</span>
{% else %}
<span class="live-search-relevant">{{ user.email_address }}</span>
{% endif %}
</span>
</h2>
<ul class="tick-cross-list govuk-grid-row">
<div class="tick-cross-list-permissions govuk-grid-column-three-quarters">
{% for permission, label in permissions %}
{{ tick_cross(
user.has_permission_for_service(current_service.id, permission),
label
) }}
{% endfor %}
<div class="govuk-grid-row">
<div class="govuk-grid-column-three-quarters">
<h2 class="user-list-item-heading" title="{{ user.email_address }}">
{%- if user.name -%}
<span class="heading-small live-search-relevant">{{ user.name }}</span>&ensp;
{%- endif -%}
<span class="hint">
{%- if user.status == 'pending' -%}
<span class="live-search-relevant">{{ user.email_address }}</span> (invited)
{%- elif user.status == 'cancelled' -%}
<span class="live-search-relevant">{{ user.email_address }}</span> (cancelled invite)
{%- elif user.id == current_user.id -%}
<span class="live-search-relevant">(you)</span>
{% else %}
<span class="live-search-relevant">{{ user.email_address }}</span>
{% endif %}
</span>
</h2>
<ul class="tick-cross-list-permissions">
{% for permission, label in permissions %}
{{ tick_cross(
user.has_permission_for_service(current_service.id, permission),
label
) }}
{% endfor %}
</ul>
{# only show if the service has folders #}
{% if current_service.all_template_folders %}
<div class="tick-cross-list-hint">
<p class="govuk-body tick-cross-list-hint">
{% set folder_count = user.template_folders_for_service(current_service) | length %}
{% if folder_count == 0 %}
@@ -58,28 +60,28 @@
{% else %}
Can see all folders
{% endif%}
</div>
</p>
{% endif %}
{% if current_service.has_permission('email_auth') %}
<div class="tick-cross-list-hint">
<p class="govuk-body tick-cross-list-hint">
{% if user.auth_type == 'sms_auth' %}
Signs in with a text message code
{% else %}
Signs in with an email link
{% endif %}
</div>
</p>
{% endif %}
</div>
{% if current_user.has_permissions('manage_service') %}
<li class="tick-cross-list-edit-link">
{% if user.status == 'pending' %}
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="govuk-visually-hidden"> for {{ user.email_address }}</span></a>
{% elif user.state == 'active' and current_user.id != user.id %}
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="govuk-visually-hidden"> for {{ user.name }} {{ user.email_address }}</span></a>
</div>
<div class="govuk-grid-column-one-quarter">
{% if current_user.has_permissions('manage_service') %}
{% if user.status == 'pending' %}
<a class="user-list-edit-link govuk-link govuk-link--no-visited-state" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="govuk-visually-hidden"> for {{ user.email_address }}</span></a>
{% elif user.state == 'active' and current_user.id != user.id %}
<a class="user-list-edit-link govuk-link govuk-link--no-visited-state" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="govuk-visually-hidden"> for {{ user.name }} {{ user.email_address }}</span></a>
{% endif %}
{% endif %}
</li>
{% endif %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>