diff --git a/styles/components/_accordion_table.scss b/styles/components/_accordion_table.scss index 1bcf3331..c5d93b09 100644 --- a/styles/components/_accordion_table.scss +++ b/styles/components/_accordion_table.scss @@ -91,6 +91,30 @@ border-bottom: 1px solid $color-gray-lighter; } } + + .accordion-table__item__action-group { + padding: 1rem 3.2rem; + background-color: $color-gray-lightest; + + button, + a { + margin: 0; + font-size: $small-font-size; + } + + .icon-link { + padding-top: 0.5rem; + float: none; + } + + > *:first-child { + padding-left: 0; + } + + > *:last-child { + float: right; + } + } } .accordion-table__item__toggler { @@ -100,6 +124,10 @@ color: $color-blue; padding: $gap; + > span { + margin-left: auto; + } + .icon { @include icon-size(12); @@ -147,6 +175,17 @@ .accordion-table__item__expanded_first { float: left; } + + .accordion-table__item__expanded-role { + .icon-link { + padding: 0; + vertical-align: text-top; + + .icon { + margin: 0 0 0 0.25rem; + } + } + } } } } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 60fd04c6..7303c016 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -1,7 +1,6 @@ .portfolio-panel-container { @include media($large-screen) { @include grid-row; - min-height: 500px; } @@ -38,7 +37,6 @@ &.icon-link--disabled { color: $color-gray-dark; opacity: 1; - .icon { @include icon-color($color-gray-dark); } @@ -53,7 +51,6 @@ .icon-link { color: $color-gray-medium; pointer-events: none; - &.icon-link--disabled { opacity: 1; } @@ -63,7 +60,6 @@ .portfolio-header { flex-direction: column; - @include media($small-screen) { flex-direction: row; } @@ -103,10 +99,8 @@ .icon-link { padding: 0.8rem 1.2rem; - &.active { color: $color-gray; - .icon { @include icon-color($color-gray); } @@ -150,7 +144,6 @@ .unfunded { color: $color-red; - .icon { @include icon-color($color-red); } @@ -166,7 +159,7 @@ } .portfolio-content { - margin: (6 * $gap) $gap 0 $gap; + margin: 6 * $gap $gap 0 $gap; .panel { @include shadow-panel; @@ -175,7 +168,6 @@ .member-list { .panel { @include shadow-panel; - padding-bottom: 0; } @@ -191,7 +183,7 @@ } tr:first-child { - padding: 0 (2 * $gap) 0 (5 * $gap); + padding: 0 2 * $gap 0 5 * $gap; } td { @@ -203,14 +195,14 @@ th { background-color: $color-gray-lightest; - padding: $gap (2 * $gap); + 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); + padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap; } tbody { @@ -218,7 +210,7 @@ border-bottom: 1px solid $color-gray-lightest; font-size: 1.6rem; border-top: 0; - padding: (3 * $gap) (2 * $gap); + padding: 3 * $gap 2 * $gap; .usa-button-disabled { color: $color-gray-medium; @@ -318,6 +310,11 @@ .alert { margin: 4rem; } + + .member-list__subhead { + font-weight: $font-normal; + font-size: $base-font-size; + } } .application-content { @@ -333,7 +330,6 @@ .block-list__footer { border-bottom: none; } - .application-edit__env-list-item { label { color: $color-black; @@ -373,7 +369,6 @@ .portfolio-applications__header--actions { color: $color-blue; font-size: $small-font-size; - .icon { @include icon-color($color-blue); @include icon-size(14); @@ -384,7 +379,6 @@ .application-list { .toggle-link { background-color: $color-blue-light; - .icon { margin: $gap / 2; } @@ -402,7 +396,6 @@ .application-list-item__environment__csp_link { font-size: $small-font-size; font-weight: normal; - &:hover { background-color: $color-aqua-light; } @@ -420,7 +413,6 @@ .subheading { @include subheading; - margin-top: 6 * $gap; margin-bottom: 2 * $gap; } @@ -431,6 +423,7 @@ .pending-task-order { background-color: $color-gold-lightest; + align-items: center; margin: 0; margin-bottom: 2 * $gap; @@ -462,7 +455,6 @@ .icon--tiny { @include icon-size(10); - margin-left: 1rem; } } @@ -487,7 +479,7 @@ th { background-color: $color-gray-lightest; - padding: $gap (2 * $gap); + padding: $gap 2 * $gap; border-top: none; border-bottom: none; color: $color-gray; @@ -566,7 +558,6 @@ .panel { @include shadow-panel; - margin-bottom: 4 * $gap; } } @@ -586,7 +577,6 @@ input { max-width: 30em; } - .icon-validation { left: 30em; } @@ -615,3 +605,7 @@ } } } + +.member-list__name { + margin-top: 1rem; +} diff --git a/templates/fragments/applications/edit_team.html b/templates/fragments/applications/edit_team.html index 1914a62a..8b17426f 100644 --- a/templates/fragments/applications/edit_team.html +++ b/templates/fragments/applications/edit_team.html @@ -11,7 +11,11 @@
  • -
    {{ member_form.user_name.data }}
    +
    +
    + {{ member_form.user_name.data }} +
    +
    {{ OptionsInput(permissions_form.perms_team_mgmt, label=False, watch=True) }}
    {{ OptionsInput(permissions_form.perms_env_mgmt, label=False, watch=True) }}
    {{ OptionsInput(permissions_form.perms_del_env, label=False, watch=True) }}
    @@ -26,30 +30,47 @@ {{ ToggleButton( - open_html=open_html, - close_html=close_html, - section_name="environments" - ) + open_html=open_html, + close_html=close_html, + section_name="environments" + ) }}
    - - {% call ToggleSection(section_name="environments") %} + {% call ToggleSection(section_name="environments") %} - {% endcall %} - {{ member_form.user_id() }} + + {% endcall %} + {{ member_form.user_id() }}
  • {% endfor %} diff --git a/templates/portfolios/applications/team.html b/templates/portfolios/applications/team.html index d33992cd..a1ef3d57 100644 --- a/templates/portfolios/applications/team.html +++ b/templates/portfolios/applications/team.html @@ -52,62 +52,60 @@ {% if g.matchesPath("application-members") %} {% include "fragments/flash.html" %} {% endif %} -
    -
    -
    -
    - {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }} +
    +
    +
    +
    + {{ "portfolios.applications.team_settings.section.title" | translate({ "application_name": application.name }) }} +

    Members ({{ team_form.members | length }})

    +
    - - {{ Icon('info') }} - {{ "portfolios.admin.settings_info" | translate }} -
    -
    -
    -
    - {{ "common.name" | translate }} +
    +
    +
    + {{ "common.name" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.team_management" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} +
    +
    + {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} +
    +
    +   +
    -
    - {{ "portfolios.applications.team_settings.section.table.team_management" | translate }} -
    -
    - {{ "portfolios.applications.team_settings.section.table.environment_management" | translate }} -
    -
    - {{ "portfolios.applications.team_settings.section.table.delete_access" | translate }} -
    -
    -   +
      + {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} + {% include "fragments/applications/edit_team.html" %} + {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %} + {% include "fragments/applications/read_only_team.html" %} + {% endif %} +
    +
    + + -
      - {% if user_can(permissions.EDIT_APPLICATION_MEMBER) %} - {% include "fragments/applications/edit_team.html" %} - {% elif user_can(permissions.VIEW_APPLICATION_MEMBER) %} - {% include "fragments/applications/read_only_team.html" %} - {% endif %} -
    - - -
    diff --git a/translations.yaml b/translations.yaml index 920c7ffc..9342cb56 100644 --- a/translations.yaml +++ b/translations.yaml @@ -468,6 +468,7 @@ portfolios: subheading: Team Settings title: '{application_name} Team Settings' user: User + add_to_environment: Add to existing environment team_text: Team update_button_text: Save members: