From f89424b21740e6f081e2f1515c48b0e3af2b02f0 Mon Sep 17 00:00:00 2001 From: Montana Date: Thu, 6 Jun 2019 09:42:23 -0400 Subject: [PATCH 1/6] Sticky styling --- styles/components/_portfolio_layout.scss | 7 ++----- styles/components/_sticky_cta.scss | 8 ++------ styles/sections/_task_order.scss | 2 +- templates/portfolios/base.html | 1 + templates/portfolios/task_orders/index.html | 11 +++++------ templates/portfolios/task_orders/review.html | 12 ++++++++---- 6 files changed, 19 insertions(+), 22 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 90b06034..bbbfc2da 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -373,7 +373,8 @@ } .portfolio-funding { - padding: (2 * $gap) 0; + padding: 2 * $gap; + padding-top: 0; .panel { @include shadow-panel; @@ -385,10 +386,6 @@ margin-bottom: 2 * $gap; } - .portfolio-funding__header { - flex-direction: row-reverse; - } - .pending-task-order { background-color: $color-gold-lightest; diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index abaa3591..e15eadaa 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -1,12 +1,9 @@ .sticky-cta { - z-index: 100; - - @include media($small-screen) { - margin-left: -$gap * 4; - } + margin-left: -$gap * 4; @include media($medium-screen) { margin-left: -$gap * 5; + margin-right: -$gap * 3; } } @@ -23,7 +20,6 @@ border-bottom: 1px solid $color-gray-lighter; padding: 0 40px 0 40px; box-shadow: $box-shadow; - margin-bottom: 20px; } .sticky-cta-text { diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 445ab557..070fe475 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -80,7 +80,7 @@ } .task-order-summary { - margin: $gap * 4; + margin-top: $gap * 4; hr { border: 0; diff --git a/templates/portfolios/base.html b/templates/portfolios/base.html index 685c7057..eab8e7a1 100644 --- a/templates/portfolios/base.html +++ b/templates/portfolios/base.html @@ -7,6 +7,7 @@ {% block portfolio_header %} {% include "portfolios/header.html" %} {% endblock %} +
{% block portfolio_content %}{% endblock %}
diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html index 328c8994..bd2eb316 100644 --- a/templates/portfolios/task_orders/index.html +++ b/templates/portfolios/task_orders/index.html @@ -63,13 +63,12 @@ {% endmacro %} -
- {% call StickyCTA(text="Funding") %} -
- Add a new task order -
- {% endcall %} +{% call StickyCTA(text="Funding") %} + Start a new task order +{% endcall %} + +
{% if not active_task_orders and not pending_task_orders %} {{ EmptyState( diff --git a/templates/portfolios/task_orders/review.html b/templates/portfolios/task_orders/review.html index d2a4257e..06859758 100644 --- a/templates/portfolios/task_orders/review.html +++ b/templates/portfolios/task_orders/review.html @@ -1,12 +1,16 @@ -{% extends 'portfolios/base.html' %} - {% from "components/icon.html" import Icon %} {% from "components/totals_box.html" import TotalsBox %} +{% from "components/sticky_cta.html" import StickyCTA %} -{% block content %} +{% extends 'portfolios/base.html' %} + +{% block portfolio_content %} + {% call StickyCTA(text="Review Funding") %} + Edit + Submit task order + {% endcall %}
-
Portfolio Name
From 88efd0071b93739f5918009d38ce63d630b982e3 Mon Sep 17 00:00:00 2001 From: Montana Date: Thu, 6 Jun 2019 10:51:18 -0400 Subject: [PATCH 2/6] Show Funding in navigation as blue when user is on TO flow --- templates/portfolios/header.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/portfolios/header.html b/templates/portfolios/header.html index 44a528ce..1935a0d2 100644 --- a/templates/portfolios/header.html +++ b/templates/portfolios/header.html @@ -27,7 +27,7 @@ icon='funding', text='navigation.portfolio_navigation.breadcrumbs.funding' | translate, url=url_for("task_orders.portfolio_funding", portfolio_id=portfolio.id), - active=request.url_rule.endpoint == "task_orders.portfolio_funding", + active=request.url_rule.endpoint in ["task_orders.portfolio_funding", "task_orders.view_task_order", "task_orders.review_task_order"], ) }} {{ Link( icon='applications', From 2870d551ee175e683fd4fcd14af6961f89e69e67 Mon Sep 17 00:00:00 2001 From: Montana Date: Thu, 6 Jun 2019 15:14:14 -0400 Subject: [PATCH 3/6] Move semi collapsible text to a template component --- templates/components/semi_collapsible_text.html | 15 +++++++++++++++ templates/portfolios/task_orders/review.html | 17 ++++++----------- 2 files changed, 21 insertions(+), 11 deletions(-) create mode 100644 templates/components/semi_collapsible_text.html diff --git a/templates/components/semi_collapsible_text.html b/templates/components/semi_collapsible_text.html new file mode 100644 index 00000000..2a7d7482 --- /dev/null +++ b/templates/components/semi_collapsible_text.html @@ -0,0 +1,15 @@ +{% from "components/icon.html" import Icon %} + +{% macro SemiCollapsibleText(paragraph) -%} + + + + + +{%- endmacro %} diff --git a/templates/portfolios/task_orders/review.html b/templates/portfolios/task_orders/review.html index 06859758..5a4e376d 100644 --- a/templates/portfolios/task_orders/review.html +++ b/templates/portfolios/task_orders/review.html @@ -1,26 +1,21 @@ {% from "components/icon.html" import Icon %} {% from "components/totals_box.html" import TotalsBox %} +{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %} {% from "components/sticky_cta.html" import StickyCTA %} {% extends 'portfolios/base.html' %} {% block portfolio_content %} {% call StickyCTA(text="Review Funding") %} - Edit - Submit task order + Edit + Submit task order {% endcall %}
- -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

- More{{ Icon('caret_down') }} - Less{{ Icon('caret_up') }} -
- + {% set description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." %} + + {{ SemiCollapsibleText(paragraph=description) }}
From 80c6942c3b92dc142b8a61f9167c632f7090fbd4 Mon Sep 17 00:00:00 2001 From: Montana Date: Fri, 7 Jun 2019 09:30:05 -0400 Subject: [PATCH 4/6] Sticky header button styling --- styles/components/_sticky_cta.scss | 19 +++++++++---------- templates/portfolios/task_orders/index.html | 2 +- templates/portfolios/task_orders/review.html | 3 +-- 3 files changed, 11 insertions(+), 13 deletions(-) diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index e15eadaa..2fd1424e 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -13,13 +13,20 @@ .sticky-cta-container { display: flex; - justify-content: center; + align-items: center; background-color: $color-gray-lightest; border-top: 1px solid $color-gray-lighter; border-bottom: 1px solid $color-gray-lighter; - padding: 0 40px 0 40px; + padding: 0 $gap * 2 0 $gap * 5; box-shadow: $box-shadow; + + a { + margin: $gap $gap * 1.5 $gap 0; + width: 19rem; + height: 3.2rem; + font-size: $small-font-size; + } } .sticky-cta-text { @@ -28,12 +35,4 @@ .sticky-cta-buttons { display: flex; - justify-content: center; - - button { - margin-top: auto; - margin-bottom: auto; - width: 144px; - margin-left: 33px; - } } diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html index bd2eb316..2df23b45 100644 --- a/templates/portfolios/task_orders/index.html +++ b/templates/portfolios/task_orders/index.html @@ -65,7 +65,7 @@ {% call StickyCTA(text="Funding") %} - Start a new task order + Start a new task order {% endcall %}
diff --git a/templates/portfolios/task_orders/review.html b/templates/portfolios/task_orders/review.html index 5a4e376d..37105715 100644 --- a/templates/portfolios/task_orders/review.html +++ b/templates/portfolios/task_orders/review.html @@ -7,7 +7,7 @@ {% block portfolio_content %} {% call StickyCTA(text="Review Funding") %} - Edit + Edit Submit task order {% endcall %} @@ -19,7 +19,6 @@
-
Review your task order

Check to make sure the information you entered is correct. After submission, you will confirm this task order was signed by a contracting officer. Thereafter, you will be informed as soon as CCPO completes their review.

From 4e005ad98c2a2089bc17072ee1b0b418df3c530f Mon Sep 17 00:00:00 2001 From: Montana Date: Fri, 7 Jun 2019 09:42:28 -0400 Subject: [PATCH 5/6] Fix totals box background height --- styles/sections/_task_order.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 070fe475..7a0186b4 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -113,7 +113,7 @@ margin-left: $gap * 6; margin-top: $gap * 3; width: 33.77%; - max-height: 45rem; + height: fit-content; background-color: $color-gray-lightest; } From 9df19053852e819f9e95f43abb72a465b6089dca Mon Sep 17 00:00:00 2001 From: Montana Date: Fri, 7 Jun 2019 09:59:08 -0400 Subject: [PATCH 6/6] Fix issues with elements overlapping sticky header --- styles/components/_sticky_cta.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 2fd1424e..3cc52556 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -1,5 +1,6 @@ .sticky-cta { margin-left: -$gap * 4; + z-index: 10; @include media($medium-screen) { margin-left: -$gap * 5;