Style usr mgmt sections with outline, adjust spacing

This commit is contained in:
igorkorenfeld 2023-04-05 11:43:21 -04:00
parent 276587c45d
commit 1c426c4a9b
No known key found for this signature in database
GPG key ID: 826947A4B867F659
2 changed files with 34 additions and 25 deletions

View file

@ -229,6 +229,8 @@ section.dashboard {
margin-top: units(3);
h2 {
color: color('primary-dark');
margin-top: units(2);
margin-bottom: units(2);
}
@ -240,7 +242,7 @@ section.dashboard {
margin-top: units(5);
h2 {
margin-bottom: units(3);
margin-bottom: 0;
}
}
}
@ -268,6 +270,10 @@ section.dashboard {
th[data-sortable]:not([aria-sort]) .usa-table__header__button {
right: auto;
}
tbody th {
word-break: break-word;
}
}
.dotgov-table--stacked {
@ -300,6 +306,8 @@ section.dashboard {
@include at-media(mobile-lg) {
.dotgov-table {
margin-top: units(1);
tr {
border: none;
}
@ -319,10 +327,6 @@ section.dashboard {
}
}
tbody th {
word-break: break-word;
}
td, th,
.usa-tabel th{
padding: units(2) units(2) units(2) 0;

View file

@ -7,29 +7,31 @@
<h1>User management</h1>
{% if domain.permissions %}
<section class="dashboard">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<caption class="sr-only">Domain users</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">Email</th>
<th data-sortable scope="col" role="columnheader">Role</th>
</tr>
</thead>
<tbody>
{% for permission in domain.permissions.all %}
<tr>
<th scope="row" role="rowheader" data-sort-value="{{ user.email }}" data-label="Email">
{{ permission.user.email }}
</th>
<td data-label="Role">{{ permission.role|title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div
<h2 class> Active users </h2>
<caption class="sr-only">Domain users</caption>
<thead>
<tr>
<th data-sortable scope="col" role="columnheader">Email</th>
<th data-sortable scope="col" role="columnheader">Role</th>
</tr>
</thead>
<tbody>
{% for permission in domain.permissions.all %}
<tr>
<th scope="row" role="rowheader" data-sort-value="{{ user.email }}" data-label="Email">
{{ permission.user.email }}
</th>
<td data-label="Role">{{ permission.role|title }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<div
class="usa-sr-only usa-table__announcement-region"
aria-live="polite"
></div>
></div>
{% endif %}
<a class="usa-button usa-button--unstyled" href="{% url 'domain-users-add' pk=domain.id %}">
@ -37,8 +39,10 @@
<use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
</svg><span class="margin-left-05">Add another user</span>
</a>
</section>
{% if domain.invitations.exists %}
<section class="dashboard">
<h2>Invitations</h2>
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<caption class="sr-only">Domain invitations</caption>
@ -66,6 +70,7 @@
{% endfor %}
</tbody>
</table>
</section>
{% endif %}
{% endblock %} {# domain_content #}