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

Merge pull request #309 from dod-ccpo/fix/modal

Browse Source 
Fix/modal
This commit is contained in:
andrewdds 2018-09-21 09:23:53 -04:00 committed by GitHub
commit e37446f789
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 39 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
js/index.js
View File

@ -41,8 +41,18 @@ const app = new Vue({
CcpoApproval, CcpoApproval,
LocalDatetime LocalDatetime
}, },
mounted: function() { mounted: function() {
this.$on('modalOpen', isOpen => {
if (isOpen) {
document.body.className += ' modal-open'
} else {
document.body.className = document.body.className.replace(' modal-open', '')
}
})
const modalOpen = document.querySelector("#modalOpen") const modalOpen = document.querySelector("#modalOpen")
if (modalOpen) { if (modalOpen) {
const modal = modalOpen.getAttribute("data-modal") const modal = modalOpen.getAttribute("data-modal")
this.openModal(modal) this.openModal(modal)

2
js/mixins/modal.js
View File

@ -2,9 +2,11 @@ export default {
methods: { methods: {
closeModal: function(name) { closeModal: function(name) {
this.modals[name] = false this.modals[name] = false
this.$emit('modalOpen', false)
}, },
openModal: function (name) { openModal: function (name) {
this.modals[name] = true this.modals[name] = true
this.$emit('modalOpen', true)
} }
}, },
data: function() { data: function() {

4
styles/components/_global_layout.scss
View File

@ -8,10 +8,6 @@
> footer { > footer {
margin-top: auto; margin-top: auto;
} }
&.modalOpen {
overflow-y: hidden;
}
} }
.global-layout { .global-layout {

27
styles/components/_modal.scss
View File

@ -1,5 +1,11 @@
$fixed-footer-height: 5rem + ($gap * 4); $fixed-footer-height: 5rem + ($gap * 4);
body {
&.modal-open {
overflow-y: hidden;
}
}
.modal { .modal {
position: fixed; position: fixed;
z-index: 3; z-index: 3;
@ -11,6 +17,7 @@ $fixed-footer-height: 5rem + ($gap * 4);
.modal__container { .modal__container {
height: 100vh; height: 100vh;
max-height: 100vh;
} }
.modal__dialog { .modal__dialog {
@ -36,7 +43,13 @@ $fixed-footer-height: 5rem + ($gap * 4);
background-color: $color-white; background-color: $color-white;
padding: $gap * 2; padding: $gap * 2;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: scrollbar;
@include ie-only {
max-height: calc(100vh - #{$gap * 8});
}
@include media($medium-screen) { @include media($medium-screen) {
padding: $gap * 4; padding: $gap * 4;
@ -52,9 +65,19 @@ $fixed-footer-height: 5rem + ($gap * 4);
.modal__dismiss { .modal__dismiss {
position: absolute; position: absolute;
top: 0; top: $gap;
right: 0; right: $gap;
width: 8rem; width: 8rem;
@include media($medium-screen) {
top: $gap * 2;
right: $gap * 2;
}
@include media($large-screen) {
top: $gap * 4;
right: $gap * 4;
}
} }
.block-list { .block-list {

2
templates/base.html
View File

@ -10,7 +10,7 @@
{% endassets %} {% endassets %}
<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico"> <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
</head> </head>
<body class="{% if g.modalOpen %} modalOpen{% endif %}"> <body>
<div id='app-root'> <div id='app-root'>

24
templates/styleguide.html
View File

@ -7,6 +7,7 @@
{% block content %} {% block content %}
<div id='modalOpen' data-modal='styleguideModal'></div>
{% call Modal(name='styleguideModal', dismissable=True) %} {% call Modal(name='styleguideModal', dismissable=True) %}
<h1>A modal dialog</h1> <h1>A modal dialog</h1>
@ -130,29 +131,6 @@
</div> </div>
<form> <form>
<textinput inline-template validation='dollars' value='1231231'>
<div v-bind:class="['usa-input usa-input--validation--' + validation, { 'usa-input--error': showError, 'usa-input--success': showValid }]">
<label for='basic-text-1'>
Dollars Text Input
<span class='usa-input__help'>
This is some help text to explain what this form field is and why you should fill it out.
</span>
<template v-if='showError'>{{ Icon('alert') }}</template>
<template v-if='showValid'>{{ Icon('ok') }}</template>
</label>
<masked-input
v-on:input='onInput'
v-on:change='onChange'
v-model='renderedValue'
id='basic-text-1'
type='text'
ref='input'
placeholder='$'
:guide="true"
:mask="mask">
</masked-input>
</div>
</textinput>
<div class='usa-input usa-input--error'> <div class='usa-input usa-input--error'>
<label for='basic-text-2'> <label for='basic-text-2'>