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; border-bottom: 1px solid $color-gray-lighter;
margin: 0 (-$gap * 1.5); margin: 0 (-$gap * 1.5);
} }
.form-row {
margin: 0;
}
} }
&__dismiss { &__dismiss {

6
styles/components/_progress_menu.scss
View File

@ -3,8 +3,10 @@
ul { ul {
list-style: none; list-style: none;
margin: 0; margin: auto;
width: 50%;
padding: 0; padding: 0;
padding-top: $gap;
} }
&--two { &--two {
@ -40,7 +42,7 @@
a { a {
display: block; display: block;
position: relative; position: relative;
padding: ($gap * 4) ($gap * 2); padding: ($gap * 4) ($gap * 2) 0;
margin: 0 ($gap * 2); margin: 0 ($gap * 2);
text-decoration: none; text-decoration: none;
text-align: center; 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 %} {% import "applications/fragments/member_form_fields.html" as member_fields %}
{% macro MemberFormTemplate(title, next_button, previous=True) %} {% macro MemberFormTemplate(title, next_button, previous=True) %}
<div class="modal__form--header"> <hr>
<h1>{{ Icon('avatar') }} {{ title }}</h1> <h1>{{ Icon('avatar') }} {{ title }}</h1>
<hr>
</div>
{{ caller() }} {{ caller() }}

1
templates/applications/settings.html
View File

@ -6,7 +6,6 @@
{% import "applications/fragments/new_member_modal_content.html" as member_steps %} {% import "applications/fragments/new_member_modal_content.html" as member_steps %}
{% from "fragments/members.html" import MemberManagementTemplate %} {% from "fragments/members.html" import MemberManagementTemplate %}
{% from "components/modal.html" import Modal %} {% from "components/modal.html" import Modal %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/pagination.html" import Pagination %} {% from "components/pagination.html" import Pagination %}
{% from "components/save_button.html" import SaveButton %} {% from "components/save_button.html" import SaveButton %}
{% from "components/text_input.html" import TextInput %} {% 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) -%} {% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%}
{% set step_count = steps|length %} {% set step_count = steps|length %}
<multi-step-modal-form inline-template :steps={{ step_count }}> <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 id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
{{ form.csrf_token }} {{ form.csrf_token }}
<div v-if="$root.activeModal === '{{ name }}'"> <div v-if="$root.activeModal === '{{ name }}'">
{% for step in steps %} {% for step in steps %}
<div class="modal__form" v-show="step === {{ loop.index0 }}"> <div v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }} {{ FormSteps(step_count, loop.index) }}
{{ step }} {{ step }}
</div> </div>

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

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

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

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