From c51d414197063b1dba646c1162d02df6e0fef734 Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Wed, 11 Dec 2019 20:33:57 +0000 Subject: [PATCH] Replace links in navigation Includes: - removing all styling of those links outside of GOV.UK Frontend (except for a few fixes due to their interaction with our design) - bringing together some duplicate styles into one block - changing how links are marked as selected, now they have multiple classes Fix Sass-lint error in navigation.scss --- .../stylesheets/components/navigation.scss | 72 +++++++++---------- app/navigation.py | 6 +- app/templates/main_nav.html | 22 +++--- app/templates/org_nav.html | 8 +-- app/templates/org_template.html | 2 +- app/templates/views/organisations/index.html | 2 +- app/templates/withnav_template.html | 2 +- 7 files changed, 52 insertions(+), 62 deletions(-) diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss index 08b6476d4..5b71a68dd 100644 --- a/app/assets/stylesheets/components/navigation.scss +++ b/app/assets/stylesheets/components/navigation.scss @@ -1,64 +1,74 @@ .navigation { + @include govuk-font($size: 19); padding: 0 $gutter 0 0; $padding-top: 14px; $padding-bottom: 11px; + &-service-name, + &-organisation-link { + display: inline-block; + overflow: hidden; + // aligning to the baseline with overflow: hidden adds to the parent's height + // aligning to the top doesn't + // see: https://stackoverflow.com/questions/23529369/why-does-x-overflowhidden-cause-extra-space-below#answer-51088033 + vertical-align: top; + white-space: nowrap; + text-overflow: ellipsis; + } + + &-service-switch, + &-service-back-to, + &-organisation-link { + + &:link, + &:visited { + text-decoration: none; + } + + &:hover { + text-decoration: underline; + } + + } + &-service { + @include govuk-font($size: 19); border-bottom: 1px solid $border-colour; margin: 0 0 10px; position: relative; - font-size: 0; &-name { - @include bold-19; + padding: $padding-top 0 $padding-bottom 0; - display: inline-block; max-width: 50%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + } &-switch { - @include core-19; - text-decoration: none; text-align: right; position: absolute; top: 0; right: 0; padding: $padding-top 0 $padding-bottom $gutter-half; - &:hover { - color: $link-hover-colour; - text-decoration: underline; - } - &:focus { outline: none; border-bottom: 1px solid $yellow; border-left: 10px solid $yellow; border-right: 3px solid $yellow; right: -3px; - color: $text-colour; } } &-back-to { - @include core-19; padding: $padding-top $gutter-half $padding-bottom 0; display: inline-block; - text-decoration: none; - - &:hover { - text-decoration: underline; - color: $link-hover-colour; - } } @@ -66,14 +76,7 @@ &-organisation-link { - @include core-19; - display: inline-block; max-width: 25%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: normal; - text-decoration: none; padding: $padding-top 20px $padding-bottom 0; margin-right: 7px; box-sizing: border-box; @@ -97,13 +100,8 @@ border-color: $secondary-text-colour; } - &:hover { - color: $link-hover-colour; - text-decoration: underline; - } - + // hack to make the focus style fit in the navigation bar &:focus { - color: $text-colour; outline: none; box-shadow: 0 1px 0 0 $focus-colour, -3px 0 0 0 $focus-colour, -3px 1px 0 0 $focus-colour; } @@ -111,7 +109,6 @@ } li { - @include core-19; margin: 0; list-style-type: none; } @@ -129,14 +126,9 @@ } &:hover { - color: $link-hover-colour; text-decoration: underline; } - &:focus { - color: $text-colour; - } - &.selected { @include bold-19; position: relative; diff --git a/app/navigation.py b/app/navigation.py index 503e47ebe..09b931173 100644 --- a/app/navigation.py +++ b/app/navigation.py @@ -7,7 +7,7 @@ class Navigation: mapping = {} exclude = {} - selected_attribute = "class=selected" + selected_class = "selected" def __init__(self): self.mapping = { @@ -32,7 +32,7 @@ class Navigation: def is_selected(self, navigation_item): if request.endpoint in self.mapping[navigation_item]: - return self.selected_attribute + return " " + self.selected_class return '' @staticmethod @@ -42,8 +42,6 @@ class Navigation: class HeaderNavigation(Navigation): - selected_attribute = "class=active" - mapping = { 'support': { 'bat_phone', diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html index 50e17b29d..e953e1332 100644 --- a/app/templates/main_nav.html +++ b/app/templates/main_nav.html @@ -5,32 +5,32 @@ diff --git a/app/templates/org_nav.html b/app/templates/org_nav.html index dcf8cba8f..7d7156ab4 100644 --- a/app/templates/org_nav.html +++ b/app/templates/org_nav.html @@ -1,10 +1,10 @@ diff --git a/app/templates/org_template.html b/app/templates/org_template.html index 8de05e493..be9994c86 100644 --- a/app/templates/org_template.html +++ b/app/templates/org_template.html @@ -10,7 +10,7 @@ {% if current_user.platform_admin %} All organisations {% endif %} -
+
{{ current_org.name }}
Switch service diff --git a/app/templates/views/organisations/index.html b/app/templates/views/organisations/index.html index 49cd82200..cc78ba5a1 100644 --- a/app/templates/views/organisations/index.html +++ b/app/templates/views/organisations/index.html @@ -11,7 +11,7 @@ {% block maincolumn_content %}
-
+
 
Switch service diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html index 069a88165..424f85836 100644 --- a/app/templates/withnav_template.html +++ b/app/templates/withnav_template.html @@ -15,7 +15,7 @@ {{ current_service.organisation.name }} {% endif %} {% endif %} -
+
{{ current_service.name }}
Switch service