atst/templates/task_orders/builder_base.html
leigh-mil 8e2870b62f Add max width to CTA footer in the TO builder form
- Created a new mixin (ExpandSidenavMixin) that sets the defaultVisible prop that can be used in both the root component and the SidenavToggler. This makes it so that the Root knows whether or not the sidenav is collapsed or expanded, so then child components can use this to calculate margins/paddings/offsets/etc.
- Added new classes for the .action-group-footer that set the elements padding based on whether or not the sidenav is expanded.
- Added a nested div (.action-group-footer--container) inside .action-group-footer which sets the max width
2020-02-04 16:13:07 -05:00

74 lines
2.7 KiB
HTML

{% extends "portfolios/base.html" %}
{% from "components/sticky_cta.html" import StickyCTA %}
{% from "components/modal.html" import Modal %}
{% block portfolio_content %}
<to-form inline-template {% if form.clins %}v-bind:initial-clin-count="{{ form.clins.data | length }}"{% endif %} :enable-save="true">
<form id="to_form" action='{{ action }}' method="POST" autocomplete="off" enctype="multipart/form-data">
{{ form.csrf_token }}
{{ StickyCTA(
text=sticky_cta_text,
context=('task_orders.form.sticky_header_context' | translate({"step": step}) )) }}
{% call Modal(name='cancel', dismissable=True) %}
<div class="task-order__modal-cancel">
<h1>{{ 'task_orders.form.builder_base.cancel_modal' | translate }}</h1>
<div class="action-group">
<button formaction="{{ cancel_discard_url }}" class="usa-button usa-button-primary" type="submit">
{{ "task_orders.form.builder_base.delete_draft" | translate }}
</button>
<button formaction="{{ cancel_save_url }}" class="usa-button usa-button-primary" type="submit">
{{ "task_orders.form.builder_base.save_draft" | translate }}
</button>
</div>
</div>
{% endcall %}
{% include "fragments/flash.html" %}
<div class="task-order">
{% block to_builder_form_field %}{% endblock %}
</div>
<div
class="action-group-footer"
v-bind:class="{'action-group-footer--expand-offset': this.$root.sidenavExpanded, 'action-group-footer--collapse-offset': !this.$root.sidenavExpanded}">
<div class="action-group-footer--container">
{% block next_button %}
<input
type="submit"
tabindex="0"
:disabled="!canSave"
value="{{ next_button_text }}"
form="to_form"
class="usa-button usa-button-primary">
{% endblock %}
{% if step != "1" %}
{% if step == "2" or step == "3" -%}
<button
type="submit"
class="usa-button usa-button-secondary"
formaction="{{ previous_button_link }}">
{{ "common.previous" | translate }}
</button>
{% else -%}
<a
class="usa-button usa-button-secondary"
href="{{ previous_button_link }}">
{{ "common.previous" | translate }}
</a>
{%- endif %}
{% endif %}
<a
v-on:click="openModal('cancel')"
class="action-group__action icon-link">
{{ "common.cancel" | translate }}
</a>
</div>
</div>
</form>
</to-form>
{% endblock %}