darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 21:49:37 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2578 from GSA/2568-css-cleanup

Browse Source 
2568 - Clean up CSS
This commit is contained in:
Beverly Nguyen
2025-05-19 10:06:32 -07:00
committed by GitHub
parent 2a4d8abc26 3788fe7a91
commit a7787cb919
9 changed files with 123 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/radioSelect.js
View File

@@ -38,7 +38,7 @@
<label class="usa-radio__label" for="{{id}}">{{label}}</label>
</div>
{{/choices}}
<input type='button' class='usa-button usa-button--outline radio-select__button--done' aria-expanded='true' value='Done' />
<input type='button' class='usa-button usa-button--outline radio-select__button--done margin-top-4' aria-expanded='true' value='Back to select a new time' />
</div>
`),
'chosen': Hogan.compile(`

4
app/assets/sass/uswds/_main.scss
View File

@@ -351,6 +351,10 @@ h2.recipient-list {
margin-top: units(1);
}
.usa-search .search-form__button {
height: 40px;
}
// Button ellipses loading
.dot-anim {
display: inline-block;

12
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -179,10 +179,19 @@ td.table-empty-message {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 1rem;
padding: 1rem 0;
}
.user-list-item {
border: 2px solid color('gray-5');
padding: units(2);
button, .usa-accordion__content {
background-color: white;
border: 2px solid color('gray-5');
}
button:hover, button[aria-expanded="true"] {
background-color: color('gray-5');
}
@include at-media(desktop) {
width: calc(50% - units(1));
margin-bottom: 1rem;
@@ -199,7 +208,6 @@ td.table-empty-message {
}
.hint {
display: block;
font-size: size('body', 'sm');
font-weight: normal;
}

2
app/templates/base.html
View File

@@ -65,7 +65,7 @@
{% endblock %}
{% block main %}
<div class="grid-container">
<div class="grid-container minh-mobile">
{% block beforeContent %}
{% block backLink %}{% endblock %}
{% endblock %}

29
app/templates/views/find-services/find-services-by-name.html
View File

@@ -14,19 +14,22 @@
</h1>
{% call form_wrapper(
action=url_for('.find_services_by_name'),
class='usa-search margin-bottom-4'
) %}
{{ form.search(param_extensions={
"label": {"text": "Find services by name, partial name, or service ID"}
}) }}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
{{ usaButton({
"text": "Search",
"classes": "usa-button search-form__button"
}) }}
{% endcall %}
{% call form_wrapper(
action=url_for('.find_services_by_name'),
class='usa-search margin-bottom-4'
) %}
<div class="display-flex flex-justify-start flex-align-end gap-1 width-full">
{{ form.search(param_extensions={
"label": {"text": "Find services by name, partial name, or service ID"},
"classes": "width-full"
}) }}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
{{ usaButton({
"text": "Search",
"classes": "usa-button search-form__button"
}) }}
</div>
{% endcall %}
{% call form_wrapper(id='search-form' ) %}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

11
app/templates/views/find-users/find-users-by-email.html
View File

@@ -15,17 +15,20 @@
{% call form_wrapper(
action=url_for('.find_users_by_email'),
class='usa-search margin-bottom-4'
action=url_for('.find_users_by_email'),
class='usa-search margin-bottom-4'
) %}
<div class="display-flex flex-align-end gap-1 width-full">
{{ form.search(param_extensions={
"label": {"text": "Find users by email, or by partial email"}
"label": {"text": "Find users by email, or by partial email"},
"classes": "width-full"
}) }}
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
{{ usaButton({
"text": "Search",
"classes": "search-form__button"
"classes": "usa-button search-form__button"
}) }}
</div>
{% endcall %}
{% call form_wrapper(id='search-form' ) %}

130
app/templates/views/manage-users.html
View File

@@ -35,73 +35,95 @@
</div>
{% endif %}
<div class="user-list">
{% for user in users %}
<div class="user-list">
{% if user.status != 'cancelled' %}
<div class="user-list-item">
<h2 class="user-list-item-heading font-body-lg margin-top-0" title="{{ user.email_address }}">
<div class="user-list-item width-full">
<h2 class="user-list-item-heading font-body-lg margin-y-0" title="{{ user.email_address }}">
{%- if user.name -%}
<span class="heading-small live-search-relevant">{{ user.name }}</span>
<span class="heading-small live-search-relevant">{{ user.name }}</span>
{%- endif -%}
{%- if user.status == 'pending' -%}
<span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(invited)</span>
{%- elif user.status == 'cancelled' -%}
<span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(cancelled invite)</span>
</h2>
<p class="margin-top-0">
{%- if user.status == 'pending' -%}
<span class="live-search-relevant">{{ user.email_address }}</span>
<span class="hint">(invited)</span>
{%- elif user.status == 'expired' -%}
<span class="live-search-relevant">{{ user.email_address }}</span><span class="hint">(expired invite)</span>
<span class="live-search-relevant">{{ user.email_address }}</span>
<span class="hint">(expired invite)</span>
{%- elif user.id == current_user.id -%}
<span class="live-search-relevant"></span><span class="hint">(you)</span>
{% else %}
<span class="live-search-relevant">{{ user.email_address }}</span>
<span class="hint">(you)</span>
{%- else -%}
<span class="live-search-relevant">{{ user.email_address }}</span>
{% endif %}
</h2>
<h3 class="margin-bottom-0">Permissions</h3>
<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 %}
<p class="usa-body tick-cross-list-hint">
{% 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%}
</p>
{% endif %}
{% if current_service.has_permission('email_auth') %}
<p class="usa-body tick-cross-list-hint">
Signs in with
{{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
</p>
{% endif %}
{% if current_service.has_permission('email_auth') %}
<p class="usa-body tick-cross-list-hint">
Signs in with
{{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
</p>
{% endif %}
{% if current_user.has_permissions('manage_service') %}
{% if user.status == 'pending' or user.status == 'expired' %}
<a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
</p>
<div class="usa-accordion usa-accordion--bordered margin-bottom-2">
<h3 class="margin-bottom-0 usa-accordion__heading">
<button
type="button"
class="usa-accordion__button"
aria-expanded="false"
aria-controls="permissions_{{user.id}}"
>
Permissions
</button>
</h3>
<div id="permissions_{{user.id}}" class="usa-accordion__content usa-prose" hidden>
<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>
{% if current_service.all_template_folders %}
<p class="usa-body tick-cross-list-hint">
{% 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 %}
</p>
{% endif %}
{% if user.status == 'expired' %}
<a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id)}}">Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span></a>
{% elif user.is_editable_by(current_user) %}
<a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span></a>
{% if current_service.has_permission('email_auth') %}
<p class="usa-body tick-cross-list-hint">
Signs in with
{{ user.auth_type | format_auth_type(with_indefinite_article=True) }}
</p>
{% endif %}
</div>
</div>
{% if current_user.has_permissions('manage_service') %}
{% if user.status == 'pending' or user.status == 'expired' %}
<a class="user-list-edit-link usa-link" href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id) }}">
Cancel invitation<span class="usa-sr-only"> for {{ user.email_address }}</span>
</a>
{% endif %}
{% if user.status == 'expired' %}
<a class="user-list-edit-link usa-link" href="{{ url_for('.resend_invite', service_id=current_service.id, invited_user_id=user.id) }}">
Resend invite<span class="usa-sr-only"> for {{ user.email_address }}</span>
</a>
{% elif user.is_editable_by(current_user) %}
<a class="user-list-edit-link usa-link" href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id) }}">
Change details<span class="usa-sr-only"> for {{ user.name }} {{ user.email_address }}</span>
</a>
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% endblock %}

