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

Low-fi update of multi-step modals to fix styling

Browse Source
This commit is contained in:
leigh-mil 2019-10-02 14:47:41 -04:00
parent 7a4c26419f
commit fe29b5d838
7 changed files with 51 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
styles/components/_modal.scss
View File

@ -127,6 +127,10 @@ body {
border-bottom: 1px solid $color-gray-lighter;
margin: 0 (-$gap * 1.5);
}
.form-row {
margin: 0;
}
}
&__dismiss {

6
styles/components/_progress_menu.scss
View File

@ -3,8 +3,10 @@
ul {
list-style: none;
margin: 0;
margin: auto;
width: 50%;
padding: 0;
padding-top: $gap;
}
&--two {
@ -40,7 +42,7 @@
a {
display: block;
position: relative;
padding: ($gap * 4) ($gap * 2);
padding: ($gap * 4) ($gap * 2) 0;
margin: 0 ($gap * 2);
text-decoration: none;
text-align: center;

6
templates/applications/fragments/new_member_modal_content.html
View File

@ -2,10 +2,8 @@
{% import "applications/fragments/member_form_fields.html" as member_fields %}
{% macro MemberFormTemplate(title, next_button, previous=True) %}
<div class="modal__form--header">
<h1>{{ Icon('avatar') }} {{ title }}</h1>
<hr>
</div>
<hr>
<h1>{{ Icon('avatar') }} {{ title }}</h1>
{{ caller() }}

1
templates/applications/settings.html
View File

@ -6,7 +6,6 @@
{% import "applications/fragments/new_member_modal_content.html" as member_steps %}
{% from "fragments/members.html" import MemberManagementTemplate %}
{% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/pagination.html" import Pagination %}
{% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %}

4
templates/components/multi_step_modal_form.html
View File

@ -28,12 +28,12 @@
{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
{% set step_count = steps|length %}
<multi-step-modal-form inline-template :steps={{ step_count }}>
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
{% call Modal(name=name, dismissable=dismissable) %}
<form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
{{ form.csrf_token }}
<div v-if="$root.activeModal === '{{ name }}'">
{% for step in steps %}
<div class="modal__form" v-show="step === {{ loop.index0 }}">
<div v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>

44
templates/portfolios/fragments/add_new_portfolio_member.html
View File

@ -16,9 +16,8 @@
{% endmacro %}
{% set step_one %}
<div class="modal__form--header">
<h1>Invite new portfolio member</h1>
</div>
<hr>
<h1>Invite new portfolio member</h1>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(member_form.user_data.first_name, validation='requiredField', optional=False) }}
@ -47,32 +46,29 @@
type='button'
v-on:click="next()"
v-bind:disabled="invalid"
class='action-group__action usa-button'
class='action-group__action usa-button usa-button-primary'
value='Next'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
</div>
{% endset %}
{% set step_two %}
<div class="modal__form--padded">
<div class="modal__form--header">
<h1>Assign member permissions</h1>
<a class='icon-link'>
{{ Icon('info') }}
{{ "portfolios.admin.permissions_info" | translate }}
</a>
</div>
{{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
{{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
{{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
{{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
<div class='action-group'>
<input
type="submit"
class='action-group__action usa-button'
form="add-port-mem"
value='Invite member'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
</div>
<hr>
<h1>Assign member permissions</h1>
<a class='icon-link'>
{{ Icon('info') }}
{{ "portfolios.admin.permissions_info" | translate }}
</a>
{{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }}
{{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }}
{{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }}
{{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }}
<div class='action-group'>
<input
type="submit"
class='action-group__action usa-button usa-button-primary'
form="add-port-mem"
value='Invite member'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
</div>
{% endset %}
{{ MultiStepModalForm(

42
templates/portfolios/fragments/change_ppoc.html
View File

@ -6,9 +6,8 @@
{% from "components/options_input.html" import OptionsInput %}
{% set step_one %}
<div class="modal__form--header">
<h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
</div>
<hr>
<h1>{{ "fragments.ppoc.update_ppoc_title" | translate }}</h1>
{{
Alert(
@ -43,28 +42,25 @@
{% endset %}
{% set step_two %}
<div class="modal__form--padded">
<div class="modal__form--header">
<h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
</div>
<hr>
<h1>{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}</h1>
{{
Alert(
level="info",
title=("fragments.ppoc.confirm_alert.title" | translate),
)
}}
{{
Alert(
level="info",
title=("fragments.ppoc.confirm_alert.title" | translate),
)
}}
<div class='action-group'>
<input
type="submit"
class='action-group__action usa-button'
form="change-ppoc-form"
value='{{ "common.confirm" | translate }}'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
{{ "common.cancel" | translate }}
</a>
</div>
<div class='action-group'>
<input
type="submit"
class='action-group__action usa-button'
form="change-ppoc-form"
value='{{ "common.confirm" | translate }}'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('change-ppoc-form')">
{{ "common.cancel" | translate }}
</a>
</div>
{% endset %}