pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move form buttons to floating bottom action bar

Browse Source 
Form action buttons were previously in the sicky CTA bar. This commit
moves them to a bottom action bar.
This commit is contained in:
graham-dds 2019-12-17 16:43:35 -05:00
parent b270d0e4b0
commit 13e8cb8ee1
5 changed files with 26 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styles/elements/_action_group.scss
View File

@ -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;
}

11
templates/home.html
View File

@ -13,12 +13,6 @@
{% set sticky_header = "home.get_started" | translate %}
{% endif %}
{% call StickyCTA(sticky_header) %}
<a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
{{ "home.add_portfolio_button_text" | translate }}
</a>
{% endcall %}
<div class="about-cloud">
{% include "fragments/flash.html" %}
@ -92,9 +86,10 @@
</div>
</div>
</toggler>
</div>
<img id='jedi-heirarchy' src="{{ url_for("static", filename="img/JEDIhierarchyDiagram.png")}}" alt="JEDI heirarchy diagram">
<a href="{{ url_for("portfolios.new_portfolio_step_1") }}" class="usa-button-primary">
{{ "home.add_portfolio_button_text" | translate }}
</a>
</div>
</main>

39
templates/task_orders/builder_base.html
View File

@ -8,8 +8,26 @@
<form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
{{ form.csrf_token }}
{% call StickyCTA(text=('task_orders.form.sticky_header_text' | translate({"step": step}) )) %}
<span class="action-group">
{{ 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) %}
<div class="task-order__modal-cancel">
<h1>Do you want to save this draft?</h1>
<div class="action-group">
<button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">No, delete it</button>
<button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">Yes, save for later</button>
</div>
</div>
{% endcall %}
{% include "fragments/flash.html" %}
<div class="task-order">
{% block to_builder_form_field %}{% endblock %}
</div>
<span class="action-group-footer">
{% block next_button %}
<input
type="submit"
@ -32,23 +50,6 @@
{{ "common.cancel" | translate }}
</a>
</span>
{% endcall %}
{% call Modal(name='cancel', dismissable=True) %}
<div class="task-order__modal-cancel">
<h1>Do you want to save this draft?</h1>
<div class="action-group">
<button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">No, delete it</button>
<button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">Yes, save for later</button>
</div>
</div>
{% endcall %}
{% include "fragments/flash.html" %}
<div class="task-order">
{% block to_builder_form_field %}{% endblock %}
</div>
</form>
</to-form>

1
templates/task_orders/step_1.html
View File

@ -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 %}

3
translations.yaml
View File

@ -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.