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

more styling for new portfolio member modal

Browse Source
This commit is contained in:
dandds
2019-03-25 06:53:48 -04:00
parent 0d3387b0fe
commit ec794abbf2
5 changed files with 96 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/components/modal.html
View File

@@ -1,8 +1,8 @@
{% from "components/icon.html" import Icon %}
{% macro Modal(name, dismissable=False) -%}
{% macro Modal(name, dismissable=False, classes="") -%}
<div v-show="activeModal === '{{name}}'" v-cloak>
<div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%}'>
<div id='modal--{{name}}' class='modal {% if dismissable %}modal--dismissable{% endif%} {{ classes }}'>
<div class='modal__container'>
<div class='modal__dialog' role='dialog' aria-modal='true'>
<div class='modal__body'>

4
templates/components/multi_step_modal_form.html
View File

@@ -31,9 +31,9 @@
<button v-on:click="openModal('{{ name }}')" type="button" class="icon-link">{{ button_text }}</button>
<form action="{{ form_action }}" method="POST">
{{ form.csrf_token }}
{% call Modal(name=name, dismissable=dismissable) %}
{% call Modal(name=name, dismissable=dismissable, classes="wide") %}
{% for step in steps %}
<div class="modal--form" v-show="step === {{ loop.index0 }}">
<div class="modal__form" v-show="step === {{ loop.index0 }}">
{{ FormSteps(step_count, loop.index) }}
{{ step }}
</div>

3
templates/components/options_input.html
View File

@@ -7,7 +7,8 @@
inline-template
{% if field.errors %}v-bind:initial-errors='{{ field.errors | list }}'{% endif %}
{% if field.data and field.data != "None" %}v-bind:initial-value="'{{ field.data }}'"{% endif %}
key='{{ field.name }}'>
key='{{ field.name }}'
>
<div
v-bind:class="['usa-input', { 'usa-input--error': showError, 'usa-input--success': showValid }]">

48
templates/portfolios/admin.html
View File

@@ -4,7 +4,19 @@
{% from "components/icon.html" import Icon %}
{% from "components/text_input.html" import TextInput %}
{% from "components/multi_step_modal_form.html" import MultiStepModalForm %}
{% from "components/options_input.html" import OptionsInput %}
{% macro SimpleOptionsInput(field) %}
<div class="usa-input">
<fieldset data-ally-disabled="true" class="usa-input__choices">
<legend>
<div class="usa-input__title-inline">
{{ field.label | striptags}}
</div>
</legend>
{{ field() }}
</fieldset>
</div>
{% endmacro %}
{% set secondary_breadcrumb = "navigation.portfolio_navigation.portfolio_admin" | translate %}
@@ -53,7 +65,9 @@
{% endif %}
{% set step_one %}
<h1>Invite New Portfolio Member</h1>
<div class="modal__form--header">
<h1>Invite New Portfolio Member</h1>
</div>
<div class='form-row'>
<div class='form-col form-col--half'>
{{ TextInput(member_form.first_name, validation='requiredField') }}
@@ -79,22 +93,26 @@
</div>
<div class='action-group'>
<a v-on:click="next()" class='action-group__action usa-button'>Next Step</a>
<a class='action-group__action icon-link icon-link--danger' 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>
{% endset %}
{% set step_two %}
<h1>Assign Member Permissions</h1>
<a class='icon-link'>
<span class='icon'>{{ Icon('info') }}</span>
{{ "portfolios.admin.permissions_info" | translate }}
</a>
{{ OptionsInput(member_form.perms_app_mgmt) }}
{{ OptionsInput(member_form.perms_funding) }}
{{ OptionsInput(member_form.perms_reporting) }}
{{ OptionsInput(member_form.perms_portfolio_mgmt) }}
<div class='action-group'>
<input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
<div class="modal__form--padded">
<div class="modal__form--header">
<h1>Assign Member Permissions</h1>
<a class='icon-link'>
<span class='icon'>{{ Icon('info') }}</span>
{{ "portfolios.admin.permissions_info" | translate }}
</a>
</div>
{{ SimpleOptionsInput(member_form.perms_app_mgmt) }}
{{ SimpleOptionsInput(member_form.perms_funding) }}
{{ SimpleOptionsInput(member_form.perms_reporting) }}
{{ SimpleOptionsInput(member_form.perms_portfolio_mgmt) }}
<div class='action-group'>
<input type="submit" v-on:click="closeModal('{{ new_port_mem }}')" class='action-group__action usa-button' value='Invite Member'>
<a class='action-group__action icon-link icon-link--default' v-on:click="closeModal('{{ new_port_mem }}')">Cancel</a>
</div>
</div>
{% endset %}
{{ MultiStepModalForm(