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..3cc52556 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -1,12 +1,10 @@ .sticky-cta { - z-index: 100; - - @include media($small-screen) { - margin-left: -$gap * 4; - } + margin-left: -$gap * 4; + z-index: 10; @include media($medium-screen) { margin-left: -$gap * 5; + margin-right: -$gap * 3; } } @@ -16,14 +14,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; - margin-bottom: 20px; + + a { + margin: $gap $gap * 1.5 $gap 0; + width: 19rem; + height: 3.2rem; + font-size: $small-font-size; + } } .sticky-cta-text { @@ -32,12 +36,4 @@ .sticky-cta-buttons { display: flex; - justify-content: center; - - button { - margin-top: auto; - margin-bottom: auto; - width: 144px; - margin-left: 33px; - } } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 445ab557..7a0186b4 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; @@ -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; } 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) -%} + + +
+

+ {{ paragraph }} +

+ More{{ Icon('caret_down') }} + Less{{ Icon('caret_up') }} +
+ + +{%- endmacro %} 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/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', diff --git a/templates/portfolios/task_orders/index.html b/templates/portfolios/task_orders/index.html index 328c8994..2df23b45 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..37105715 100644 --- a/templates/portfolios/task_orders/review.html +++ b/templates/portfolios/task_orders/review.html @@ -1,26 +1,24 @@ -{% extends 'portfolios/base.html' %} - {% 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 %} -{% block content %} +{% extends 'portfolios/base.html' %} + +{% block portfolio_content %} + {% call StickyCTA(text="Review Funding") %} + Edit + Submit task order + {% endcall %}
-
Portfolio Name
- -
-

- 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) }}
-
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.