13
tests/app/main/views/test_manage_users.py
View File

@@ -27,7 +27,8 @@ from tests.conftest import (
(
create_active_user_with_permissions(),
(
"Test User(you) "
"Test User test@user.gsa.gov (you) "
"Permissions "
"Can See dashboard "
"Can Send messages "
@@ -38,18 +39,18 @@ from tests.conftest import (
),
(
create_active_user_empty_permissions(),
("Test User With Empty Permissions(you) " "Permissions"),
("Test User With Empty Permissions test@user.gsa.gov (you) " "Permissions"),
False,
),
(
create_active_user_view_permissions(),
("Test User With Permissions(you) " "Permissions " "Can See dashboard"),
("Test User With Permissions test@user.gsa.gov (you) " "Permissions " "Can See dashboard"),
False,
),
(
create_active_user_manage_template_permissions(),
(
"Test User With Permissions(you) "
"Test User With Permissions test@user.gsa.gov (you) "
"Permissions "
"Can See dashboard "
"Can Add and edit templates"
@@ -231,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 test@user.gsa.gov (you) " "Permissions " "Can See dashboard"
)
# [1:5] are invited users
assert normalize_spaces(page.select(".user-list-item")[6].text) == (
@@ -1233,7 +1234,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 "

2
tests/javascripts/radioSelect.test.js
View File

@@ -244,7 +244,7 @@ describe('RadioSelect', () => {
const button = document.querySelector('.radio-select__column:nth-child(2) input[type=button]');
expect(button).not.toBeNull();
expect(button.getAttribute('value')).toEqual('Done');
expect(button.getAttribute('value')).toEqual('Back to select a new time');
expect(button.getAttribute('aria-expanded')).toEqual('true');
});