Revamp the app members table
- remove some of the custom styles in the page-specific style sheet. Instead, try to rely on default USWDS styles as much as possible. - tweak a few values in the tables stylesheet - move some markup around in the members template
This commit is contained in:
graham-dds
parent
0632c16968
commit
8eda056327
@ -138,85 +138,22 @@
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
.responsive-table-wrapper {
|
||||
padding-bottom: $gap * 3;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
thead {
|
||||
th:first-child {
|
||||
padding-left: 3 * $gap;
|
||||
}
|
||||
|
||||
tr:first-child {
|
||||
padding: 0 2 * $gap 0 5 * $gap;
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap 2 * $gap;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
color: $color-gray;
|
||||
}
|
||||
|
||||
td:first-child {
|
||||
padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap;
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
border-bottom: 1px solid $color-gray-lightest;
|
||||
font-size: 1.6rem;
|
||||
border-top: 0;
|
||||
padding: 3 * $gap 2 * $gap;
|
||||
|
||||
.usa-button-disabled {
|
||||
color: $color-gray-medium;
|
||||
background-color: $color-gray-lightest;
|
||||
box-shadow: inset 0 0 0 1px $color-gray-medium;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
width: 11rem;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: bold;
|
||||
|
||||
.you {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.usa-input.usa-input--success {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.add-member-link {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.usa-button-primary .usa-button {
|
||||
padding: 2 * $gap;
|
||||
float: right;
|
||||
}
|
||||
a.create-member {
|
||||
display: inherit;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 50%;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
input.usa-button.usa-button-primary {
|
||||
|
||||
@ -66,7 +66,7 @@ table.atat-table {
|
||||
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
border-bottom-style: dashed;
|
||||
border-bottom-style: solid;
|
||||
border-top: none;
|
||||
|
||||
&:last-child {
|
||||
@ -88,18 +88,14 @@ table.atat-table {
|
||||
th,
|
||||
td {
|
||||
@include block-list-header;
|
||||
|
||||
display: table-cell;
|
||||
white-space: nowrap;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@at-root .panel #{&} {
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -138,10 +134,6 @@ table.atat-table {
|
||||
}
|
||||
|
||||
@at-root .panel #{&} {
|
||||
tr:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -15,10 +15,16 @@
|
||||
) %}
|
||||
|
||||
|
||||
{% include "fragments/flash.html" %}
|
||||
{% if g.matchesPath("application-members") %}
|
||||
{% include "fragments/flash.html" %}
|
||||
{% endif %}
|
||||
|
||||
<div class="subheading">
|
||||
{{ 'portfolios.applications.settings.team_members' | translate }}
|
||||
</div>
|
||||
<div class="panel">
|
||||
{% if not application.members %}
|
||||
<div class='empty-state'>
|
||||
<div class='empty-state panel__content'>
|
||||
<p class='empty-state__message'>{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}</p>
|
||||
|
||||
{{ Icon('avatar') }}
|
||||
@ -45,21 +51,9 @@
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class='subheading'>
|
||||
{{ 'portfolios.applications.settings.team_members' | translate }}
|
||||
|
||||
{% set new_member_modal_name = "add-app-mem" %}
|
||||
{% if user_can_create_app_member %}
|
||||
<a class="icon-link modal-link icon-link__add" v-on:click="openModal('{{ new_member_modal_name }}')">
|
||||
{{ Icon("plus") }}
|
||||
{{ "portfolios.applications.add_member" | translate }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<section class="member-list application-list" id="application-members">
|
||||
<div class='responsive-table-wrapper panel'>
|
||||
{% for member in members %}
|
||||
{% set new_member_modal_name = "add-app-mem" %}
|
||||
|
||||
{% for member in members %}
|
||||
{% set modal_name = "edit_member-{}".format(loop.index) %}
|
||||
{% call Modal(modal_name) %}
|
||||
<div class="modal__form--header">
|
||||
@ -78,7 +72,11 @@
|
||||
</base-form>
|
||||
{% endcall %}
|
||||
{% endfor %}
|
||||
<table>
|
||||
|
||||
|
||||
<section class="member-list application-list" id="application-members">
|
||||
<div class='responsive-table-wrapper'>
|
||||
<table class="atat-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Member</th>
|
||||
@ -92,7 +90,7 @@
|
||||
{% set modal_name = "edit_member-{}".format(loop.index) %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ member.user_name }}
|
||||
<strong>{{ member.user_name }}</strong>
|
||||
<a class="icon-link" v-on:click="openModal('{{ modal_name }}')">
|
||||
{{ Icon('edit') }}
|
||||
</a>
|
||||
@ -123,6 +121,11 @@
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% if user_can_create_app_member %}
|
||||
<a class="usa-button usa-button-secondary create-member" v-on:click="openModal('{{ new_member_modal_name }}')">
|
||||
{{ "portfolios.applications.add_member" | translate }}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if user_can_create_app_member %}
|
||||
@ -139,5 +142,6 @@
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endmacro %}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user