diff --git a/atst/routes/portfolios/index.py b/atst/routes/portfolios/index.py index 8929cc06..6be58772 100644 --- a/atst/routes/portfolios/index.py +++ b/atst/routes/portfolios/index.py @@ -23,7 +23,7 @@ def portfolios(): @portfolios_bp.route("/portfolios//admin") -def portfolio(portfolio_id): +def portfolio_admin(portfolio_id): portfolio = Portfolios.get_for_update_information(g.current_user, portfolio_id) form = PortfolioForm(data={"name": portfolio.name}) pagination_opts = Paginator.get_pagination_opts(http_request) diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index b46526b5..e8e8825d 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -1,5 +1,5 @@ #app-root { - background-color: $color-white; + background-color: $color-offwhite; display: flex; flex-direction: column; justify-content: flex-start; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 7d57ed03..9328c239 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -3,6 +3,8 @@ @include grid-row; } + margin-left: 2 * $gap; + .line { box-sizing: border-box; height: 2px; @@ -47,6 +49,9 @@ .icon-link { color: $color-gray-medium; pointer-events: none; + &.icon-link--disabled { + opacity: 1; + } } } } @@ -57,7 +62,7 @@ flex-direction: row; } - margin: 2 * $gap 0; + margin: 2 * $gap; .portfolio-header__name { @include h1; @@ -67,6 +72,10 @@ font-size: $small-font-size; align-items: center; + .icon-tooltip { + margin-left: -$gap / 2; + } + button { margin: 0; padding: 0; @@ -95,7 +104,7 @@ } .icon { - @include icon-size(20); + @include icon-size(30); } } } @@ -109,7 +118,11 @@ margin-left: -.4rem; } - .cents { + .portfolio-header__budget--amount { + white-space: nowrap; + } + + .portfolio-header__budget--cents { font-size: 2rem; margin-top: .75rem; margin-left: -.7rem; @@ -122,13 +135,6 @@ font-weight: bold; } - .funded { - color: $color-blue; - .icon { - @include icon-color($color-blue); - } - } - .unfunded { color: $color-red; .icon { @@ -144,6 +150,7 @@ opacity: 0.54; font-size: $small-font-size; font-weight: bold; + margin-bottom: 3 * $gap; } .portfolio-content { @@ -173,6 +180,10 @@ td { border-bottom: 1px solid $color-gray-lightest; } + + .add-member-link { + text-align: right; + } } } @@ -215,7 +226,6 @@ .portfolio-applications { .portfolio-applications__header { - margin-bottom: 4 * $gap; .portfolio-applications__header--title { @include subheading; @@ -242,6 +252,7 @@ .application-list-item { border-radius: 5px; box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5); + margin-bottom: 6 * $gap; .col { max-width: 95%; @@ -269,7 +280,7 @@ .subheading { @include subheading; margin-top: 6 * $gap; - margin-bottom: $gap; + margin-bottom: 2 * $gap; } .portfolio-funding__header { @@ -369,7 +380,6 @@ &.funded .to-expiration-alert { color: $color-blue; - .icon { @include icon-color($color-blue); } @@ -403,9 +413,8 @@ } .panel { - box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); - border-top: none; - border-bottom: none; + @include shadow-panel; + margin-bottom: 4 * $gap; } } @@ -418,9 +427,12 @@ margin-bottom: 0; .form-col { - .usa-input { + .usa-input--validation--portfolioName { input { - max-width: 45em; + max-width: 30em; + } + .icon-validation { + left: 30em; } } } diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 3917fa5e..19335b2a 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -58,6 +58,7 @@ $color-red-light: #e59393; $color-red-lightest: #f9dede; $color-white: #ffffff; +$color-offwhite: #fbfbfd; $color-black: #000000; $color-black-light: #212121; diff --git a/styles/elements/_accordians.scss b/styles/elements/_accordians.scss index 4db50c9f..61ef3c68 100644 --- a/styles/elements/_accordians.scss +++ b/styles/elements/_accordians.scss @@ -2,6 +2,7 @@ @include block-list; box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5); + margin-bottom: 6 * $gap; .icon-link { margin: -$gap 0; @@ -40,6 +41,7 @@ margin: 0; display: block; padding: 0 $gap; + text-decoration: none; } } @@ -70,6 +72,7 @@ .separator { border: 1px solid $color-gray-medium; opacity: 0.75; + margin: 0 .5 * $gap; } } diff --git a/styles/elements/_icon_link.scss b/styles/elements/_icon_link.scss index 1c13e558..23b694e9 100644 --- a/styles/elements/_icon_link.scss +++ b/styles/elements/_icon_link.scss @@ -47,6 +47,7 @@ .icon-link { @include icon-link; @include icon-link-color($color-primary); + text-decoration: underline; &.icon-link--vertical { @include icon-link-vertical; @@ -67,6 +68,7 @@ &.icon-link--disabled { opacity: 0.3; pointer-events: none; + text-decoration: none; } &.icon-link--left { diff --git a/styles/elements/_icons.scss b/styles/elements/_icons.scss index fa3f54f6..a3c60c74 100644 --- a/styles/elements/_icons.scss +++ b/styles/elements/_icons.scss @@ -78,4 +78,13 @@ &.icon--gold { @include icon-color($color-gold-dark); } + + &.icon--circle { + svg { + border-radius: 100%; + border-style: solid; + border-width: 1px; + padding: 2px; + } + } } diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index 57e4d1f1..79d44799 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -60,11 +60,17 @@ margin-bottom: $gap; } + .sidenav__text { + margin: 2 * $gap; + color: $color-gray; + font-style: italic; + } + .sidenav__link { display: block; padding: $gap ($gap * 2); color: $color-black; - text-decoration: none; + text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -131,7 +137,6 @@ } + ul { - // padding-bottom: $gap / 2; li { .sidenav__link { diff --git a/styles/sections/_reports.scss b/styles/sections/_reports.scss index 576a7bda..b881cbad 100644 --- a/styles/sections/_reports.scss +++ b/styles/sections/_reports.scss @@ -64,7 +64,6 @@ } .spend-summary__budget { - margin: 0 0 0 $gap; @include ie-only { margin: $gap 0 0 0; @@ -162,6 +161,7 @@ dl { text-align: right; + margin-top: -2 * $gap; dd, dt { display: inline; @@ -175,13 +175,11 @@ } dd.ending-soon { - color: $color-red-dark; font-size: $h2-font-size; white-space: nowrap; .icon { @include icon-size(28); - @include icon-color($color-red-dark); } } } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index adf7ad6d..47eadcfb 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -2,6 +2,11 @@ text-align: center; padding: 4rem 6rem; + .panel { + @include shadow-panel; + margin-bottom: 6 * $gap; + } + .task-order-get-started__list { ul { list-style: none; diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html index 98248ea9..7844f6c2 100644 --- a/templates/navigation/global_sidenav.html +++ b/templates/navigation/global_sidenav.html @@ -18,17 +18,21 @@
Portfolios
Fund a New Portfolio - {{ Icon("plus", classes="sidenav__link-icon") }} + {{ Icon("plus", classes="sidenav__link-icon icon--circle") }}
diff --git a/templates/portfolios/admin.html b/templates/portfolios/admin.html index f8e9dcc5..a39c3194 100644 --- a/templates/portfolios/admin.html +++ b/templates/portfolios/admin.html @@ -28,6 +28,6 @@ {% include "fragments/audit_events_log.html" %} - {{ Pagination(audit_events, 'portfolios.portfolio_activity', portfolio_id=portfolio_id) }} + {{ Pagination(audit_events, 'portfolios.portfolio_admin', portfolio_id=portfolio.id) }} {% endblock %} diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 803e5074..64e1f412 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -14,7 +14,7 @@ {% if can_create_applications %} {{ 'portfolios.applications.add_application_text' | translate }} - {{ Icon("plus", classes="sidenav__link-icon") }} + {{ Icon("plus", classes="sidenav__link-icon icon--circle") }} {% endif %} diff --git a/templates/portfolios/applications/members.html b/templates/portfolios/applications/members.html index 6b05e799..fbb02cf4 100644 --- a/templates/portfolios/applications/members.html +++ b/templates/portfolios/applications/members.html @@ -62,10 +62,10 @@ - + Add A New Member - {{ Icon('plus') }} + {{ Icon('plus', classes='icon--circle') }} diff --git a/templates/portfolios/blank_slate.html b/templates/portfolios/blank_slate.html index 3b45b92c..1c178f0a 100644 --- a/templates/portfolios/blank_slate.html +++ b/templates/portfolios/blank_slate.html @@ -9,7 +9,7 @@ {% block content %} {{ EmptyState( - action_href=url_for("task_orders.new", screen=1), + action_href=url_for("task_orders.get_started"), action_label=("portfolios.index.empty.start_button" | translate), icon="cloud", message=("portfolios.index.empty.title" | translate), diff --git a/templates/portfolios/breadcrumbs.html b/templates/portfolios/breadcrumbs.html index ef946c32..6029b31e 100644 --- a/templates/portfolios/breadcrumbs.html +++ b/templates/portfolios/breadcrumbs.html @@ -10,7 +10,7 @@
{% if secondary_breadcrumb %} {{ Icon("caret_right", classes="icon--tiny") }} - -
+
{{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justDollars }} - + .{{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justCents }}
@@ -70,8 +70,8 @@ {{ Link( icon='cog', text='navigation.portfolio_navigation.breadcrumbs.admin' | translate, - url=url_for("portfolios.portfolio", portfolio_id=portfolio.id), - active=request.url_rule.endpoint == "portfolios.portfolio", + url=url_for("portfolios.portfolio_admin", portfolio_id=portfolio.id), + active=request.url_rule.endpoint == "portfolios.portfolio_admin", ) }} {% endif %}
diff --git a/templates/portfolios/members/index.html b/templates/portfolios/members/index.html index 028045d5..976cffc0 100644 --- a/templates/portfolios/members/index.html +++ b/templates/portfolios/members/index.html @@ -95,10 +95,10 @@ - + Add A New Member - {{ Icon('plus') }} + {{ Icon('plus', classes='icon--circle') }} diff --git a/templates/portfolios/reports/index.html b/templates/portfolios/reports/index.html index e124dc93..c5456748 100644 --- a/templates/portfolios/reports/index.html +++ b/templates/portfolios/reports/index.html @@ -59,36 +59,42 @@
-
-
+
+

Expiration Date

-
- {% if expiration_date %} - - - {% else %} - - - {% endif %} -
- - {{ Icon('cog') }} - Manage Task Order -
-
-
-
Remaining Days
-
- {% if remaining_days is not none %} - {{ Icon('arrow-down') }} - {{ remaining_days }} +
+ +
+
+ {% if expiration_date %} + + {% else %} - - + - {% endif %} -
-
+
+ + {{ Icon('cog') }} + Manage Task Order + +
+
+
+
Remaining Days
+
+ {% if remaining_days is not none %} + {{ Icon('arrow-down') }} + {{ remaining_days }} + {% else %} + - + {% endif %} +
+
+
+