diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index fe1e941e..40efda84 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -20,6 +20,41 @@ } } +.portfolio-header { + margin: 2 * $gap 0; + + .portfolio-header__name { + @include h1; + } + + .portfolio-header__budget { + font-size: $small-font-size; + align-items: center; + + button { + margin: 0; + padding: 0; + } + + .portfolio-header__budget--dollars { + font-size: $h2-font-size; + font-weight: bold; + } + } + + .links { + font-size: $small-font-size; + + .link--icon { + text-align: center; + } + + .icon { + @include icon-size(20); + } + } +} + .portfolio-navigation { @include panel-margin; margin-bottom: $gap * 4; diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html index cc8894de..f5d8d2bf 100644 --- a/templates/portfolios/header.html +++ b/templates/portfolios/header.html @@ -1 +1,44 @@ -{{ portfolio.name }} +{% from "components/icon.html" import Icon %} + +{% macro Link(icon, text, url, active=False) %} + +
+ + +
+
+{% endmacro %} + +
+
+
+ {{ portfolio.name }} +
+
+ Available budget + + + {{ portfolio.task_orders | sum(attribute='budget') | dollars }} + +
+
+ +