diff --git a/README.md b/README.md index 311965be..6089986f 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,19 @@ To start the app locally in the foreground and watch for changes: script/dev_server +### Users + +There are currently six mock users for development: + +- Sam (a CCPO) +- Amanda +- Brandon +- Christina +- Dominick +- Erica + +To log in as one of them, navigate to `/login-dev?username=`. For example `/login-dev?username=amanda`. + ## Testing To run lint, static analysis, and unit tests: @@ -86,3 +99,17 @@ To render an icon use `{% module Icon('name') %}` in a template, where `name` is All icons used should be from the Noun Project, specifically [this collection](https://thenounproject.com/monstercritic/collection/tinicons-a-set-of-tiny-icons-perfect-for-ui-elemen/) if possible. SVG markup should be cleaned an minified, [Svgsus](http://www.svgs.us/) works well. + +## Deployment + +The `/login-dev` endpoint is protected by HTTP basic auth when deployed. This can be configured for NGINX following the instructions [here](https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-http-basic-authentication/). The following config should added within the main server block for the site: + +``` +location /login-dev { + auth_basic "Developer Access"; + auth_basic_user_file /etc/apache2/.htpasswd; + [proxy information should follow this] +} +``` + +The location block will require the same proxy pass configuration as other location blocks for the app. diff --git a/atst/handlers/dev.py b/atst/handlers/dev.py index 86c4e419..878aca11 100644 --- a/atst/handlers/dev.py +++ b/atst/handlers/dev.py @@ -6,7 +6,7 @@ _DEV_USERS = { "sam": { "id": "164497f6-c1ea-4f42-a5ef-101da278c012", "first_name": "Sam", - "last_name": "CCPO", + "last_name": "Seeceepio", "atat_role": "ccpo" }, 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) diff --git a/atst/ui_modules.py b/atst/ui_modules.py index 78f9e5ca..0ced7fad 100644 --- a/atst/ui_modules.py +++ b/atst/ui_modules.py @@ -16,10 +16,11 @@ class Icon(UIModule): "components/icon.html.to", svg=svg.read(), name=name, classes=classes) class SidenavItem(UIModule): - def render(self, label, href, active=False, icon=None): + def render(self, label, href, active=False, icon=None, subnav=None): return self.render_string( "navigation/_sidenav_item.html.to", label=label, href=href, active=active, - icon=icon) + icon=icon, + subnav=subnav) diff --git a/scss/atat.scss b/scss/atat.scss index 082fbab2..2810db63 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'; @@ -19,6 +20,7 @@ @import 'components/site_action'; @import 'components/empty_state'; @import 'components/alerts'; +@import 'components/modal'; @import 'sections/footer'; @import 'sections/login'; 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/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 { 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; + } + } + } +} 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); 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; + } +} diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss index bcff6c79..b3151653 100644 --- a/scss/elements/_inputs.scss +++ b/scss/elements/_inputs.scss @@ -4,10 +4,6 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss */ -from { - margin-bottom: 3rem; -} - select { border-radius: 0; -webkit-appearance: none; @@ -28,3 +24,19 @@ select { padding-bottom: 0.5rem; } } + +.usa-search { + padding-top: 2px; + margin-right: 2rem; + + input[type=search] { + height: 4.4rem; + font-size: 1.7rem; + color: $color-black; + } + + button { + min-height: 4.4rem; + } + +} \ No newline at end of file diff --git a/scss/elements/_panels.scss b/scss/elements/_panels.scss index 5b0c1220..e45ee1ec 100644 --- a/scss/elements/_panels.scss +++ b/scss/elements/_panels.scss @@ -43,4 +43,4 @@ padding: 0 ($gap * 4); } } -} +} \ No newline at end of file diff --git a/scss/elements/_sidenav.scss b/scss/elements/_sidenav.scss index 6f94f6ca..d4c67366 100644 --- a/scss/elements/_sidenav.scss +++ b/scss/elements/_sidenav.scss @@ -44,6 +44,7 @@ &--active { @include h5; color: $color-primary; + box-shadow: none; } } } @@ -55,9 +56,21 @@ li { .sidenav__link { @include h5; - padding: ($gap * .75) ($gap * 3); + padding: $gap * .75; + padding-left: 4.5rem; border: 0; font-weight: normal; + + .sidenav__link-icon { + @include icon-size(12); + flex-shrink: 0; + margin-right: 1.5rem; + margin-left: -3rem + } + + .sidenav__link-label { + padding-left: 0; + } } } } diff --git a/scss/elements/_tables.scss b/scss/elements/_tables.scss index 678770d6..9c917286 100644 --- a/scss/elements/_tables.scss +++ b/scss/elements/_tables.scss @@ -4,7 +4,7 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss */ -table { + table { @include panel-margin; min-width: 100%; diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index 36fa6d64..facba32b 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -9,25 +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; - margin-bottom: 0; -} - -h2 { - margin-top: 0; - color: $color-gray; + margin: ($gap * 2) 0; } a, diff --git a/static/icons/plus.svg b/static/icons/plus.svg new file mode 100644 index 00000000..c43ad77a --- /dev/null +++ b/static/icons/plus.svg @@ -0,0 +1 @@ + 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 %} 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 @@ +
+ +
diff --git a/templates/navigation/_sidenav_item.html.to b/templates/navigation/_sidenav_item.html.to index a41b7726..888245bc 100644 --- a/templates/navigation/_sidenav_item.html.to +++ b/templates/navigation/_sidenav_item.html.to @@ -6,4 +6,19 @@ {{label}} + + {% if subnav and active %} + + {% end %} diff --git a/templates/navigation/global_navigation.html.to b/templates/navigation/global_navigation.html.to index 17e8bf01..60991d47 100644 --- a/templates/navigation/global_navigation.html.to +++ b/templates/navigation/global_navigation.html.to @@ -1,10 +1,24 @@
diff --git a/templates/navigation/topbar.html.to b/templates/navigation/topbar.html.to index 9c6ef28c..856075ec 100644 --- a/templates/navigation/topbar.html.to +++ b/templates/navigation/topbar.html.to @@ -11,7 +11,7 @@ - Sam Seeceepio + {{ current_user["first_name"] + " " + current_user["last_name"] }} {% module Icon('avatar', classes='topbar__link-icon') %} diff --git a/templates/requests.html.to b/templates/requests.html.to index 653c01b3..1d107967 100644 --- a/templates/requests.html.to +++ b/templates/requests.html.to @@ -3,49 +3,63 @@ {% block content %} - +{% module Alert('Pending Financial Verification', + message="

Your next step is to create a Task Order (T.O.) associated with JEDI Cloud. Please consult a Contracting Officer (KO) or Contracting Officer Representative (COR) to help with this step.

" +) %}
+
+
+
+
+ + + +
+
+
+ +
+
+
+
-
- -
-

Requests New Request

-
- - - - - - - - - - - - - - {% for r in requests %} - - - {% end %} - - - - - - +
Order IDRequest DateRequesterTotal AppsStatusActions
{{ r['order_id'] }} - {% if r['is_new'] %}New - {{ r['date'] }}{{ r['full_name'] }}{{ r['app_count'] }}{{ r['status'] }}Download
+ + + + + + + + + + + + {% for r in requests %} + + {% end %} - -
Order IDRequest DateRequesterTotal AppsStatusActions
{{ r['order_id'] }} + {% if r['is_new'] %}New +
- - - -
+ {{ r['date'] }} + {{ r['full_name'] }} + {{ r['app_count'] }} + {{ r['status'] }} + Download + + {% end %} + +
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 %}