Merge pull request #3605 from alphagov/prevent-user-name-email-being-cut-off

Prevent user name email being cut off
This commit is contained in:
Tom Byers
2020-09-10 15:10:58 +01:00
committed by GitHub
9 changed files with 212 additions and 170 deletions

View File

@@ -36,44 +36,10 @@
} }
&-edit-link {
text-align: right;
position: absolute;
top: -25px;
right: -135px;
a {
&:before {
content: "";
display: block;
position: absolute;
top: -1 * govuk-spacing(3) - 1;
right: 0;
bottom: -1 * govuk-spacing(3);
left: -1 * govuk-spacing(3);
background: transparent;
}
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px 15px 15px;
right: -3px;
}
}
}
&-hint { &-hint {
color: #6F777B; color: #6F777B;
padding-top: 5px; padding-top: 5px;
margin: 0;
} }
} }

View File

@@ -7,17 +7,14 @@ $item-top-padding: govuk-spacing(3);
&-item { &-item {
padding: $item-top-padding 150px govuk-spacing(3) 0; padding: govuk-spacing(3) 0px;
border-top: 1px solid $border-colour; border-top: 1px solid $border-colour;
position: relative;
&-heading { &-heading {
padding-right: govuk-spacing(3); padding-right: govuk-spacing(3);
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; overflow-wrap: break-word;
color: $secondary-text-colour; // So the ellipsis is grey
.heading-small { .heading-small {
color: $black; color: $black;
@@ -29,13 +26,61 @@ $item-top-padding: govuk-spacing(3);
border-bottom: 1px solid $border-colour; border-bottom: 1px solid $border-colour;
} }
& :last-child {
margin-bottom: 0;
}
&-blank {
margin-bottom: govuk-spacing(3);
@include govuk-media-query($from: tablet) {
margin-bottom: 0;
}
}
} }
&-edit-link { &-edit-link {
text-align: right;
position: absolute; position: relative;
top: $item-top-padding; display: block;
right: 0px; margin: govuk-spacing(3) 0 govuk-spacing(3);
@include govuk-media-query($from: tablet) {
float: right;
margin: 0;
}
&:before {
content: "";
display: block;
position: absolute;
top: -1 * govuk-spacing(3) - 1;
right: 0;
bottom: -1 * govuk-spacing(3);
left: -1 * govuk-spacing(3);
background: transparent;
}
&:active:before,
&:focus:before {
border-color: $yellow;
border-style: solid;
border-width: 15px 3px;
right: -3px;
left: -3px;
@include govuk-media-query($from: tablet) {
border-width: 15px 3px 15px 15px;
left: -15px;
}
}
} }
} }

View File

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

View File

@@ -1,7 +1,6 @@
{% extends "org_template.html" %} {% extends "org_template.html" %}
{% from "components/table.html" import list_table, row, field, hidden_field_heading %} {% from "components/table.html" import list_table, row, field, hidden_field_heading %}
{% from "components/page-footer.html" import page_footer %} {% from "components/page-footer.html" import page_footer %}
{% from "components/tick-cross.html" import tick_cross %}
{% from "components/textbox.html" import textbox %} {% from "components/textbox.html" import textbox %}
{% from "components/live-search.html" import live_search %} {% from "components/live-search.html" import live_search %}
{% from "components/button/macro.njk" import govukButton %} {% from "components/button/macro.njk" import govukButton %}
@@ -25,29 +24,31 @@
<div class="user-list"> <div class="user-list">
{% for user in users %} {% for user in users %}
<div class="user-list-item"> <div class="user-list-item">
<h2 class="user-list-item-heading"> <div class="govuk-grid-row">
{%- if user.name -%} <div class="govuk-grid-column-three-quarters">
<span class="heading-small">{{ user.name }}</span>&ensp; <h2 class="user-list-item-heading">
{%- endif -%} {%- if user.name -%}
<span class="hint"> <span class="heading-small">{{ user.name }}</span>&ensp;
{%- if user.status == 'pending' -%} {%- endif -%}
{{ user.email_address }} (invited) <span class="hint">
{%- elif user.status == 'cancelled' -%} {%- if user.status == 'pending' -%}
{{ user.email_address }} (cancelled invite) {{ user.email_address }} (invited)
{%- elif user.id == current_user.id -%} {%- elif user.status == 'cancelled' -%}
(you) {{ user.email_address }} (cancelled invite)
{% else %} {%- elif user.id == current_user.id -%}
{{ user.email_address }} (you)
{% endif %} {% else %}
</span> {{ user.email_address }}
</h2> {% endif %}
<ul class="tick-cross-list"> </span>
<li class="tick-cross-list-edit-link"> </h2>
</div>
<div class="govuk-grid-column-one-quarter">
{% if user.status == 'pending' %} {% if user.status == 'pending' %}
<a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation</a> <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.cancel_invited_org_user', org_id=current_org.id, invited_user_id=user.id)}}">Cancel invitation</a>
{% endif %} {% endif %}
</li> </div>
</ul> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

