From b270d0e4b0bcc25545d37fd50fa2678fc39911dd Mon Sep 17 00:00:00 2001 From: graham-dds Date: Tue, 17 Dec 2019 16:10:21 -0500 Subject: [PATCH 1/2] Update new portfolio layout - Move CTA buttons to floating footer - separated -> bordered --- styles/components/_forms.scss | 3 +- templates/portfolios/new/step_1.html | 54 ++++++++++++++-------------- 2 files changed, 29 insertions(+), 28 deletions(-) diff --git a/styles/components/_forms.scss b/styles/components/_forms.scss index a6e0709a..43c31c43 100644 --- a/styles/components/_forms.scss +++ b/styles/components/_forms.scss @@ -1,7 +1,8 @@ // Form Grid .form-row { margin: ($gap * 4) 0; - &--separated { + + &--bordered { border-bottom: $color-gray-lighter 1px solid; } diff --git a/templates/portfolios/new/step_1.html b/templates/portfolios/new/step_1.html index 4613b063..3383128b 100644 --- a/templates/portfolios/new/step_1.html +++ b/templates/portfolios/new/step_1.html @@ -16,36 +16,36 @@ {{ StickyCTA(text="Create New Portfolio") }} -
- {{ form.csrf_token }} -
-
- {{ TextInput(form.name, optional=False) }} - {{"forms.portfolio.name.help_text" | translate | safe }} +
+ + {{ form.csrf_token }} +
+
+ {{ TextInput(form.name, optional=False, classes="form-col") }} + {{"forms.portfolio.name.help_text" | translate | safe }} +
-
-
-
- {{ TextInput(form.description, paragraph=True) }} - {{"forms.portfolio.description.help_text" | translate | safe }} +
+
+ {{ TextInput(form.description, paragraph=True) }} + {{"forms.portfolio.description.help_text" | translate | safe }} +
-
-
-
- {{ MultiCheckboxInput(form.defense_component, optional=False) }} - {{ "forms.portfolio.defense_component.help_text" | translate | safe }} +
+
+ {{ MultiCheckboxInput(form.defense_component, optional=False) }} + {{ "forms.portfolio.defense_component.help_text" | translate | safe }} +
-
-
- {{ - SaveButton( - text=('common.save' | translate), - form="portfolio-create", - element="input", - ) - }} -
- +
+ {% block next_button %} + {{ SaveButton(text=('common.save' | translate), form="portfolio-create", element="input") }} + {% endblock %} + + Cancel + + +
{% endblock %} From 13e8cb8ee108c213423cb702e399e0c24687f9c5 Mon Sep 17 00:00:00 2001 From: graham-dds Date: Tue, 17 Dec 2019 16:43:35 -0500 Subject: [PATCH 2/2] Move form buttons to floating bottom action bar Form action buttons were previously in the sicky CTA bar. This commit moves them to a bottom action bar. --- styles/elements/_action_group.scss | 2 +- templates/home.html | 11 ++----- templates/task_orders/builder_base.html | 39 +++++++++++++------------ templates/task_orders/step_1.html | 1 - translations.yaml | 3 +- 5 files changed, 26 insertions(+), 30 deletions(-) diff --git a/styles/elements/_action_group.scss b/styles/elements/_action_group.scss index 1f79f7d2..73cad181 100644 --- a/styles/elements/_action_group.scss +++ b/styles/elements/_action_group.scss @@ -46,7 +46,7 @@ background: white; right: 0; padding-right: $gap * 4; - border-top: 1px solid $color-gray-light; + border-top: 1px solid $color-gray-lighter; width: 100%; z-index: 1; } diff --git a/templates/home.html b/templates/home.html index 4e459639..aadcd2a8 100644 --- a/templates/home.html +++ b/templates/home.html @@ -13,12 +13,6 @@ {% set sticky_header = "home.get_started" | translate %} {% endif %} - {% call StickyCTA(sticky_header) %} - - {{ "home.add_portfolio_button_text" | translate }} - - {% endcall %} -
{% include "fragments/flash.html" %} @@ -92,9 +86,10 @@
-
- JEDI heirarchy diagram + + {{ "home.add_portfolio_button_text" | translate }} +
diff --git a/templates/task_orders/builder_base.html b/templates/task_orders/builder_base.html index 362a1038..70bc20c9 100644 --- a/templates/task_orders/builder_base.html +++ b/templates/task_orders/builder_base.html @@ -8,8 +8,26 @@
{{ form.csrf_token }} - {% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate({"step": step}) )) %} - + {{ StickyCTA( + text='task_orders.form.sticky_header_text' | translate, + context=('task_orders.form.sticky_header_context' | translate({"step": step}) )) }} + + {% call Modal(name='cancel', dismissable=True) %} +
+

Do you want to save this draft?

+
+ + +
+
+ {% endcall %} + + {% include "fragments/flash.html" %} + +
+ {% block to_builder_form_field %}{% endblock %} +
+ {% block next_button %} - {% endcall %} - - {% call Modal(name='cancel', dismissable=True) %} -
-

Do you want to save this draft?

-
- - -
-
- {% endcall %} - - {% include "fragments/flash.html" %} - -
- {% block to_builder_form_field %}{% endblock %} -
diff --git a/templates/task_orders/step_1.html b/templates/task_orders/step_1.html index 758099fa..6be3218c 100644 --- a/templates/task_orders/step_1.html +++ b/templates/task_orders/step_1.html @@ -1,7 +1,6 @@ {% extends "task_orders/builder_base.html" %} {% from 'components/icon.html' import Icon %} -{% from "components/sticky_cta.html" import StickyCTA %} {% from "task_orders/form_header.html" import TOFormStepHeader %} {% from 'components/upload_input.html' import UploadInput %} diff --git a/translations.yaml b/translations.yaml index 6a678f48..8fe26475 100644 --- a/translations.yaml +++ b/translations.yaml @@ -526,7 +526,8 @@ task_orders: description: Finally, plase confirm that your uploaded document representing the information you've entered contains the required signature from your Contracting Officer. You will be informed as soon as CCPO completes their review. alert_message: All task orders require a Contracting Officer signature. next_button: 'Confirm & Submit' - sticky_header_text: 'Add Task Order (step {step} of 5)' + sticky_header_text: 'Add Task Order' + sticky_header_context: 'Step {step} of 5' empty_state: header: Add approved task orders message: Upload your approved Task Order here. You are required to confirm you have the appropriate signature. You will have the ability to add additional approved Task Orders with more funding to this Portfolio in the future.