From 0b9d00e100edf60810db81ebb301bd0840a8f86d Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 14:40:56 -0500 Subject: [PATCH 01/14] Add templates for breadcrumbs/headers in portfolio page --- templates/portfolios/base.html | 10 ++++++---- templates/portfolios/breadcrumbs.html | 1 + templates/portfolios/header.html | 1 + 3 files changed, 8 insertions(+), 4 deletions(-) create mode 100644 templates/portfolios/breadcrumbs.html create mode 100644 templates/portfolios/header.html diff --git a/templates/portfolios/base.html b/templates/portfolios/base.html index 280e0d0b..9178a9e8 100644 --- a/templates/portfolios/base.html +++ b/templates/portfolios/base.html @@ -3,11 +3,13 @@ {% block content %}
-
- {% include 'navigation/portfolio_navigation.html' %} -
-
+ {% block portfolio_breadcrumbs %} + {% include "portfolios/breadcrumbs.html" %} + {% endblock %} + {% block portfolio_header %} + {% include "portfolios/header.html" %} + {% endblock %} {% block portfolio_content %}{% endblock %}
diff --git a/templates/portfolios/breadcrumbs.html b/templates/portfolios/breadcrumbs.html new file mode 100644 index 00000000..cc8894de --- /dev/null +++ b/templates/portfolios/breadcrumbs.html @@ -0,0 +1 @@ +{{ portfolio.name }} diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html new file mode 100644 index 00000000..cc8894de --- /dev/null +++ b/templates/portfolios/header.html @@ -0,0 +1 @@ +{{ portfolio.name }} From 159b5f9838e9bb18826bc3c3809210271de4093d Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 14:59:42 -0500 Subject: [PATCH 02/14] Add rudimentary breadcrumb at top of page --- styles/components/_portfolio_layout.scss | 9 +++++++++ styles/core/_variables.scss | 2 +- templates/portfolios/breadcrumbs.html | 14 +++++++++++++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index e74481a3..5872aa58 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -4,6 +4,15 @@ } } +.portfolio-breadcrumbs { + margin-bottom: $gap * 2; + color: $color-gray-medium; + font-size: $h5-font-size; + .icon { + @include icon-color($color-gray-medium); + } +} + .portfolio-navigation { @include panel-margin; margin-bottom: $gap * 4; diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 3586faa9..95cfba10 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -62,7 +62,7 @@ $color-black-light: #212121; $color-gray-dark: #323a45; $color-gray: #5b616b; -$color-gray-medium: #757575; +$color-gray-medium: #9b9b9b; $color-gray-light: #aeb0b5; $color-gray-lighter: #d6d7d9; $color-gray-lightest: #f1f1f1; diff --git a/templates/portfolios/breadcrumbs.html b/templates/portfolios/breadcrumbs.html index cc8894de..b6aec6c1 100644 --- a/templates/portfolios/breadcrumbs.html +++ b/templates/portfolios/breadcrumbs.html @@ -1 +1,13 @@ -{{ portfolio.name }} +{% from "components/icon.html" import Icon %} + +
+
+ {{ Icon("briefcase") }} + + {{ portfolio.name }} Portfolio + +
+
+
+
From 9986fd4289b2c3ada9074729001ac5669df9385a Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 15:13:52 -0500 Subject: [PATCH 03/14] Add some separators on portfolio pages --- styles/components/_global_layout.scss | 2 +- styles/components/_portfolio_layout.scss | 7 +++++++ templates/portfolios/base.html | 2 ++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index a80b4ca5..b46526b5 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -1,5 +1,5 @@ #app-root { - background-color: $color-gray-lightest; + background-color: $color-white; display: flex; flex-direction: column; justify-content: flex-start; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 5872aa58..fe1e941e 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -2,6 +2,13 @@ @include media($large-screen) { @include grid-row; } + + .line { + box-sizing: border-box; + height: 2px; + width: 100%; + border: 1px solid $color-gray-lightest; + } } .portfolio-breadcrumbs { diff --git a/templates/portfolios/base.html b/templates/portfolios/base.html index 9178a9e8..61eef44e 100644 --- a/templates/portfolios/base.html +++ b/templates/portfolios/base.html @@ -7,9 +7,11 @@ {% block portfolio_breadcrumbs %} {% include "portfolios/breadcrumbs.html" %} {% endblock %} +
{% block portfolio_header %} {% include "portfolios/header.html" %} {% endblock %} +
{% block portfolio_content %}{% endblock %} From 4862bf078dd0ed1b77cb9984f08d8d37681df5b0 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 20:33:27 -0500 Subject: [PATCH 04/14] Initial header row in portfolio nav --- styles/components/_portfolio_layout.scss | 35 ++++++++++++++++++ templates/portfolios/header.html | 45 +++++++++++++++++++++++- 2 files changed, 79 insertions(+), 1 deletion(-) 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 }} + +
+
+ +
From 2d971a458b5de47a2d73324e4e788159b0231e16 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 20:49:38 -0500 Subject: [PATCH 05/14] Indicate active section in portfolio sub-nav --- styles/components/_portfolio_layout.scss | 20 +++++++++++++++----- templates/portfolios/header.html | 21 ++++++++++++--------- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 40efda84..fa02d16f 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -45,13 +45,23 @@ .links { font-size: $small-font-size; - .link--icon { - text-align: center; + .icon-link { + &.active { + color: $color-gray; + .icon { + @include icon-color($color-gray); + } + } + + .icon-link--icon { + text-align: center; + } + + .icon { + @include icon-size(20); + } } - .icon { - @include icon-size(20); - } } } diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html index f5d8d2bf..e59a9f23 100644 --- a/templates/portfolios/header.html +++ b/templates/portfolios/header.html @@ -1,10 +1,10 @@ {% from "components/icon.html" import Icon %} {% macro Link(icon, text, url, active=False) %} - +
- - + +
{% endmacro %} @@ -28,17 +28,20 @@ {{ Link( icon='chart', text='Reports', - url=url_for("portfolios.portfolio_reports", portfolio_id=portfolio.id)) - }} + url=url_for("portfolios.portfolio_reports", portfolio_id=portfolio.id), + active=request.url_rule.endpoint == "portfolios.portfolio_reports", + ) }} {{ Link( icon='dollar-sign', text='Funding', - url=url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id)) - }} + url=url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id), + active=request.url_rule.endpoint == "portfolios.portfolio_funding", + ) }} {{ Link( icon='time', text='Admin', - url=url_for("portfolios.portfolio", portfolio_id=portfolio.id)) - }} + url=url_for("portfolios.portfolio", portfolio_id=portfolio.id), + active=request.url_rule.endpoint == "portfolios.portfolio", + ) }} From aa8cc45fd562fa7e9010ad1fff0afe496ea64287 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 21:42:11 -0500 Subject: [PATCH 06/14] Update breadcrumbs in portfolio header nav --- atst/routes/portfolios/__init__.py | 17 ++++++++++++++++- styles/components/_portfolio_layout.scss | 21 +++++++++++++++++++++ templates/portfolios/breadcrumbs.html | 10 ++++++++-- 3 files changed, 45 insertions(+), 3 deletions(-) diff --git a/atst/routes/portfolios/__init__.py b/atst/routes/portfolios/__init__.py index ad935378..574e9072 100644 --- a/atst/routes/portfolios/__init__.py +++ b/atst/routes/portfolios/__init__.py @@ -13,6 +13,16 @@ from atst.domain.authz import Authorization from atst.models.permissions import Permissions +def get_breadcrumb_from_request(request): + if request.url_rule.rule.startswith("/portfolios//task_order"): + return "Funding" + if request.url_rule.endpoint == "portfolios.portfolio": + return "Admin" + if request.url_rule.endpoint == "portfolios.portfolio_reports": + return "Reports" + return None + + @portfolios_bp.context_processor def portfolio(): portfolio = None @@ -31,4 +41,9 @@ def portfolio(): ) return False - return {"portfolio": portfolio, "permissions": Permissions, "user_can": user_can} + return { + "portfolio": portfolio, + "permissions": Permissions, + "user_can": user_can, + "secondary_breadcrumb": get_breadcrumb_from_request(http_request), + } diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index fa02d16f..eb39a27f 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -15,9 +15,30 @@ margin-bottom: $gap * 2; color: $color-gray-medium; font-size: $h5-font-size; + + .icon-link { + color: $color-gray-medium; + font-weight: normal; + } + + .icon--tiny { + padding: $gap 0; + } + .icon { @include icon-color($color-gray-medium); } + + .portfolio-breadcrumbs__crumb { + .icon { + @include icon-color($color-blue); + } + + .icon-link { + color: $color-blue; + pointer-events: none; + } + } } .portfolio-header { diff --git a/templates/portfolios/breadcrumbs.html b/templates/portfolios/breadcrumbs.html index b6aec6c1..87d82005 100644 --- a/templates/portfolios/breadcrumbs.html +++ b/templates/portfolios/breadcrumbs.html @@ -1,13 +1,19 @@ {% from "components/icon.html" import Icon %}
- +
+ {% if secondary_breadcrumb %} + {{ Icon("caret_right", classes="icon--tiny") }} + + {% endif %}
From 7904569a0db393388fe1bd479fec9e3c8ebbc3b8 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 21:45:08 -0500 Subject: [PATCH 07/14] Add in some permission checks in portfolio nav header --- templates/portfolios/header.html | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html index e59a9f23..dbec6c77 100644 --- a/templates/portfolios/header.html +++ b/templates/portfolios/header.html @@ -25,23 +25,27 @@ From 09818720c19ab2b7efe0a518fffdffcb98562549 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 21:49:04 -0500 Subject: [PATCH 08/14] Give portfolio content some head space --- styles/components/_portfolio_layout.scss | 5 ++++- templates/portfolios/base.html | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index eb39a27f..d437a667 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -82,10 +82,13 @@ @include icon-size(20); } } - } } +.portfolio-content { + margin-top: 6 * $gap; +} + .portfolio-navigation { @include panel-margin; margin-bottom: $gap * 4; diff --git a/templates/portfolios/base.html b/templates/portfolios/base.html index 61eef44e..92479d0f 100644 --- a/templates/portfolios/base.html +++ b/templates/portfolios/base.html @@ -12,7 +12,9 @@ {% include "portfolios/header.html" %} {% endblock %}
- {% block portfolio_content %}{% endblock %} +
+ {% block portfolio_content %}{% endblock %} +
From 0085b4e5088fd27046cd6a2dd690eea2f1d5bd70 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 21:56:09 -0500 Subject: [PATCH 09/14] Temporarily skip some irrelevant tests --- tests/routes/portfolios/test_applications.py | 7 ++++++- tests/routes/portfolios/test_members.py | 3 +++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/tests/routes/portfolios/test_applications.py b/tests/routes/portfolios/test_applications.py index 724a2a6d..5fe52ddf 100644 --- a/tests/routes/portfolios/test_applications.py +++ b/tests/routes/portfolios/test_applications.py @@ -1,3 +1,4 @@ +import pytest from flask import url_for from tests.factories import ( @@ -20,7 +21,7 @@ def test_user_with_permission_has_budget_report_link(client, user_session): user_session(portfolio.owner) response = client.get("/portfolios/{}/applications".format(portfolio.id)) assert ( - 'href="/portfolios/{}/reports"'.format(portfolio.id).encode() in response.data + "href='/portfolios/{}/reports'".format(portfolio.id).encode() in response.data ) @@ -38,6 +39,7 @@ def test_user_without_permission_has_no_budget_report_link(client, user_session) ) +@pytest.mark.skip(reason="Temporarily no add activity log link") def test_user_with_permission_has_activity_log_link(client, user_session): portfolio = PortfolioFactory.create() ccpo = UserFactory.from_atat_role("ccpo") @@ -69,6 +71,7 @@ def test_user_with_permission_has_activity_log_link(client, user_session): ) +@pytest.mark.skip(reason="Temporarily no add activity log link") def test_user_without_permission_has_no_activity_log_link(client, user_session): portfolio = PortfolioFactory.create() developer = UserFactory.create() @@ -87,6 +90,7 @@ def test_user_without_permission_has_no_activity_log_link(client, user_session): ) +@pytest.mark.skip(reason="Temporarily no add application link") def test_user_with_permission_has_add_application_link(client, user_session): portfolio = PortfolioFactory.create() user_session(portfolio.owner) @@ -97,6 +101,7 @@ def test_user_with_permission_has_add_application_link(client, user_session): ) +@pytest.mark.skip(reason="Temporarily no add application link") def test_user_without_permission_has_no_add_application_link(client, user_session): user = UserFactory.create() portfolio = PortfolioFactory.create() diff --git a/tests/routes/portfolios/test_members.py b/tests/routes/portfolios/test_members.py index 5cdf33bd..c8d97b61 100644 --- a/tests/routes/portfolios/test_members.py +++ b/tests/routes/portfolios/test_members.py @@ -1,3 +1,4 @@ +import pytest from flask import url_for from tests.factories import ( @@ -36,6 +37,7 @@ def create_portfolio_and_invite_user( return portfolio +@pytest.mark.skip(reason="Temporarily no add member link") def test_user_with_permission_has_add_member_link(client, user_session): portfolio = PortfolioFactory.create() user_session(portfolio.owner) @@ -46,6 +48,7 @@ def test_user_with_permission_has_add_member_link(client, user_session): ) +@pytest.mark.skip(reason="Temporarily no add member link") def test_user_without_permission_has_no_add_member_link(client, user_session): user = UserFactory.create() portfolio = PortfolioFactory.create() From 9fa3fd92f7d71f52a63f7bfbb4f78145d4f8f636 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Wed, 6 Feb 2019 22:03:37 -0500 Subject: [PATCH 10/14] Add missing icons --- static/icons/chart-pie.svg | 1 + static/icons/cog.svg | 1 + static/icons/home.svg | 1 + templates/portfolios/breadcrumbs.html | 2 +- templates/portfolios/header.html | 4 ++-- 5 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 static/icons/chart-pie.svg create mode 100644 static/icons/cog.svg create mode 100644 static/icons/home.svg diff --git a/static/icons/chart-pie.svg b/static/icons/chart-pie.svg new file mode 100644 index 00000000..e1b476bd --- /dev/null +++ b/static/icons/chart-pie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/cog.svg b/static/icons/cog.svg new file mode 100644 index 00000000..fb5bd35a --- /dev/null +++ b/static/icons/cog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/home.svg b/static/icons/home.svg new file mode 100644 index 00000000..27ee7ab0 --- /dev/null +++ b/static/icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/portfolios/breadcrumbs.html b/templates/portfolios/breadcrumbs.html index 87d82005..bc4c16d7 100644 --- a/templates/portfolios/breadcrumbs.html +++ b/templates/portfolios/breadcrumbs.html @@ -2,7 +2,7 @@
- {{ Icon("briefcase") }} + {{ Icon("home") }} {{ portfolio.name }} Portfolio diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html index dbec6c77..157cfd82 100644 --- a/templates/portfolios/header.html +++ b/templates/portfolios/header.html @@ -27,7 +27,7 @@