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

View file

@ -7,7 +7,9 @@
<h1>User management</h1> <h1>User management</h1>
{% if domain.permissions %} {% if domain.permissions %}
<section class="dashboard">
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<h2 class> Active users </h2>
<caption class="sr-only">Domain users</caption> <caption class="sr-only">Domain users</caption>
<thead> <thead>
<tr> <tr>
@ -37,8 +39,10 @@
<use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use> <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
</svg><span class="margin-left-05">Add another user</span> </svg><span class="margin-left-05">Add another user</span>
</a> </a>
</section>
{% if domain.invitations.exists %} {% if domain.invitations.exists %}
<section class="dashboard">
<h2>Invitations</h2> <h2>Invitations</h2>
<table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table"> <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
<caption class="sr-only">Domain invitations</caption> <caption class="sr-only">Domain invitations</caption>
@ -66,6 +70,7 @@
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</section>
{% endif %} {% endif %}
{% endblock %} {# domain_content #} {% endblock %} {# domain_content #}