From 19221b8277e8a65017782648b521b85733083cfd Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 26 Jul 2018 12:14:48 -0400 Subject: [PATCH 1/6] Add dummy request/approval route --- atst/app.py | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/atst/app.py b/atst/app.py index 393edbc5..b91544ba 100644 --- a/atst/app.py +++ b/atst/app.py @@ -91,6 +91,13 @@ def make_app(config, deps, **kwargs): {"requests_client": deps["requests_client"]}, name="requests_submit", ), + # Dummy request/approval screen + url( + r"/request/approval", + Main, + {"page": "request_approval"}, + name="request_approval" + ), url(r"/users", Main, {"page": "users"}, name="users"), url(r"/reports", Main, {"page": "reports"}, name="reports"), url(r"/calculator", Main, {"page": "calculator"}, name="calculator"), From 080e5b9bc52bd908d5a83df2f9696275caf259dd Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 26 Jul 2018 12:16:24 -0400 Subject: [PATCH 2/6] Move some partials around to more descriptive locations --- scss/atat.scss | 4 ++-- scss/{sections => components}/_footer.scss | 4 ++-- scss/{sections => components}/_progress_menu.scss | 0 3 files changed, 4 insertions(+), 4 deletions(-) rename scss/{sections => components}/_footer.scss (89%) rename scss/{sections => components}/_progress_menu.scss (100%) diff --git a/scss/atat.scss b/scss/atat.scss index e8cbb614..772d5e57 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -21,7 +21,7 @@ @import 'components/empty_state'; @import 'components/alerts'; @import 'components/modal'; +@import 'components/footer'; +@import 'components/progress_menu.scss'; -@import 'sections/footer'; @import 'sections/login'; -@import 'sections/progress_menu.scss'; diff --git a/scss/sections/_footer.scss b/scss/components/_footer.scss similarity index 89% rename from scss/sections/_footer.scss rename to scss/components/_footer.scss index b6161917..964ff393 100644 --- a/scss/sections/_footer.scss +++ b/scss/components/_footer.scss @@ -1,6 +1,6 @@ -footer { +.app-footer { background-color: $color-gray-lightest; border-top: 1px solid $color-gray-lighter; padding-left: $gap*4; padding-bottom: $gap*2; -} \ No newline at end of file +} diff --git a/scss/sections/_progress_menu.scss b/scss/components/_progress_menu.scss similarity index 100% rename from scss/sections/_progress_menu.scss rename to scss/components/_progress_menu.scss From ee534dcdf8bd8c0cd5dd74ddb95a5e096f195230 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 26 Jul 2018 12:16:42 -0400 Subject: [PATCH 3/6] Add classname to global footer, so its styles aren't overly specific --- templates/footer.html.to | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/footer.html.to b/templates/footer.html.to index b86f9b97..e715749a 100644 --- a/templates/footer.html.to +++ b/templates/footer.html.to @@ -1,3 +1,3 @@ -
+
Joint Enterprise Defense Infrastructure
-
\ No newline at end of file +
From 599a8f7b2659b9d0c56182a0b11d9a48425cb8ab Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 26 Jul 2018 12:23:50 -0400 Subject: [PATCH 4/6] labels and diffs --- scss/atat.scss | 2 ++ scss/elements/_diff.scss | 36 ++++++++++++++++++++++++++++++++++++ scss/elements/_labels.scss | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 scss/elements/_diff.scss create mode 100644 scss/elements/_labels.scss diff --git a/scss/atat.scss b/scss/atat.scss index 772d5e57..e3ab7868 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -13,6 +13,8 @@ @import 'elements/tables'; @import 'elements/sidenav'; @import 'elements/action_group'; +@import 'elements/labels'; +@import 'elements/diff'; @import 'components/layout'; @import 'components/topbar'; diff --git a/scss/elements/_diff.scss b/scss/elements/_diff.scss new file mode 100644 index 00000000..85ac4002 --- /dev/null +++ b/scss/elements/_diff.scss @@ -0,0 +1,36 @@ +[class*='diff--'] { + border-left-style: solid; + border-left-width: ($gap / 2); + padding-left: $gap / 2; + margin: ($gap / 2) 0; + + &::before { + font-weight: bold; + padding-right: $gap; + display: inline-block; + width: 1.8rem; + text-align: center; + } +} + +.diff--removed { + background-color: $color-red-lightest; + border-left-color: $color-red-dark; + text-decoration: line-through; + text-decoration-color: $color-overlay; + + &::before { + content: '-'; + color: $color-red-dark; + } +} + +.diff--added { + background-color: $color-aqua-lightest; + border-left-color: $color-aqua-dark; + + &::before { + content: '+'; + color: $color-aqua-dark; + } +} diff --git a/scss/elements/_labels.scss b/scss/elements/_labels.scss new file mode 100644 index 00000000..104894e4 --- /dev/null +++ b/scss/elements/_labels.scss @@ -0,0 +1,34 @@ +/* + * Labels + * @see https://designsystem.digital.gov/components/labels/ + * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_labels.scss + */ + +.label { + @include h5; + display: inline-block; + height: 2.4rem; + line-height: 2.4rem; + color: $color-white; + background-color: $color-gray; + vertical-align: middle; + margin: 0 $gap; + padding: 0 $gap; + border-radius: $gap / 2; + + &.label--info { + background-color: $color-primary; + } + + &.label--warning { + background-color: $color-gold; + } + + &.label--error { + background-color: $color-red; + } + + &.label--success { + background-color: $color-green; + } +} From 222c082533c582afa960481c36f7bbda92a0de2d Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 26 Jul 2018 12:24:31 -0400 Subject: [PATCH 5/6] Assorted style fixes/tweaks --- scss/components/_layout.scss | 1 + scss/core/_util.scss | 4 ++++ scss/elements/_action_group.scss | 7 ++++++- scss/elements/_inputs.scss | 16 ++++++++++++++-- scss/elements/_panels.scss | 8 ++++++-- scss/elements/_typography.scss | 22 +++++++++++++++++++--- 6 files changed, 50 insertions(+), 8 deletions(-) diff --git a/scss/components/_layout.scss b/scss/components/_layout.scss index d459e445..d79890c5 100644 --- a/scss/components/_layout.scss +++ b/scss/components/_layout.scss @@ -27,6 +27,7 @@ body { margin: $gap; max-width: $site-max-width; overflow-x: hidden; + flex-grow: 1; @include media($medium-screen) { margin: $gap * 2; diff --git a/scss/core/_util.scss b/scss/core/_util.scss index 9b716bee..48957b6c 100644 --- a/scss/core/_util.scss +++ b/scss/core/_util.scss @@ -13,6 +13,10 @@ width: 1px; } +.hide { + @include hide; +} + @mixin unhide { border: unset; clip: unset; diff --git a/scss/elements/_action_group.scss b/scss/elements/_action_group.scss index dfc47776..acf2c1fc 100644 --- a/scss/elements/_action_group.scss +++ b/scss/elements/_action_group.scss @@ -4,8 +4,13 @@ align-items: center; margin-top: $gap * 4; - .action-group__action { + .usa-button, + a { margin: 0 0 0 ($gap * 2); + + @include media($medium-screen) { + margin: 0 0 0 ($gap * 4); + } } &:last-child { diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index 768b4210..275ad54a 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -60,7 +60,7 @@ .usa-input { margin: ($gap * 4) ($gap * 2) ($gap * 4) 0; - @includ media($medium-screen) { + @include media($medium-screen) { margin: ($gap * 4) 0; } @@ -215,7 +215,19 @@ select { .form-col { .usa-input { - margin: 0 ($gap * 4) 0 0; + margin: 0 ($gap * 4); + } + + &:first-child { + .usa-input { + margin-left: 0; + } + } + + &:last-child { + .usa-input { + margin-right: 0; + } } } } diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index ba88cd48..e1fc6e2f 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -45,10 +45,14 @@ } .panel__heading { - margin: ($gap * 2) 0; + margin: $gap * 2; + + @include media($medium-screen) { + margin: $gap * 4; + } h1, h2, h3, h4, h5, h6 { margin: 0; } } -} \ No newline at end of file +} diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index 8a292e73..10f0846a 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -24,6 +24,13 @@ h1, h2, h3, h4, h5, h6 { } +.h1 { @include h1; } +.h2 { @include h2; } +.h3 { @include h3; } +.h4 { @include h4; } +.h5 { @include h5; } +.h6 { @include h6; } + a, a:hover { transition: @@ -37,9 +44,18 @@ a:visited { color: $color-blue; } -dt { - display: inline; - font-weight: bold; +dl { + dt { + display: inline; + font-weight: bold; + } + dd { + -webkit-margin-start: 0; + } + + > div { + margin-bottom: $gap * 2; + } } .subtitle { From bb207806ee309ca3401a2ceefa8fe80355f26183 Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Thu, 26 Jul 2018 12:24:49 -0400 Subject: [PATCH 6/6] Request approval UI and styles --- scss/atat.scss | 1 + scss/sections/_request_approval.scss | 97 ++++++++++++++ templates/request_approval.html.to | 186 +++++++++++++++++++++++++++ templates/requests.html.to | 7 +- 4 files changed, 289 insertions(+), 2 deletions(-) create mode 100644 scss/sections/_request_approval.scss create mode 100644 templates/request_approval.html.to diff --git a/scss/atat.scss b/scss/atat.scss index e3ab7868..e282ef53 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -27,3 +27,4 @@ @import 'components/progress_menu.scss'; @import 'sections/login'; +@import 'sections/request_approval'; diff --git a/scss/sections/_request_approval.scss b/scss/sections/_request_approval.scss new file mode 100644 index 00000000..5769d5d9 --- /dev/null +++ b/scss/sections/_request_approval.scss @@ -0,0 +1,97 @@ +.request-approval { + .request-approval__heading { + display: flex; + flex-direction: row; + align-items: center; + } + + .request-approval__info-columns { + flex-wrap: wrap; + + .col { + flex-basis: 100%; + + @include media($medium-screen) { + flex-basis: 50%; + + &:first-child { + padding-right: $gap * 2; + } + &:last-child { + padding-left: $gap * 2; + } + } + } + } + + .request-approval__columns__heading { + &:first-child { + @include media($medium-screen) { + margin-top: 0; + } + } + } + + .approval-log { + ol { + list-style: none; + margin: 0; + padding: 0; + + li { + padding: $gap * 2; + border-top: 1px dashed $color-gray-light; + + &:first-child { + border-top-style: solid; + } + + @include media($medium-screen) { + padding: $gap * 4; + } + } + } + .approval-log__log-item { + display: flex; + flex-direction: column-reverse; + justify-content: flex-end; + + @include media($medium-screen) { + flex-direction: row-reverse; + } + + .approval-log__log-item__header { + @include h4; + margin: 0 0 $gap 0; + } + + .approval-log__log-item__timestamp { + @include h5; + margin-right: $gap * 2; + color: $color-gray; + flex-grow: 0; + + @include media($large-screen) { + margin-right: $gap * 4; + } + } + + .approval-log__behalfs { + display: flex; + flex-direction: row; + + .approval-log__behalf { + margin-right: $gap * 2; + + @include media($medium-screen) { + margin-right: $gap * 4; + } + + span { + display: block; + } + } + } + } + } +} diff --git a/templates/request_approval.html.to b/templates/request_approval.html.to new file mode 100644 index 00000000..db81049a --- /dev/null +++ b/templates/request_approval.html.to @@ -0,0 +1,186 @@ +{% extends "base.html.to" %} + +{% block content %} + +
+ {# A {% module Alert() %} goes here, if alerting be needed #} + +
+
+
+

Request #1234567890

+ Pending +
+ +
+

Ongoing maintainence for Death Star (a moon-sized Imperial military battlestation armed with a planet-destroying superlaser). Its definitely hasn't been sabotaged from the start.

+
+
+

Information About Requestor

+
+
+
Name
+
Firmus Piett
+
+ +
+
E-mail
+
piett@empire.mil
+
+ +
+
Phone Number
+
(123) 456-7890
+
+ +
+
Location
+
Death Star
+
+
+
+ +
+

Funding Information

+
+
+
Task Order Number
+
4523542345322345234
+
+ +
+
Funding Type
+
Previously: Modest Destructive Power
+
Changed to: Absolute Destructive Power
+
+
+
+
+
+
+ +
+
+

Approval Log

+
+
+
+
    +
  1. +
    +
    +

    Denied by Darth Vader

    +

    "You have failed me for the last time, Admiral. Captain Piett. Yes, my lord. Make ready to land out troops beyond the energy shield and deploy the fleet so that nothing gets off that system."

    + +
    +
    +

    Mission Owner approval on behalf of:

    + Grand Moff Tarkin + tarkin@empire.mil + (234) 567-8901 +
    + +
    +

    CCPO approval on behalf of:

    + Emperor Palpatine + palpatine@empire.mil + (345) 678-9012 +
    +
    +
    + +
    +
    +
    2. + + +
  2. +
    +
    +

    Denied by Darth Vader

    +

    "You have failed me for the last time, Admiral. Captain Piett. Yes, my lord. Make ready to land out troops beyond the energy shield and deploy the fleet so that nothing gets off that system."

    + +
    +
    +

    Mission Owner approval on behalf of:

    + Grand Moff Tarkin + tarkin@empire.mil + (234) 567-8901 +
    + +
    +

    CCPO approval on behalf of:

    + Emperor Palpatine + palpatine@empire.mil + (345) 678-9012 +
    +
    +
    + +
    +
    +
    3. +
+
+
+
+ +
+
+

Here is some good text explaining what the CCPO needs to do in order to approve the request. This text should also explain why we are asking for multiple people's names and the risk of boiling the ocean.

+ + {# All instances of .usa-input groups here should be replaced with {% module TextInput(wtforms.fields.Field) %} #} + +
+ + +
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+
+ +
+ Approve Request + Deny Request + Cancel +
+
+
+ +{% end %} + diff --git a/templates/requests.html.to b/templates/requests.html.to index 2f873e64..3d420a88 100644 --- a/templates/requests.html.to +++ b/templates/requests.html.to @@ -22,7 +22,7 @@ - +
@@ -47,7 +47,10 @@ - + {% end %}
{{ r['full_name'] }} {{ r['app_count'] }} {{ r['status'] }}Download + Download + Approval +