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

mock environment-role selector on member-edit screen

Browse Source
This commit is contained in:
Andrew Croce 2018-08-29 09:55:43 -04:00
parent b4a5956a73
commit 38380ac369
2 changed files with 61 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
templates/components/modal.html
View File

@ -1,20 +1,22 @@
{% from "components/icon.html" import Icon %} {% from "components/icon.html" import Icon %}
{% macro Modal(name, dismissable=False) -%} {% macro Modal(name, dismissable=False) -%}
<div v-if='modals.{{name}} === true' v-cloak> <template v-if='modals.{{name}} === true' v-cloak>
<div class='modal {% if dismissable %}modal--dismissable{% endif%}'> <div class='modal {% if dismissable %}modal--dismissable{% endif%}'>
<div class='modal__dialog' role='dialog' aria-modal='true'> <div class='modal__container'>
<div class='modal__body'> <div class='modal__dialog' role='dialog' aria-modal='true'>
{{ caller() }} <div class='modal__body'>
{{ caller() }}
{% if dismissable %} {% if dismissable %}
<button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'> <button type='button' class='icon-link modal__dismiss' v-on:click='closeModal("{{name}}")'>
{{ Icon('x') }} {{ Icon('x') }}
<span>Close</span> <span>Close</span>
</button> </button>
{% endif %} {% endif %}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
{%- endmacro %} {%- endmacro %}

81
templates/member_edit.html
View File

@ -55,61 +55,76 @@
{% call Modal(name='rolesModal', dismissable=False) %} {% call Modal(name='rolesModal', dismissable=False) %}
<div class="block-list"> <div class="block-list">
<header class="block-list__header"> <header class="block-list__header">
<h2>New Request <div class="subtitle">Add a user to an environment</div></h2> <h2 class="block-list__title">
Environment access for Danny Knight
<div class='subtitle'>Project Name - Environment Name</div>
</h2>
</header> </header>
<form method="post" action=""> <form method="post" action="">
<dl> <ul>
<div class='block-list__item'> <li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-1' /> <input type='radio' name='radio' id='radio-1' />
<label for='radio-1'> <label for='radio-1'>
<dt>CCPO</dt> <dl>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd> <dt>CCPO</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dicta voluptate vitae quasi, cumque rem dolores, quae quas cum in recusandae? Libero deleniti minus ab accusantium vel necessitatibus placeat, rerum?</dd>
</dl>
</label> </label>
</div> </li>
<div class='block-list__item'> <li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-2' /> <input type='radio' name='radio' id='radio-2' />
<label for='radio-2'> <label for='radio-2'>
<dt>Security</dt> <dl>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd> <dt>Security</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat vel ea, eaque, odio sint explicabo officia, debitis dolore, et repudiandae possimus deserunt eveniet laborum. Sunt blanditiis deleniti minus. Et, mollitia.</dd>
</dl>
</label> </label>
</div> </li>
<div class='block-list__item'> <li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-3' /> <input type='radio' name='radio' id='radio-3' />
<label for='radio-3'> <label for='radio-3'>
<dt>Audit</dt> <dl>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd> <dt>Audit</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem itaque reprehenderit dolorum nobis voluptatibus quae, facilis voluptatum necessitatibus alias laboriosam, esse blanditiis culpa possimus tempore consectetur recusandae. Nihil, vel, dolorem!</dd>
</dl>
</label> </label>
</div> </li>
<div class='block-list__item'> <li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-4' /> <input type='radio' name='radio' id='radio-4' />
<label for='radio-4'> <label for='radio-4'>
<dt>Application Developer</dt> <dl>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd> <dt>Application Developer</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea esse ab consequuntur aliquam. Porro ea mollitia sapiente blanditiis quaerat quam beatae vitae adipisci quisquam dolore reiciendis tenetur, eius nemo quibusdam!</dd>
</dl>
</label> </label>
</div> </li>
<div class='block-list__item'> <li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-5' /> <input type='radio' name='radio' id='radio-5' />
<label for='radio-5'> <label for='radio-5'>
<dt>Dev Ops</dt> <dl>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd> <dt>Dev Ops</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore incidunt obcaecati, quidem ullam sint iusto. Natus ex distinctio eveniet cumque laudantium veritatis nemo asperiores, esse hic quis perspiciatis, quia impedit.</dd>
</dl>
</label> </label>
</div> </li>
<div class='block-list__item'> <li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-6' /> <input type='radio' name='radio' id='radio-6' />
<label for='radio-6'> <label for='radio-6'>
<dt>Billing</dt> <dl>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd> <dt>Billing</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem delectus at, voluptatibus dolores, nobis temporibus. Ipsum dignissimos corrupti qui nisi et alias totam commodi maiores hic possimus ipsam error, ullam.</dd>
</dl>
</label> </label>
</div> </li>
</dl> </ul>
<div class='action-group'> <div class='block-list__footer'>
<a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Add Access</a> <div class='action-group'>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a> <a v-on:click="closeModal('rolesModal')" class='action-group__action usa-button'>Select Access Role</a>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('rolesModal')">No Access</a>
</div>
</div> </div>
</form> </form>
@ -207,4 +222,4 @@
{% endblock %} {% endblock %}