View File

@@ -29,27 +29,28 @@
By default data is kept for 7 days By default data is kept for 7 days
</div> </div>
</div> </div>
<div class="user-list"> {% if not current_service.data_retention %}
{% if not current_service.data_retention %} <div class="user-list">
<div class="user-list-item"> <div class="user-list-item">
<span class="hint">You have not added any data retention</span> <p class="govuk-body user-list-item-blank hint">You have not added any data retention</p>
</div> </div>
{% endif %} </div>
{% call mapping_table( {% else %}
caption='Data retention', {% call mapping_table(
field_headings=['Label', 'Value', 'Action'], caption='Data retention',
field_headings_visible=False, field_headings=['Label', 'Value', 'Action'],
caption_visible=False field_headings_visible=False,
) %} caption_visible=False
{% for item in current_service.data_retention %} ) %}
{% call row() %} {% for item in current_service.data_retention %}
{{ text_field(item.notification_type | format_notification_type)}} {% call row() %}
{{ text_field(item.days_of_retention) }} {{ text_field(item.notification_type | format_notification_type)}}
{{ edit_field('Change', url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=item.id)) }} {{ text_field(item.days_of_retention) }}
{% endcall %} {{ edit_field('Change', url_for('.edit_data_retention', service_id=current_service.id, data_retention_id=item.id)) }}
{% endcall %}
{% endfor %} {% endfor %}
{% endcall %} {% endcall %}
</div> {% endif %}
{% endblock %} {% endblock %}

View File

@@ -18,24 +18,34 @@
<div class="user-list"> <div class="user-list">
{% if not current_service.email_reply_to_addresses %} {% if not current_service.email_reply_to_addresses %}
<div class="user-list-item"> <div class="user-list-item">
<span class="hint">You have not added any reply-to email addresses yet</span> <p class="govuk-body user-list-item-blank hint">You have not added any reply-to email addresses yet</p>
</div> </div>
{% endif %} {% endif %}
{% for item in current_service.email_reply_to_addresses %} {% for item in current_service.email_reply_to_addresses %}
<div class="user-list-item"> <div class="user-list-item">
<h2 class="user-list-item-heading"> <div class="govuk-grid-row">
<span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint"> <div class="govuk-grid-column-three-quarters">
{%- if item.is_default -%} <h2 class="user-list-item-heading">
(default) <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
{%- if item.is_default -%}
(default)
{% endif %}
</span>
</h2>
</div>
<div class="govuk-grid-column-one-quarter">
{% if current_user.has_permissions('manage_service') %}
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a>
{% endif %} {% endif %}
</span> </div>
</h2> </div>
{% if current_user.has_permissions('manage_service') %} <div class="govuk-grid-row">
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">Change</a> <div class="govuk-grid-column-full">
{% endif %} {% if current_service.count_email_reply_to_addresses > 1 %}
{% if current_service.count_email_reply_to_addresses > 1 %} {{ api_key(item.id, name=item.email_address, thing="ID") }}
{{ api_key(item.id, name=item.email_address, thing="ID") }} {% endif %}
{% endif %} </div>
</div>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

View File

