diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index fc9911fe..87c080c2 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -168,14 +168,51 @@ .member-list { .panel { @include shadow-panel; + padding-bottom: 0; + } + + .member-list-header { + margin: 2 * $gap 5 * $gap; + padding: inherit; + overflow: auto; + + .left { + float: left; + padding-bottom: 0.8rem; + } + + .icon-link { + float: right; + margin-top: 0.8rem; + } + + .icon { + + } + } + + .subheading { + font-size: 1.4rem; + color: $color-gray; } table { box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); + 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 { @@ -186,8 +223,29 @@ color: $color-gray; } - td { - border-bottom: 1px solid $color-gray-lightest; + 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; + } + + .green { + color: $color-green; + } + + .name { + font-weight: bold; + + .you { + font-size: 1.2rem; + } + } } .add-member-link { diff --git a/templates/fragments/admin/portfolio_members.html b/templates/fragments/admin/portfolio_members.html index 1ad4f385..38e8a3ff 100644 --- a/templates/fragments/admin/portfolio_members.html +++ b/templates/fragments/admin/portfolio_members.html @@ -1,8 +1,19 @@ +{% from "components/icon.html" import Icon %} +
-
{{ "portfolios.admin.portfolio_members_title" | translate }}
-
{{ "portfolios.admin.portfolio_members_subheading" | translate }}
- {{ "portfolios.admin.settings_info" | translate }} +
+
+
{{ "portfolios.admin.portfolio_members_title" | translate }}
+
+ {{ "portfolios.admin.portfolio_members_subheading" | translate }} +
+
+ + {{ Icon('info') }} + {{ "portfolios.admin.settings_info" | translate }} + +
{% if not portfolio.members %} @@ -14,47 +25,33 @@ - {{ "portfolios.members.permissions.name" | translate }} - {{ "portfolios.members.permissions.app_mgmt" | translate }} - {{ "portfolios.members.permissions.funding" | translate }} - {{ "portfolios.members.permissions.reporting" | translate }} - {{ "portfolios.members.permissions.portfolio_mgmt" | translate }} - + {{ "portfolios.members.permissions.name" | translate }} + {{ "portfolios.members.permissions.app_mgmt" | translate }} + {{ "portfolios.members.permissions.funding" | translate }} + {{ "portfolios.members.permissions.reporting" | translate }} + {{ "portfolios.members.permissions.portfolio_mgmt" | translate }} + {% for member in portfolio.members %} - {{ member.user_name }} + {{ member.user_name }} {% if member.user == user %} - (you) + (you) {% endif %} + {% set heading_perms = ['edit_application', 'view_portfolio_funding', 'view_portfolio_reports', 'edit_portfolio_name'] %} - {% if 'edit_application' in member.permissions %} - Edit Access - {% else %} - View Only - {% endif %} + {% for perm in heading_perms %} + {% if perm in member.permissions %} + Edit Access + {% else %} + View Only + {% endif %} + {% endfor %} - {% if 'view_portfolio_funding' in member.permissions %} - Edit Access - {% else %} - View Only - {% endif %} - - {% if 'view_portfolio_reports' in member.permissions %} - Edit Access - {% else %} - View Only - {% endif %} - - {% if 'edit_portfolio_name' in member.permissions %} - Edit Access - {% else %} - View Only - {% endif %} {% endfor %}