From 927f810dde06d382272bf7f77e4a33c63aec1472 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Mon, 18 Dec 2023 15:38:36 -0500 Subject: [PATCH 1/3] 1031 - Creating cards of the Team Member area so they're easier to scroll through if there are a lot of Team Members --- .../uswds/_uswds-theme-custom-styles.scss | 105 ++++++++++------- app/templates/views/manage-users.html | 106 +++++++++--------- tests/app/main/views/test_manage_users.py | 19 ++-- tests/app/main/views/test_templates.py | 4 +- 4 files changed, 122 insertions(+), 112 deletions(-) diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 9b88d44a7..a1e15b995 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -45,12 +45,12 @@ i.e. font-size: size("body", 4); } &> .usa-nav__primary-item:last-child { - margin-left: auto; + margin-left: auto; @include u-margin-right(-4); } } -.usa-nav__primary +.usa-nav__primary h1 { @@ -120,6 +120,25 @@ td.table-empty-message { border: 0; } +.user-list { + display: inline-flex; + flex-wrap: wrap; + gap: units(2); + .user-list-item { + flex: 1 1 calc(50% - units(2)); + border: 1px solid color('gray-cool-10'); + padding: units(2); + .tick-cross-list-permissions { + padding-left: units(2); + } + .hint { + display: block; + font-size: size("body", "sm"); + font-weight: normal; + } + } +} + .template-list-item-without-ancestors .template-list-folder:active, .template-list-item-without-ancestors .template-list-folder:active::before, .template-list-item-without-ancestors .template-list-folder:focus, @@ -136,7 +155,7 @@ td.table-empty-message { .template-list-folder { background: url(../img/material-icons/folder.svg) no-repeat; padding-left: units(4); - display: inline-block; + display: inline-block; background-position: 0; } @@ -166,7 +185,7 @@ td.table-empty-message { .template-list-template { background: url(../img/material-icons/description.svg) no-repeat; padding-left: units(4); - display: inline-flex; + display: inline-flex; } .js-enabled .live-search { @@ -214,7 +233,7 @@ td.table-empty-message { } .usa-hero { - background-image: none; + background-image: none; } .usa-prose { @@ -232,7 +251,7 @@ td.table-empty-message { } .navigation-service.usa-breadcrumb { - -bottom: 0; + -bottom: 0; } // Dashboard @@ -246,13 +265,13 @@ td.table-empty-message { text-decoration: none; &:hover{ background: color("blue-warm-70v"); - } + } } span { - color: white; + color: white; } .big-number-smaller { - display: flex; + display: flex; flex-direction: column; .big-number-number { font-size: units(5); @@ -264,15 +283,15 @@ td.table-empty-message { } .big-number-status { background: color("green-cool-40v"); - display: flex; + display: flex; padding: units(1) units(2); &--failing { - padding: 0; + padding: 0; a.usa-link { color: white; background: color("red-warm-50v"); padding: units(1) units(2); - margin: 0; + margin: 0; width: 100%; &:hover { background: color("red-warm-60v"); @@ -282,12 +301,12 @@ td.table-empty-message { } } .usa-table { - width: 100%; + width: 100%; caption { - margin-bottom: 0; + margin-bottom: 0; } .table-field-center-aligned { - text-align: center; + text-align: center; } .template-statistics-table-template-name { padding-left: units(4); @@ -300,32 +319,32 @@ td.table-empty-message { .dashboard-table { table { - width: 100%; + width: 100%; } .file-list-filename { font-weight: bold; } .file-list-hint { - margin: 0; + margin: 0; } .table-field, .table-field-right-aligned { - width: 50%; + width: 50%; } &.usage-table { .table-field, .table-field-left-aligned, .table-field-right-aligned { - width: auto; + width: auto; } } } .usage-table { ul { - list-style: none; - padding: 0; - margin: 0; + list-style: none; + padding: 0; + margin: 0; } .big-number-smallest { - display: flex; + display: flex; flex-direction: column; } } @@ -336,27 +355,27 @@ td.table-empty-message { padding: units(1) 0 units(1) units(1); margin: units(2) 0 units(5); ul { - padding: 0; - margin: 0; - list-style: none; - } + padding: 0; + margin: 0; + list-style: none; + } } // Tabs .tabs { .pill { - display: flex; + display: flex; list-style: none; - padding: 0; + padding: 0; .pill-item__container { border: 1px solid color("gray-cool-10"); - flex: 1; - display: flex; - flex-direction: column; - text-align: center; + flex: 1; + display: flex; + flex-direction: column; + text-align: center; font-size: units(2); - a { + a { padding: units(4); .big-number-smaller { font-size: units(5); @@ -367,7 +386,7 @@ td.table-empty-message { } &:not(.pill-item--selected):hover { background: color("blue-warm-70v"); - } + } &.pill-item--selected:hover { color: color("blue-60v"); } @@ -379,12 +398,12 @@ td.table-empty-message { // Etc .email-brand, .browse-list { - padding: 0; - margin: 0; - list-style: none; + padding: 0; + margin: 0; + list-style: none; margin-bottom: units(2); li { - padding: 8px 0; + padding: 8px 0; } } @@ -392,7 +411,7 @@ details form { box-sizing:border-box; } -// Textbox highlight +// Textbox highlight .textbox-highlight { @@ -440,7 +459,7 @@ details form { .placeholder, .placeholder-conditional { background-color: #fff; - position: relative; + position: relative; &:after { content: ""; background-color: color("yellow-20v"); @@ -449,9 +468,9 @@ details form { position: absolute; top: 0; left: 5px; - right: 6px; + right: 6px; height: 100%; - border-radius: 7px; + border-radius: 7px; } } diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html index f8585870e..432f2a9b8 100644 --- a/app/templates/views/manage-users.html +++ b/app/templates/views/manage-users.html @@ -32,64 +32,58 @@
{% for user in users %}
-
-
-

- {%- if user.name -%} - {{ user.name }}  - {%- endif -%} - - {%- if user.status == 'pending' -%} - {{ user.email_address }} (invited) - {%- elif user.status == 'cancelled' -%} - {{ user.email_address }} (cancelled invite) - {%- elif user.id == current_user.id -%} - (you) - {% else %} - {{ user.email_address }} - {% endif %} - -

-

Permissions

-
    - {% for permission, label in permissions %} - {{ tick_cross( - user.has_permission_for_service(current_service.id, permission), - label - ) }} - {% endfor %} -
- {# only show if the service has folders #} - {% if current_service.all_template_folders %} -

- {% set folder_count = user.template_folders_for_service(current_service) | length %} +

+ {%- if user.name -%} + {{ user.name }} + {%- endif -%} + {%- if user.status == 'pending' -%} + {{ user.email_address }}(invited) + {%- elif user.status == 'cancelled' -%} + {{ user.email_address }}(cancelled invite) + {%- elif user.id == current_user.id -%} + (you) + {% else %} + {{ user.email_address }} + {% endif %} +

+

Permissions

+
    + {% for permission, label in permissions %} + {{ tick_cross( + user.has_permission_for_service(current_service.id, permission), + label + ) }} + {% endfor %} +
+ {# only show if the service has folders #} + {% if current_service.all_template_folders %} +

+ {% set folder_count = user.template_folders_for_service(current_service) | length %} - {% if folder_count == 0 %} - Cannot see any folders - {% elif folder_count != current_service.all_template_folders | length %} - Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %} - {% else %} - Can see all folders - {% endif%} -

+ {% if folder_count == 0 %} + Cannot see any folders + {% elif folder_count != current_service.all_template_folders | length %} + Can see {{ folder_count }} folder{% if folder_count > 1 %}s{% endif %} + {% else %} + Can see all folders + {% endif%} +

+ {% endif %} + {% if current_service.has_permission('email_auth') %} +

+ Signs in with + {{ user.auth_type | format_auth_type(with_indefinite_article=True) }} +

+ {% endif %} +
+ {% if current_user.has_permissions('manage_service') %} + {% if user.status == 'pending' %} + Cancel invitation for {{ user.email_address }} + {% elif user.is_editable_by(current_user) %} + Change details for {{ user.name }} {{ user.email_address }} {% endif %} - {% if current_service.has_permission('email_auth') %} -

- Signs in with - {{ user.auth_type | format_auth_type(with_indefinite_article=True) }} -

- {% endif %} -
-
- {% if current_user.has_permissions('manage_service') %} - {% if user.status == 'pending' %} - Cancel invitation for {{ user.email_address }} - {% elif user.is_editable_by(current_user) %} - Change details for {{ user.name }} {{ user.email_address }} - {% endif %} - {% endif %} -
-
+ {% endif %} +
{% endfor %}
diff --git a/tests/app/main/views/test_manage_users.py b/tests/app/main/views/test_manage_users.py index c5d97bd03..01e873700 100644 --- a/tests/app/main/views/test_manage_users.py +++ b/tests/app/main/views/test_manage_users.py @@ -27,7 +27,7 @@ from tests.conftest import ( ( create_active_user_with_permissions(), ( - "Test User (you) " + "Test User(you) " "Permissions " "Can See dashboard " "Can Send messages " @@ -39,18 +39,18 @@ from tests.conftest import ( ), ( create_active_user_empty_permissions(), - ("Test User With Empty Permissions (you) " "Permissions"), + ("Test User With Empty Permissions(you) " "Permissions"), False, ), ( create_active_user_view_permissions(), - ("Test User With Permissions (you) " "Permissions " "Can See dashboard"), + ("Test User With Permissions(you) " "Permissions " "Can See dashboard"), False, ), ( create_active_user_manage_template_permissions(), ( - "Test User With Permissions (you) " + "Test User With Permissions(you) " "Permissions " "Can See dashboard " "Can Add and edit templates" @@ -232,7 +232,7 @@ def test_should_show_caseworker_on_overview_page( assert normalize_spaces(page.select_one("h1").text) == "Team members" assert normalize_spaces(page.select(".user-list-item")[0].text) == ( - "Test User With Permissions (you) " "Permissions " "Can See dashboard" + "Test User With Permissions(you) " "Permissions " "Can See dashboard" ) # [1:5] are invited users assert normalize_spaces(page.select(".user-list-item")[6].text) == ( @@ -1210,7 +1210,7 @@ def test_cancel_invited_user_doesnt_work_if_user_not_invited_to_this_service( ( "pending", ( - "invited_user@test.gsa.gov (invited) " + "invited_user@test.gsa.gov(invited) " "Permissions " "Can See dashboard " "Can Send messages " @@ -1222,7 +1222,7 @@ def test_cancel_invited_user_doesnt_work_if_user_not_invited_to_this_service( ( "cancelled", ( - "invited_user@test.gsa.gov (cancelled invite) " + "invited_user@test.gsa.gov(cancelled invite) " "Permissions" # all permissions are greyed out ), @@ -1383,10 +1383,7 @@ def test_manage_user_page_shows_how_many_folders_user_can_view( user_div = page.select_one( "h2[title='notify@digital.cabinet-office.gov.uk']" ).parent - assert ( - user_div.select_one(".tick-cross-list-hint:last-child").text.strip() - == expected_message - ) + assert user_div.select_one(".tick-cross-list-hint").text.strip() == expected_message def test_manage_user_page_doesnt_show_folder_hint_if_service_has_no_folders( diff --git a/tests/app/main/views/test_templates.py b/tests/app/main/views/test_templates.py index b74b5b6d7..244b7cb40 100644 --- a/tests/app/main/views/test_templates.py +++ b/tests/app/main/views/test_templates.py @@ -631,8 +631,8 @@ def test_should_show_sms_template_with_downgraded_unicode_characters( mock_get_template_folders, fake_uuid, ): - msg = "here:\tare some “fancy quotes” and zero\u200Bwidth\u200Bspaces" - rendered_msg = "here: are some “fancy quotes” and zerowidthspaces" + msg = "hey" + rendered_msg = "hey" mocker.patch( "app.service_api_client.get_service_template", From 0eb00bb613ec827fa406efe588c83773a9376ca7 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Tue, 19 Dec 2023 11:32:19 -0500 Subject: [PATCH 2/3] Adjusted responsive styles --- .../sass/uswds/_uswds-theme-custom-styles.scss | 16 +++++++++++++++- app/templates/views/manage-users.html | 10 +++++----- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index a1e15b995..f7c226761 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -114,6 +114,17 @@ td.table-empty-message { text-decoration: none !important; } +.button-flex-header { + flex-direction: column; + align-items: flex-start; + @include at-media(desktop) { + flex-direction: row; + display: flex; + align-items: center; + justify-content: space-between; + } +} + .user-list-edit-link:active:before, .user-list-edit-link:focus:before { box-shadow: none; @@ -125,7 +136,10 @@ td.table-empty-message { flex-wrap: wrap; gap: units(2); .user-list-item { - flex: 1 1 calc(50% - units(2)); + @include at-media(desktop) { + flex: 1 1 calc(50% - units(2)); + } + flex: 1 1 calc(100% - units(2)); border: 1px solid color('gray-cool-10'); padding: units(2); .tick-cross-list-permissions { diff --git a/app/templates/views/manage-users.html b/app/templates/views/manage-users.html index 432f2a9b8..1e5641f2a 100644 --- a/app/templates/views/manage-users.html +++ b/app/templates/views/manage-users.html @@ -9,10 +9,10 @@ {% block maincolumn_content %} -
-

- Team members -

+
+

+ Team members +

{% if current_user.has_permissions('manage_service') %} {{ usaButton({ "element": "a", @@ -41,7 +41,7 @@ {%- elif user.status == 'cancelled' -%} {{ user.email_address }}(cancelled invite) {%- elif user.id == current_user.id -%} - (you) + (you) {% else %} {{ user.email_address }} {% endif %} From 2cf232f7570668d728adcd60853b775368fb81b6 Mon Sep 17 00:00:00 2001 From: Jonathan Bobel Date: Tue, 19 Dec 2023 11:35:44 -0500 Subject: [PATCH 3/3] Small style update --- app/assets/sass/uswds/_uswds-theme-custom-styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index f7c226761..908c69d44 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -143,6 +143,7 @@ td.table-empty-message { border: 1px solid color('gray-cool-10'); padding: units(2); .tick-cross-list-permissions { + margin: units(1) 0; padding-left: units(2); } .hint {