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

Merge pull request #227 from dod-ccpo/member-roles

Browse Source 
Member roles
This commit is contained in:
andrewdds 2018-08-29 10:49:12 -04:00 committed by GitHub
commit 5c09c05ec9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 193 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/mixins/modal.js
View File

@ -11,6 +11,7 @@ export default {
return {
modals: {
styleguideModal: false,
rolesModal: false,
newProjectConfirmation: false,
pendingFinancialVerification: false,
pendingCCPOApproval: false,

66
styles/components/_modal.scss
View File

@ -1,3 +1,5 @@
$fixed-footer-height: 5rem + ($gap * 4);
.modal {
position: fixed;
z-index: 3;
@ -7,13 +9,20 @@
bottom: 0;
background-color: $color-overlay;
.modal__container {
height: 100vh;
}
.modal__dialog {
padding: $gap;
height: 100vh;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-width: 80rem;
max-height: 100%;
position: relative;
@include media($medium-screen) {
padding: $gap * 2;
@ -26,14 +35,11 @@
.modal__body {
background-color: $color-white;
padding: $gap * 2;
flex-grow: 1;
width: 100%;
overflow-y: auto;
max-width: 80rem;
position: relative;
@include media($medium-screen) {
padding: $gap * 4;
flex-grow: 0;
}
h1, h2 {
@ -50,6 +56,56 @@
right: 0;
width: 8rem;
}
.block-list {
margin: -$gap * 2;
padding-bottom: $fixed-footer-height;
@include media($medium-screen) {
margin: -$gap * 4;
}
.block-list__header {
border-top: 0;
}
.block-list__item {
&:last-child {
border: 0;
}
}
.block-list__footer {
height: $fixed-footer-height;
margin: 0;
padding: 0 ($gap * 2);
display: flex;
justify-content: space-between;
position: absolute;
bottom: $gap;
left: $gap;
right: $gap;
background: $color-white;
border-top: 1px solid $color-gray-light;
@include media($medium-screen) {
bottom: $gap * 2;
left: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
bottom: $gap * 4;
left: $gap * 4;
right: $gap * 4;
}
.action-group {
margin: 0;
}
}
}
}
}

26
styles/elements/_block_lists.scss
View File

@ -1,7 +1,7 @@
@mixin block-list {
@include panel-margin;
> ul {
ul, dl {
list-style: none;
margin: 0;
padding: 0;
@ -95,6 +95,30 @@
.block-list__item {
@include block-list-item;
&.block-list__item--selectable {
> label {
margin: 0;
max-width: none;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
&::before {
flex-shrink: 0;
}
&:hover {
color: $color-primary;
}
}
input:checked {
+ label {
color: $color-primary;
}
}
}
}
.block-list__footer {

8
styles/elements/_typography.scss
View File

@ -18,11 +18,15 @@ h1, h2, h3, h4, h5, h6 {
font-family: $font-sans;
margin: ($gap * 2) 0;
+ .subtitle * {
margin-top: 0;
.subtitle,
+ .subtitle {
color: $color-gray;
}
+ .subtitle, * {
margin-top: 0;
}
}
.h1 { @include h1; }

24
templates/components/modal.html
View File

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

94
templates/member_edit.html
View File

@ -1,6 +1,7 @@
{% extends "base.html" %}
{% from "components/icon.html" import Icon %}
{% from "components/modal.html" import Modal %}
{% block content %}
@ -52,6 +53,85 @@
</div>
</form>
{% call Modal(name='rolesModal', dismissable=False) %}
<div class="block-list">
<header class="block-list__header">
<h2 class="block-list__title">
Environment access for Danny Knight
<div class='subtitle'>Project Name - Environment Name</div>
</h2>
</header>
<form method="post" action="">
<ul>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-1' />
<label for='radio-1'>
<dl>
<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>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-2' />
<label for='radio-2'>
<dl>
<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>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-3' />
<label for='radio-3'>
<dl>
<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>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-4' />
<label for='radio-4'>
<dl>
<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>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-5' />
<label for='radio-5'>
<dl>
<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>
</li>
<li class='block-list__item block-list__item--selectable'>
<input type='radio' name='radio' id='radio-6' />
<label for='radio-6'>
<dl>
<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>
</li>
</ul>
<div class='block-list__footer'>
<div class='action-group'>
<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>
</form>
</div>
{% endcall %}
<div is='toggler' default-visible class='block-list project-list-item'>
<template slot-scope='{ isVisible, toggle }'>
<header class='block-list__header'>
@ -68,7 +148,7 @@
Development
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access </span><a href="#" class="icon-link">set role</a>
<span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
</div>
</li>
<li class='block-list__item project-list-item__environment'>
@ -76,7 +156,7 @@
Sandbox
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access</span><a href="#" class="icon-link">set role</a>
<span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
</div>
</li>
<li class='block-list__item project-list-item__environment'>
@ -84,7 +164,7 @@
Production
</span>
<div class='project-list-item__environment__actions'>
<span class="label label--success">Billing</span><a href="#" class="icon-link">set role</a>
<span class="label label--success">Billing</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
</div>
</li>
</ul>
@ -107,7 +187,7 @@
Development
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access </span><a href="#" class="icon-link">set role</a>
<span class="label">no access </span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
</div>
</li>
<li class='block-list__item project-list-item__environment'>
@ -115,7 +195,7 @@
Sandbox
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access</span><a href="#" class="icon-link">set role</a>
<span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
</div>
</li>
<li class='block-list__item project-list-item__environment'>
@ -123,7 +203,7 @@
Production
</span>
<div class='project-list-item__environment__actions'>
<span class="label">no access</span><a href="#" class="icon-link">set role</a>
<span class="label">no access</span><button v-on:click="openModal('rolesModal')" type="button" class="icon-link">set role</button>
</div>
</li>
</ul>
@ -142,4 +222,4 @@
{% endblock %}
{% endblock %}