From 963ffc612a9f64c23444beae3ad8b3329c03a488 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:23:39 -0400 Subject: [PATCH 01/10] modal block and body classnames --- templates/base.html.to | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/templates/base.html.to b/templates/base.html.to index f3412da9..fd4fa3a8 100644 --- a/templates/base.html.to +++ b/templates/base.html.to @@ -13,7 +13,7 @@ {% end %} - + {% include 'navigation/topbar.html.to' %}
@@ -29,6 +29,8 @@
{% include 'footer.html.to' %} + + {% block modal %}{% end %} From 19f71c33e019810da185f7b429830fee4a3ab1ac Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:23:51 -0400 Subject: [PATCH 02/10] modal template --- templates/components/modal.html.to | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 templates/components/modal.html.to diff --git a/templates/components/modal.html.to b/templates/components/modal.html.to new file mode 100644 index 00000000..4330adbd --- /dev/null +++ b/templates/components/modal.html.to @@ -0,0 +1,7 @@ +
+ +
From a13727107a5a08cf92ace3521c5d666dccfb8870 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:24:16 -0400 Subject: [PATCH 03/10] Add modal sample and link to styleguide Add action-group sample --- templates/styleguide.html.to | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 38c042b2..473d745b 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -1,5 +1,22 @@ {% extends "base.html.to" %} +{% block modal %} + {% if modalOpen() %} + {% apply modal %} +

A modal dialog

+ +

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.

+

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!

+ +
+ Close + This also closes the modal +
+ {% end %} + {% end %} +{% end %} + + {% block content %} {% module Alert('A Warning Alert', @@ -7,7 +24,7 @@

This is a message. It is a very important message. Please note, proper semantic markup is required here, such as paragraph tags. Don't omit paragraph tags!

\

Also note the same for actions below. You'll need to include the full link markup.

\ ", - actions="Do something", + actions="Open a Modal Dialog", level='warning' ) %} @@ -191,5 +208,10 @@ + +
+ Action Group Button + Action group link +
{% end %} From 270de201a6479700aff5eaeba701458088605a0c Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:24:49 -0400 Subject: [PATCH 04/10] UI methods for rendering a modal, and dummy function to check if a modal is open --- atst/ui_methods.py | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/atst/ui_methods.py b/atst/ui_methods.py index e335b941..0d652fbb 100644 --- a/atst/ui_methods.py +++ b/atst/ui_methods.py @@ -5,3 +5,12 @@ def dev(self): def matchesPath(self, 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) From 0dd90f7cc7d5892d09332052648a6f23aa0f783f Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:25:02 -0400 Subject: [PATCH 05/10] modal styled --- scss/components/_modal.scss | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 scss/components/_modal.scss diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss new file mode 100644 index 00000000..868476b9 --- /dev/null +++ b/scss/components/_modal.scss @@ -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; + } + } + } +} From 900544bffd506f3601a0916176105a450854ac06 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:25:21 -0400 Subject: [PATCH 06/10] Add action-group element --- scss/atat.scss | 1 + scss/elements/_action_group.scss | 14 ++++++++++++++ 2 files changed, 15 insertions(+) create mode 100644 scss/elements/_action_group.scss diff --git a/scss/atat.scss b/scss/atat.scss index 082fbab2..08130614 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -12,6 +12,7 @@ @import 'elements/tables'; @import 'elements/icons'; @import 'elements/sidenav'; +@import 'elements/action_group'; @import 'components/layout'; @import 'components/topbar'; diff --git a/scss/elements/_action_group.scss b/scss/elements/_action_group.scss new file mode 100644 index 00000000..dfc47776 --- /dev/null +++ b/scss/elements/_action_group.scss @@ -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; + } +} From 9f13737e8f467ee3b1241e7e4b07629f1a0aaa5f Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:25:38 -0400 Subject: [PATCH 07/10] some typography fixes --- scss/components/_alerts.scss | 1 + scss/elements/_typography.scss | 21 ++++++--------------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/scss/components/_alerts.scss b/scss/components/_alerts.scss index a0030547..f48042b9 100644 --- a/scss/components/_alerts.scss +++ b/scss/components/_alerts.scss @@ -44,6 +44,7 @@ .alert__title { @include h3; + margin-top: 0; } .alert__content { diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index e720402c..facba32b 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -9,23 +9,14 @@ -moz-osx-font-smoothing: grayscale; } +p { + margin: 0 0 ($gap * 2) 0; + max-width: 45em; +} + h1, h2, h3, h4, h5, h6 { font-family: $font-sans; - - .usa-button { - position: relative; - bottom: 0.5rem; - left: 1rem; - } - -} - -h1 { - margin-top: 0.5em; -} - -h2 { - margin-top: 0; + margin: ($gap * 2) 0; } a, From 35156f196c234afa432f50944f32c693f93ed87c Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:25:51 -0400 Subject: [PATCH 08/10] hide y overflow when a modal is open --- scss/components/_layout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/components/_layout.scss b/scss/components/_layout.scss index ee8308af..19c6be9f 100644 --- a/scss/components/_layout.scss +++ b/scss/components/_layout.scss @@ -8,6 +8,10 @@ body { > footer { margin-top: auto; } + + &.modalOpen { + overflow-y: hidden; + } } .global-layout { From 22655dbd298caf1e4ae1ac2c4b2e8722e870e74e Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:26:01 -0400 Subject: [PATCH 09/10] overlay background color --- scss/core/_variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/core/_variables.scss b/scss/core/_variables.scss index 4380ac69..7bc7d759 100644 --- a/scss/core/_variables.scss +++ b/scss/core/_variables.scss @@ -106,6 +106,7 @@ $color-base: $color-black-light; $color-focus: $color-gray-light; $color-visited: $color-purple; +$color-overlay: rgba(#000, 0.5); $color-shadow: rgba(#000, 0.3); $color-transparent: rgba(#000, 0); From 788753f2db0cdf9b23f90988c8530dd7a5070afb Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Mon, 23 Jul 2018 14:26:12 -0400 Subject: [PATCH 10/10] import modal sass --- scss/atat.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/atat.scss b/scss/atat.scss index 08130614..2810db63 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -20,6 +20,7 @@ @import 'components/site_action'; @import 'components/empty_state'; @import 'components/alerts'; +@import 'components/modal'; @import 'sections/footer'; @import 'sections/login';