@@ -18,30 +18,41 @@
</div> </div>
<div class="user-list"> <div class="user-list">
<div class="user-list-item"> <div class="user-list-item">
<span class="hint"> <div class="govuk-grid-row">
Blank <div class="govuk-grid-column-three-quarters">
{% if current_service.default_letter_contact_block %} <p class="user-list-item-blank govuk-body hint">
{% if current_user.has_permissions('manage_service') %} Blank
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_make_blank_default_letter_contact', service_id =current_service.id) }}">Make default</a> {% if not current_service.default_letter_contact_block %}
(default)
{% endif %}
</p>
</div>
<div class="govuk-grid-column-one-quarter">
{% if current_service.default_letter_contact_block and current_user.has_permissions('manage_service') %}
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_make_blank_default_letter_contact', service_id =current_service.id) }}">Make default</a>
{% endif %} {% endif %}
{% else %} </div>
(default) </div>
{% endif %}
</span>
</div> </div>
{% for item in letter_contact_details %} {% for item in letter_contact_details %}
<div class="user-list-item"> <div class="user-list-item">
<p class="govuk-body"> <div class="govuk-grid-row">
{{ item.contact_block | nl2br }} <div class="govuk-grid-column-three-quarters">
</p> <p class="govuk-body">
<p class="hint"> {{ item.contact_block | nl2br }}
{%- if item.is_default -%} </p>
(default) <p class="govuk-body hint">
{% endif %} {%- if item.is_default -%}
</p> (default)
{% if current_user.has_permissions('manage_service') %} {% endif %}
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a> </p>
{% endif %} </div>
<div class="govuk-grid-column-one-quarter">
{% if current_user.has_permissions('manage_service') %}
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_letter_contact', service_id =current_service.id, letter_contact_id = item.id) }}">Change</a>
{% endif %}
</div>
</div>
{% if letter_contact_details|length > 1 %} {% if letter_contact_details|length > 1 %}
{% set first_line_of_contact_block = item.contact_block|normalise_lines|first %} {% set first_line_of_contact_block = item.contact_block|normalise_lines|first %}
{{ api_key(item.id, name=first_line_of_contact_block, thing="ID") }} {{ api_key(item.id, name=first_line_of_contact_block, thing="ID") }}

View File

@@ -18,23 +18,29 @@
<div class="user-list"> <div class="user-list">
{% if not current_service.sms_senders %} {% if not current_service.sms_senders %}
<div class="user-list-item"> <div class="user-list-item">
<span class="hint">You have not added any text message senders yet</span> <p class="govuk-body user-list-item-blank hint">You have not added any text message senders yet</p>
</div> </div>
{% endif %} {% endif %}
{% for item in current_service.sms_senders_with_hints %} {% for item in current_service.sms_senders_with_hints %}
<div class="user-list-item"> <div class="user-list-item">
<h2 class="user-list-item-heading"> <div class="govuk-grid-row">
<span class="heading-small">{{ item.sms_sender }}</span> <div class="govuk-grid-column-three-quarters">
{% if item.hint %} <h2 class="user-list-item-heading">
&ensp; <span class="heading-small">{{ item.sms_sender }}</span>
<span class="hint"> {% if item.hint %}
{{ item.hint }} &ensp;
</span> <span class="hint">
{% endif %} {{ item.hint }}
</h2> </span>
{% if current_user.has_permissions('manage_service') %} {% endif %}
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">Change</a> </h2>
{% endif %} </div>
<div class="govuk-grid-column-one-quarter">
{% if current_user.has_permissions('manage_service') %}
<a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">Change</a>
{% endif %}
</div>
</div>
{% if current_service.count_sms_senders > 1 %} {% if current_service.count_sms_senders > 1 %}
{{ api_key(item.id, name=item.sms_sender, thing="ID") }} {{ api_key(item.id, name=item.sms_sender, thing="ID") }}
{% endif %} {% endif %}

View File

@@ -28,7 +28,7 @@ def test_view_team_members(
) == 'Test User {}'.format(i + 1) ) == 'Test User {}'.format(i + 1)
assert normalize_spaces( assert normalize_spaces(
page.select('.tick-cross-list-edit-link')[0].text page.select('.user-list-edit-link')[0].text
) == 'Cancel invitation' ) == 'Cancel invitation'