diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 240c3c35..9d4f131d 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -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 { diff --git a/styles/elements/_tables.scss b/styles/elements/_tables.scss index 766d67de..89469512 100644 --- a/styles/elements/_tables.scss +++ b/styles/elements/_tables.scss @@ -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; } diff --git a/templates/fragments/members.html b/templates/fragments/members.html index 31848326..05a83fc1 100644 --- a/templates/fragments/members.html +++ b/templates/fragments/members.html @@ -15,10 +15,16 @@ ) %} - {% include "fragments/flash.html" %} + {% if g.matchesPath("application-members") %} + {% include "fragments/flash.html" %} + {% endif %} +
+ {{ 'portfolios.applications.settings.team_members' | translate }} +
+
{% if not application.members %} -
+

{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}

{{ Icon('avatar') }} @@ -45,21 +51,9 @@
{% else %} -
- {{ 'portfolios.applications.settings.team_members' | translate }} - - {% set new_member_modal_name = "add-app-mem" %} - {% if user_can_create_app_member %} - - {{ Icon("plus") }} - {{ "portfolios.applications.add_member" | translate }} - - {% endif %} -
- -
-
- {% 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) %} {% if user_can_create_app_member %} @@ -139,5 +142,6 @@ {% endif %}
{% endif %} +
{% endmacro %}