From cdd4a4eee10ecd94d1495546e15d1515fcb2125d Mon Sep 17 00:00:00 2001 From: graham-dds Date: Fri, 27 Dec 2019 13:10:00 -0500 Subject: [PATCH] Tidy sidenav --- styles/components/_global_navigation.scss | 14 -- styles/elements/_sidenav.scss | 235 ++++++++++------------ templates/components/sidenav_item.html | 2 +- templates/help/index.html | 43 ++-- templates/navigation/global_sidenav.html | 59 +++--- 5 files changed, 156 insertions(+), 197 deletions(-) diff --git a/styles/components/_global_navigation.scss b/styles/components/_global_navigation.scss index 63bf0d41..4b90c7dd 100644 --- a/styles/components/_global_navigation.scss +++ b/styles/components/_global_navigation.scss @@ -4,18 +4,4 @@ height: auto; box-shadow: $box-shadow; margin-bottom: -$footer-height * 2.5; - - .sidenav__link { - padding-right: $gap * 2; - - @include media($large-screen) { - padding-right: $gap * 2; - } - } - - &__context--portfolio { - .sidenav__link { - padding-right: $gap; - } - } } diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index d4a538f0..23a4f05f 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -1,5 +1,4 @@ .sidenav-container { - box-shadow: $box-shadow; overflow: hidden; position: relative; top: $topbar-height + $usa-banner-height; @@ -9,131 +8,11 @@ @extend .sidenav-container; width: $sidenav-collapsed-width; } +} - &__fixed { - position: fixed; - } - - .sidenav { - width: $sidenav-expanded-width; - - @include media($large-screen) { - margin: 0px; - } - - &__header { - padding: $gap ($gap * 2); - font-weight: bold; - border-bottom: 1px solid $color-gray-lighter; - - &--minimized { - @extend .sidenav__header; - - padding: $gap; - width: $sidenav-collapsed-width; - } - } - - &__title { - font-size: $h6-font-size; - text-transform: uppercase; - width: 50%; - color: $color-gray-dark; - opacity: 0.54; - white-space: nowrap; - padding: $gap; - display: inline-flex; - align-items: center; - } - - &__toggle { - font-size: $small-font-size; - color: $color-blue; - text-decoration: none; - padding: $gap; - display: inline-flex; - align-items: center; - - .toggle-arrows { - vertical-align: middle; - @include icon-size(20); - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - } - } - - ul { - &.sidenav__list--padded { - margin-top: 3 * $gap; - margin-bottom: $footer-height; - padding-bottom: ($gap * 2); - position: fixed; - overflow-y: scroll; - top: $topbar-height + $usa-banner-height + 4rem; - bottom: 0; - left: 0; - width: $sidenav-expanded-width; - background-color: $color-white; - } - - list-style: none; - padding: 0; - - li { - margin: 0; - display: block; - color: $color-black-light; - } - } - - &__divider--small { - display: block; - width: 4 * $gap; - border: 1px solid #d6d7d9; - margin-left: 2 * $gap; - margin-bottom: $gap; - } - - &__text { - margin: 2 * $gap; - color: $color-gray; - font-style: italic; - } - - &__link { - display: block; - padding: $gap ($gap * 2); - white-space: nowrap; - overflow: hidden; - color: $color-black-light; - text-decoration: none; - text-overflow: ellipsis; - - &--active { - @include h4; - - background-color: $color-aqua-lightest; - box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker; - position: relative; - color: $color-primary-darker; - } - - &:hover { - color: $color-primary; - background-color: $color-aqua-lightest; - - .sidenav__link-icon { - @include icon-style-active; - } - } - } - } +.sidenav { + width: $sidenav-expanded-width; + position: fixed; &--minimized { @extend .sidenav; @@ -141,4 +20,110 @@ width: $sidenav-collapsed-width; margin: 0px; } + + @include media($large-screen) { + margin: 0px; + } + + &__header { + padding: $gap ($gap * 2); + font-weight: bold; + border-bottom: 1px solid $color-gray-lighter; + + &--minimized { + @extend .sidenav__header; + + padding: $gap; + width: $sidenav-collapsed-width; + } + } + + &__title { + font-size: $h6-font-size; + text-transform: uppercase; + width: 50%; + color: $color-gray-dark; + opacity: 0.54; + white-space: nowrap; + padding: $gap; + display: inline-flex; + align-items: center; + } + + &__toggle { + font-size: $small-font-size; + color: $color-blue; + text-decoration: none; + padding: $gap; + display: inline-flex; + align-items: center; + } + + &__toggle-arrows { + vertical-align: middle; + @include icon-size(20); + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + } + + &__list { + margin-top: 3 * $gap; + margin-bottom: $footer-height; + padding-bottom: ($gap * 2); + position: fixed; + overflow-y: scroll; + top: $topbar-height + $usa-banner-height + 4rem; + bottom: 0; + left: 0; + width: $sidenav-expanded-width; + background-color: $color-white; + list-style: none; + padding: 0; + + &--no-header { + top: $topbar-height + $usa-banner-height; + } + } + + &__text { + margin: 2 * $gap; + color: $color-gray; + font-style: italic; + } + + &__item { + margin: 0; + display: block; + color: $color-black-light !important; + } + + &__link { + display: block; + padding: $gap ($gap * 2); + white-space: nowrap; + overflow: hidden; + color: $color-black-light !important; + text-decoration: none; + text-overflow: ellipsis; + + &--active { + @include h4; + + background-color: $color-aqua-lightest !important; + color: $color-primary-darker !important; + box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker; + position: relative; + } + + &:hover { + color: $color-primary !important; + background-color: $color-aqua-lightest; + } + } } diff --git a/templates/components/sidenav_item.html b/templates/components/sidenav_item.html index eace2ce2..82fec932 100644 --- a/templates/components/sidenav_item.html +++ b/templates/components/sidenav_item.html @@ -1,5 +1,5 @@ {% macro SidenavItem(label, href, active=False) -%} -
  • +
  • {{label}} diff --git a/templates/help/index.html b/templates/help/index.html index 89a25dd5..f34bf4f9 100644 --- a/templates/help/index.html +++ b/templates/help/index.html @@ -6,29 +6,26 @@ {% block content %}
    -
    -
      - - {{ SidenavItem("JEDI Cloud Help", - href = url_for("atst.helpdocs"), - active = not doc, - )}} - - {% for doc_item in docs %} - {% set active = doc and doc == doc_item %} - - {{ SidenavItem(doc_item | title, - href = url_for("atst.helpdocs", doc=doc_item), - active = active, - )}} - {% endfor %} - -
    +
    +
    +
    +
      + {{ SidenavItem("JEDI Cloud Help", + href = url_for("atst.helpdocs"), + active = not doc, + )}} + {% for doc_item in docs %} + {% set active = doc and doc == doc_item %} + {{ SidenavItem(doc_item | title, + href = url_for("atst.helpdocs", doc=doc_item), + active = active, + )}} + {% endfor %} +
    +
    +
    - -
    -

    @@ -40,16 +37,12 @@ {% endif %}

    -
    - {% block doc_content %}

    Welcome to the JEDI Cloud help documentation.

    {% endblock %} -
    -
    {% endblock %} diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html index 84ce99e6..3ec44a5d 100644 --- a/templates/navigation/global_sidenav.html +++ b/templates/navigation/global_sidenav.html @@ -1,39 +1,34 @@ {% from "components/icon.html" import Icon %} {% from "components/sidenav_item.html" import SidenavItem %} - -
    - +