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

Merge pull request #89 from dod-ccpo/ui/modal-dialogs

Browse Source 
Ui/modal dialogs
This commit is contained in:
andrewdds 2018-07-24 09:40:54 -04:00 committed by GitHub
commit 0a3c1a00df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 117 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
atst/ui_methods.py
View File

@ -5,3 +5,12 @@ def dev(self):
def matchesPath(self, href): def matchesPath(self, href):
return self.request.uri.startswith(href) return self.request.uri.startswith(href)
def modal(self, body):
return self.render_string(
"components/modal.html.to",
body=body)
def modalOpen(self):
# For now, just check a dummy URL param
return self.get_argument("modal", False)

2
scss/atat.scss
View File

@ -12,6 +12,7 @@
@import 'elements/tables'; @import 'elements/tables';
@import 'elements/icons'; @import 'elements/icons';
@import 'elements/sidenav'; @import 'elements/sidenav';
@import 'elements/action_group';
@import 'components/layout'; @import 'components/layout';
@import 'components/topbar'; @import 'components/topbar';
@ -19,6 +20,7 @@
@import 'components/site_action'; @import 'components/site_action';
@import 'components/empty_state'; @import 'components/empty_state';
@import 'components/alerts'; @import 'components/alerts';
@import 'components/modal';
@import 'sections/footer'; @import 'sections/footer';
@import 'sections/login'; @import 'sections/login';

1
scss/components/_alerts.scss
View File

@ -44,6 +44,7 @@
.alert__title { .alert__title {
@include h3; @include h3;
margin-top: 0;
} }
.alert__content { .alert__content {

4
scss/components/_layout.scss
View File

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

47
scss/components/_modal.scss Normal file
View File

@ -0,0 +1,47 @@
.modal {
position: fixed;
z-index: 3;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: $color-overlay;
.modal__dialog {
padding: $gap;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@include media($medium-screen) {
padding: $gap * 2;
}
@include media($large-screen) {
padding: $gap * 4;
}
.modal__body {
background-color: $color-white;
padding: $gap * 2;
flex-grow: 1;
overflow-y: auto;
max-width: 80rem;
@include media($medium-screen) {
padding: $gap * 4;
flex-grow: 0;
}
h1, h2 {
@include h3;
}
:first-child {
margin-top: 0;
}
}
}
}

1
scss/core/_variables.scss
View File

@ -106,6 +106,7 @@ $color-base: $color-black-light;
$color-focus: $color-gray-light; $color-focus: $color-gray-light;
$color-visited: $color-purple; $color-visited: $color-purple;
$color-overlay: rgba(#000, 0.5);
$color-shadow: rgba(#000, 0.3); $color-shadow: rgba(#000, 0.3);
$color-transparent: rgba(#000, 0); $color-transparent: rgba(#000, 0);

14
scss/elements/_action_group.scss Normal file
View File

@ -0,0 +1,14 @@
.action-group {
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-top: $gap * 4;
.action-group__action {
margin: 0 0 0 ($gap * 2);
}
&:last-child {
margin-bottom: $gap * 3;
}
}

21
scss/elements/_typography.scss
View File

@ -9,23 +9,14 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
p {
margin: 0 0 ($gap * 2) 0;
max-width: 45em;
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $font-sans; font-family: $font-sans;
margin: ($gap * 2) 0;
.usa-button {
position: relative;
bottom: 0.5rem;
left: 1rem;
}
}
h1 {
margin-top: 0.5em;
}
h2 {
margin-top: 0;
} }
a, a,

4
templates/base.html.to
View File

@ -13,7 +13,7 @@
{% end %} {% end %}
<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> <body class="{% if modalOpen() %} modalOpen{% end %}">
{% include 'navigation/topbar.html.to' %} {% include 'navigation/topbar.html.to' %}
<div class='global-layout'> <div class='global-layout'>
@ -29,6 +29,8 @@
</div> </div>
{% include 'footer.html.to' %} {% include 'footer.html.to' %}
{% block modal %}{% end %}
</body> </body>
</html> </html>

7
templates/components/modal.html.to Normal file
View File

@ -0,0 +1,7 @@
<div class='modal'>
<div class='modal__dialog' role='dialog' aria-modal='true'>
<div class='modal__body'>
{% raw body %}
</div>
</div>
</div>

24
templates/styleguide.html.to
View File

@ -1,5 +1,22 @@
{% extends "base.html.to" %} {% extends "base.html.to" %}
{% block modal %}
{% if modalOpen() %}
{% apply modal %}
<h1>A modal dialog</h1>
<p>We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.</p>
<p>I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!</p>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button'>Close</a>
<a href='/styleguide' class='action-group__action'>This also closes the modal</a>
</div>
{% end %}
{% end %}
{% end %}
{% block content %} {% block content %}
{% module Alert('A Warning Alert', {% module Alert('A Warning Alert',
@ -7,7 +24,7 @@
<p>This is a message. It is a very important message. Please note, <strong>proper semantic markup is required</strong> here, such as paragraph tags. Don't omit paragraph tags!</p>\ <p>This is a message. It is a very important message. Please note, <strong>proper semantic markup is required</strong> here, such as paragraph tags. Don't omit paragraph tags!</p>\
<p>Also note the same for actions below. You'll need to include the full link markup.</p>\ <p>Also note the same for actions below. You'll need to include the full link markup.</p>\
", ",
actions="<a href='/styleguide'>Do something</a>", actions="<a href='/styleguide?modal=True'>Open a Modal Dialog</a>",
level='warning' level='warning'
) %} ) %}
@ -191,5 +208,10 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class='action-group'>
<a href='/styleguide' class='action-group__action usa-button usa-button-big'>Action Group Button</a>
<a href='/styleguide' class='action-group__action'>Action group link</a>
</div>
</div> </div>
{% end %} {% end %}