From d382385b699e6c6d862cd0bbd595a05a7805b5b7 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 21 Jun 2019 14:29:52 +0100
Subject: [PATCH] Make things line up
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit aligns and spaces elements on the page to show which are
related to others.

This needs some adjustment now because we potentially have more things
on the page now – we need to make space for them.
---
 .../stylesheets/components/navigation.scss    | 41 +++++++++++++++++--
 app/templates/withoutnav_template.html        |  2 +-
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index 294f1fa90..eb4fe38bf 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -2,16 +2,21 @@
 
   padding: 0 $gutter 0 0;
 
+  $padding-top: 14px;
+  $padding-bottom: 11px;
+
   &-service {
 
     border-bottom: 1px solid $border-colour;
     margin: 0 0 10px;
     position: relative;
+    font-size: 0;
 
     &-name {
       @include bold-19;
-      margin: 0 0 0 0;
+      padding: $padding-top 0 $padding-bottom 0;
       display: inline-block;
+      vertical-align: top;
     }
 
     &-switch {
@@ -21,7 +26,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      padding: 13px 0 9px 15px;
+      padding: $padding-top 0 $padding-bottom $gutter-half;
 
       &:hover {
         color: $link-hover-colour;
@@ -38,9 +43,24 @@
 
     }
 
+    &-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;
+      }
+
+    }
+
   }
 
   &-organisation-link {
+
     @include core-19;
     display: inline-block;
     max-width: 25%;
@@ -52,9 +72,22 @@
     background-image: file-url("separator-2x.png");
     background-size: 6px 11px;
     background-repeat: no-repeat;
-    background-position: right 10px top 5px;
-    padding-right: 25px;
+    background-position: right 5px top ($padding-top + 5px);
+    padding: $padding-top 20px $padding-bottom 0;
+    margin-right: 7px;
     box-sizing: border-box;
+
+    &:hover {
+      color: $link-hover-colour;
+      text-decoration: underline;
+    }
+
+    &: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;
+    }
+
   }
 
   li {
diff --git a/app/templates/withoutnav_template.html b/app/templates/withoutnav_template.html
index 16fc3539d..cd4f318c5 100644
--- a/app/templates/withoutnav_template.html
+++ b/app/templates/withoutnav_template.html
@@ -4,7 +4,7 @@
   <div id="content">
     {% if current_service and current_service.active and current_user.is_authenticated and current_user.belongs_to_service(current_service.id) %}
     <div class="navigation-service">
-      <a href="{{ url_for('main.show_accounts_or_dashboard') }}">Back to {{ current_service.name }}</a>
+      <a href="{{ url_for('main.show_accounts_or_dashboard') }}" class="navigation-service-back-to">Back to {{ current_service.name }}</a>
     </div>
     {% endif %}
     <main role="main">