From 70d7f994f0c9056da7fc294fe118f77c41ea7adf Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 14:14:21 -0400 Subject: [PATCH 01/14] Begin adding progress bar links --- scss/atat.scss | 1 + scss/sections/_progress_menu.scss | 48 +++++++++++++++++++++++++++++++ templates/styleguide.html.to | 9 ++++++ 3 files changed, 58 insertions(+) create mode 100644 scss/sections/_progress_menu.scss diff --git a/scss/atat.scss b/scss/atat.scss index 532330bb..b8c90c19 100644 --- a/scss/atat.scss +++ b/scss/atat.scss @@ -19,5 +19,6 @@ @import 'sections/main'; @import 'sections/topbar'; @import 'sections/sidenav'; +@import 'sections/progress_menu'; @import 'sections/footer'; @import 'sections/login'; diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss new file mode 100644 index 00000000..1fd82197 --- /dev/null +++ b/scss/sections/_progress_menu.scss @@ -0,0 +1,48 @@ +.progress-menu { + display: table; + margin: 0 auto; + padding-bottom: $gap * 2; + + ul { + list-style: none; + } + + &__item { + float: left; + font-weight: $font-bold; + + a { + display: block; + padding: $gap ($gap * 2); + color: $color-black; + text-decoration: none; + margin: 0 ($gap * 2); + + &:hover { + color: $color-blue; + } + } + + &:after { + display: inline-block; + height: 2px; + content: ".."; + color: $color-gray-lightest; + text-shadow: none; + background-color: $color-gray-light; + position: relative; + top: -4rem; + } + + a:before { + content: "o"; + display: block; + text-align: center; + } + + &--complete:before { + + } + + } +} \ No newline at end of file diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 62231d8e..ac46e781 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -26,6 +26,15 @@ {% block content %}
+ + +
This is a panel content From 805c0b64c79948930e73e1583be45b68c250093a Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 14:34:21 -0400 Subject: [PATCH 02/14] Update placeholder icons for each link --- scss/sections/_progress_menu.scss | 17 +++++++++++++---- templates/styleguide.html.to | 4 ++-- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 1fd82197..861f0dc2 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -31,17 +31,26 @@ text-shadow: none; background-color: $color-gray-light; position: relative; - top: -4rem; + top: -5.5rem; } - a:before { - content: "o"; + &:before { display: block; text-align: center; } - &--complete:before { + &--active:before { + content: "O"; + } + &--complete:before { + content: "\2714"; + color: $color-blue; + } + + &--incomplete:before { + content: "\2609"; + color: $color-gray-light; } } diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index ac46e781..54adf7c0 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -28,10 +28,10 @@
From 804497f64ac903a176f6518f4079f37750dd76b5 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 16:14:19 -0400 Subject: [PATCH 03/14] Style progress menu bar links and circles --- scss/sections/_progress_menu.scss | 38 ++++++++++++++++++++++++++----- templates/requests_new.html.to | 9 +++----- 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 861f0dc2..24a3a33f 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -1,42 +1,68 @@ .progress-menu { display: table; margin: 0 auto; - padding-bottom: $gap * 2; + padding: ($gap * 2) 0; ul { list-style: none; + margin: 0; + padding: 0; } &__item { float: left; font-weight: $font-bold; + width: 19%; + position: relative; a { display: block; - padding: $gap ($gap * 2); + position: relative; + padding: ($gap * 4) ($gap * 2); + margin: 0 ($gap * 2); color: $color-black; text-decoration: none; - margin: 0 ($gap * 2); + text-align: center; + z-index: 2; &:hover { color: $color-blue; } } + &:first-child:after { + display: none; + } + &:after { display: inline-block; height: 2px; - content: ".."; + content: " "; color: $color-gray-lightest; text-shadow: none; background-color: $color-gray-light; - position: relative; - top: -5.5rem; + position: absolute; + top: 11px; + width: 100%; + right: 50%; + border-right: 22px solid transparent; + border-left: 22px solid transparent; + background-clip: padding-box; + z-index: 1; } &:before { + content: ""; display: block; text-align: center; + width: 20px; + height: 20px; + border: 1px solid $color-gray; + border-radius: 100%; + position: absolute; + left: 50%; + margin-left: -10px; + z-index: 1; } &--active:before { diff --git a/templates/requests_new.html.to b/templates/requests_new.html.to index 25431889..d46758ab 100644 --- a/templates/requests_new.html.to +++ b/templates/requests_new.html.to @@ -1,14 +1,11 @@ {% extends "base.html.to" %} -{% block sidenav %} -{% include 'requests/sidebar.html.to' %} -{% end %} - - {% block content %} -
+
+ + {% include 'requests/menu.html.to' %}
From b0ec5ad0ab5fdde980d7466fbdf02c71445a7a29 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 16:14:53 -0400 Subject: [PATCH 04/14] Add template partial for menu for requests --- templates/requests/menu.html.to | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 templates/requests/menu.html.to diff --git a/templates/requests/menu.html.to b/templates/requests/menu.html.to new file mode 100644 index 00000000..6b36b08a --- /dev/null +++ b/templates/requests/menu.html.to @@ -0,0 +1,11 @@ +
+ +
\ No newline at end of file From ed13cac99597b24c4ae32d23165038edc704ec7b Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 16:21:19 -0400 Subject: [PATCH 05/14] Style step states to circles --- scss/sections/_progress_menu.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 24a3a33f..6a04e672 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -36,7 +36,7 @@ &:after { display: inline-block; - height: 2px; + height: 1px; content: " "; color: $color-gray-lightest; text-shadow: none; @@ -66,17 +66,19 @@ } &--active:before { - content: "O"; + border: 2px solid $color-blue; } &--complete:before { content: "\2714"; - color: $color-blue; + background-color: $color-blue; + border: 2px solid $color-blue; + color: $color-white; + font-size: $h6-font-size; } &--incomplete:before { - content: "\2609"; - color: $color-gray-light; + border: 2px solid $color-gray-light; } } From 157561076c1003df5d5c22a2939feb80d2876e8d Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 16:37:34 -0400 Subject: [PATCH 06/14] Add styles to handle multiple number of items --- scss/sections/_progress_menu.scss | 26 +++++++++++++++++++++----- templates/requests/menu.html.to | 2 +- templates/styleguide.html.to | 28 ++++++++++++++++++++++++---- 3 files changed, 46 insertions(+), 10 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 6a04e672..6b97b636 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -1,7 +1,5 @@ .progress-menu { - display: table; - margin: 0 auto; - padding: ($gap * 2) 0; + display: block; ul { list-style: none; @@ -9,11 +7,29 @@ padding: 0; } + &--three { + .progress-menu__item { + width: 32%; + } + } + + &--four { + .progress-menu__item { + width: 24%; + } + } + + &--five { + .progress-menu__item { + width: 19%; + } + } + &__item { - float: left; + display: inline-block; font-weight: $font-bold; - width: 19%; position: relative; + vertical-align: top; a { display: block; diff --git a/templates/requests/menu.html.to b/templates/requests/menu.html.to index 6b36b08a..741ed7cf 100644 --- a/templates/requests/menu.html.to +++ b/templates/requests/menu.html.to @@ -1,4 +1,4 @@ -
+
    {% for i,s in enumerate(screens) %}
  • diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 54adf7c0..1039747d 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -27,14 +27,34 @@
    -
    + + + + + +
    This is a panel content From 5b1490a7e6f6e0a4f2ea2ae2219912d0c98fe6c9 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 16:48:12 -0400 Subject: [PATCH 07/14] Add checkmark icon to styleguide --- static/icons/checkmark.svg | 1 + templates/styleguide.html.to | 1 + 2 files changed, 2 insertions(+) create mode 100644 static/icons/checkmark.svg diff --git a/static/icons/checkmark.svg b/static/icons/checkmark.svg new file mode 100644 index 00000000..b9a7ee4d --- /dev/null +++ b/static/icons/checkmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/styleguide.html.to b/templates/styleguide.html.to index 1039747d..739c7151 100644 --- a/templates/styleguide.html.to +++ b/templates/styleguide.html.to @@ -120,6 +120,7 @@ {% module Icon('alert') %} 'alert'    {% module Icon('link') %} 'link'    {% module Icon('ok') %} 'ok'    + {% module Icon('checkmark') %} 'checkmark'   
    From 4d14ef73a3b01591ab5eb5ec604aa0591edc12d8 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Thu, 19 Jul 2018 16:57:19 -0400 Subject: [PATCH 08/14] Update check mark icon for completes in progress menu --- scss/sections/_progress_menu.scss | 4 ++-- static/icons/checkmark.svg | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 6b97b636..1b057893 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -86,11 +86,11 @@ } &--complete:before { - content: "\2714"; + content: url('/static/icons/checkmark.svg'); background-color: $color-blue; border: 2px solid $color-blue; - color: $color-white; font-size: $h6-font-size; + padding: 1px 2px; } &--incomplete:before { diff --git a/static/icons/checkmark.svg b/static/icons/checkmark.svg index b9a7ee4d..798c9989 100644 --- a/static/icons/checkmark.svg +++ b/static/icons/checkmark.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From 141b933cf9ca3632e2677b18b28e895b0b9d6ce4 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Fri, 20 Jul 2018 10:22:17 -0400 Subject: [PATCH 09/14] Convert pixels to rem --- scss/sections/_progress_menu.scss | 12 ++++++------ templates/requests_new.html.to | 4 ++++ 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 1b057893..429faab6 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -58,11 +58,11 @@ text-shadow: none; background-color: $color-gray-light; position: absolute; - top: 11px; + top: 1.1rem; width: 100%; right: 50%; - border-right: 22px solid transparent; - border-left: 22px solid transparent; + border-right: 2.2rem solid transparent; + border-left: 2.2rem solid transparent; background-clip: padding-box; z-index: 1; } @@ -71,13 +71,13 @@ content: ""; display: block; text-align: center; - width: 20px; - height: 20px; + width: 2rem; + height: 2rem; border: 1px solid $color-gray; border-radius: 100%; position: absolute; left: 50%; - margin-left: -10px; + margin-left: -1rem; z-index: 1; } diff --git a/templates/requests_new.html.to b/templates/requests_new.html.to index d46758ab..d41b266f 100644 --- a/templates/requests_new.html.to +++ b/templates/requests_new.html.to @@ -1,5 +1,9 @@ {% extends "base.html.to" %} +{% block sidenav %} +{% include 'requests/sidebar.html.to' %} +{% end %} + {% block content %} From 8875a75fc28d6062c7c9623d5ef2697ff93a90ec Mon Sep 17 00:00:00 2001 From: Andrew Croce Date: Fri, 20 Jul 2018 08:23:01 -0400 Subject: [PATCH 10/14] Add UI Method to check if the current URL path matches a link href --- atst/app.py | 2 ++ atst/ui_methods.py | 2 ++ 2 files changed, 4 insertions(+) create mode 100644 atst/ui_methods.py diff --git a/atst/app.py b/atst/app.py index 07f40411..625e2a74 100644 --- a/atst/app.py +++ b/atst/app.py @@ -16,6 +16,7 @@ from atst.home import home from atst.api_client import ApiClient from atst.sessions import RedisSessions from atst import ui_modules +from atst import ui_methods ENV = os.getenv("TORNADO_ENV", "dev") @@ -101,6 +102,7 @@ def make_app(config, deps, **kwargs): cookie_secret=config["default"]["COOKIE_SECRET"], debug=config["default"].getboolean("DEBUG"), ui_modules=ui_modules, + ui_methods=ui_methods, **kwargs, ) app.config = config diff --git a/atst/ui_methods.py b/atst/ui_methods.py new file mode 100644 index 00000000..d5c5bf78 --- /dev/null +++ b/atst/ui_methods.py @@ -0,0 +1,2 @@ +def matchesPath(self, href): + return self.request.uri.startswith(href) From 181a4139f68df1932dfb8933a3ffe9a8e9d6c9c8 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Fri, 20 Jul 2018 11:45:12 -0400 Subject: [PATCH 11/14] Set active link color for current screens --- scss/sections/_progress_menu.scss | 5 +++++ templates/requests/menu.html.to | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index 429faab6..da9dcf03 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -44,6 +44,7 @@ &:hover { color: $color-blue; } + } &:first-child:after { @@ -98,4 +99,8 @@ } } +} + +.nav-link--active { + color: $color-blue !important; } \ No newline at end of file diff --git a/templates/requests/menu.html.to b/templates/requests/menu.html.to index 741ed7cf..6b4e054f 100644 --- a/templates/requests/menu.html.to +++ b/templates/requests/menu.html.to @@ -2,7 +2,9 @@
      {% for i,s in enumerate(screens) %}
    • - + {{ s['title'] }}
    • From 56c211c79afc0921a87c818af2b0fd2f8c349eb5 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Fri, 20 Jul 2018 11:45:39 -0400 Subject: [PATCH 12/14] Remove sidebar --- templates/requests_new.html.to | 5 ----- 1 file changed, 5 deletions(-) diff --git a/templates/requests_new.html.to b/templates/requests_new.html.to index d41b266f..39a54f39 100644 --- a/templates/requests_new.html.to +++ b/templates/requests_new.html.to @@ -1,10 +1,5 @@ {% extends "base.html.to" %} -{% block sidenav %} -{% include 'requests/sidebar.html.to' %} -{% end %} - - {% block content %}
      From c78116b45e59e9fff5c165c8177720a40204b93d Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Fri, 20 Jul 2018 14:18:57 -0400 Subject: [PATCH 13/14] Remove purple style for visited links --- scss/elements/_typography.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/scss/elements/_typography.scss b/scss/elements/_typography.scss index 87022e95..ea945766 100644 --- a/scss/elements/_typography.scss +++ b/scss/elements/_typography.scss @@ -4,7 +4,7 @@ * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss */ -h1, h2, h3, h4, h5, h6 { + h1, h2, h3, h4, h5, h6 { font-family: $font-sans; .usa-button { @@ -23,14 +23,17 @@ h2 { margin-top: 0; } - a, a > span { transition: - background 0.2s, - border 0.2s, - box-shadow 0.2s, - color 0.2s, + background 0.2s, + border 0.2s, + box-shadow 0.2s, + color 0.2s, +} + +a:visited { + color: $color-blue; } dt { From b1b6322197fc0f4f1801ce68053027ee26dd6063 Mon Sep 17 00:00:00 2001 From: Luis Cielak Date: Fri, 20 Jul 2018 14:19:16 -0400 Subject: [PATCH 14/14] Style menu bar active link --- scss/sections/_progress_menu.scss | 17 +++++++---------- templates/requests/menu.html.to | 2 +- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/scss/sections/_progress_menu.scss b/scss/sections/_progress_menu.scss index da9dcf03..3ca7bb72 100644 --- a/scss/sections/_progress_menu.scss +++ b/scss/sections/_progress_menu.scss @@ -36,17 +36,18 @@ position: relative; padding: ($gap * 4) ($gap * 2); margin: 0 ($gap * 2); - color: $color-black; text-decoration: none; text-align: center; z-index: 2; - - &:hover { - color: $color-blue; - } - + color: $color-black; } + a.active { + color: $color-blue; + } + + + &:first-child:after { display: none; } @@ -99,8 +100,4 @@ } } -} - -.nav-link--active { - color: $color-blue !important; } \ No newline at end of file diff --git a/templates/requests/menu.html.to b/templates/requests/menu.html.to index 6b4e054f..f7378753 100644 --- a/templates/requests/menu.html.to +++ b/templates/requests/menu.html.to @@ -3,7 +3,7 @@ {% for i,s in enumerate(screens) %}
    • {{ s['title'] }}