From ab190cb585f8e0753775828a984c86852ee4434a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 17 Dec 2015 10:18:31 +0000
Subject: [PATCH 1/2] Make navigation column 1/4 width

---
 app/assets/stylesheets/_grids.scss  | 7 +++++++
 app/assets/stylesheets/main.scss    | 1 +
 app/templates/withnav_template.html | 4 ++--
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/stylesheets/_grids.scss

diff --git a/app/assets/stylesheets/_grids.scss b/app/assets/stylesheets/_grids.scss
new file mode 100644
index 000000000..f210f4693
--- /dev/null
+++ b/app/assets/stylesheets/_grids.scss
@@ -0,0 +1,7 @@
+.column-one-quarter {
+  @include grid-column(1/4);
+}
+
+.column-three-quarters {
+  @include grid-column(3/4);
+}
diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index 0c7b102ca..d6f59934b 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -28,6 +28,7 @@
 @import '../govuk_elements/public/sass/elements/tables';
 
 // Specific to this application
+@import 'grids';
 @import 'components/template-picker';
 @import 'components/placeholder';
 @import 'components/sms-message';
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html
index ecaca2eaf..43f4d7b10 100644
--- a/app/templates/withnav_template.html
+++ b/app/templates/withnav_template.html
@@ -3,10 +3,10 @@
 
 {% block fullwidth_content %}
 	<div class="grid-row">
-	  <div class="column-third">
+	  <div class="column-one-quarter">
 	    {{ main_nav() }}
 	  </div>
-	  <div class="column-two-thirds">
+	  <div class="column-three-quarters">
 	    {% block maincolumn_content %}{% endblock %}
 	  </div>
 	</div>

From 6bdc0d3fce78c8f35b46c459b4b8130b21e90a37 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Thu, 17 Dec 2015 10:28:15 +0000
Subject: [PATCH 2/2] Tidy up navigation code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- use SASS variables for colours and spacing
- make navigation an include not a macro (because it doesn’t take any
  parameters)
---
 app/assets/stylesheets/app.scss               | 14 +------
 .../stylesheets/components/navigation.scss    | 41 ++++++++++---------
 app/templates/main_nav.html                   |  6 +--
 app/templates/withnav_template.html           |  2 +-
 4 files changed, 27 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index 40523b81e..d52635054 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -40,20 +40,10 @@
   }
 }
 
-
-
 #global-header #logo {
-      white-space: nowrap;
+  white-space: nowrap;
 }
 
-
-.column-three-quarters {
-  @include grid-column(3/4);
-}
-
-
-
-
 a:visited {
-    color: #005ea5;
+  color: $link-colour;
 }
diff --git a/app/assets/stylesheets/components/navigation.scss b/app/assets/stylesheets/components/navigation.scss
index f11e2c541..5e462cd03 100644
--- a/app/assets/stylesheets/components/navigation.scss
+++ b/app/assets/stylesheets/components/navigation.scss
@@ -1,23 +1,26 @@
-#navigation {
-  padding: 50px 0 0 0;
-}
+.navigation {
 
-#navigation li {
-  @include core-16();
-  margin: 3px 0;
-}
+  padding: $gutter 0 0 0;
 
-#navigation ul {
-  border-bottom: 1px solid #777;
-  margin: 0 20px 0 0;
-  list-style-type: none;
-  padding: 0;
-}
+  li {
+    @include core-16();
+    margin: 3px 0;
+  }
 
-#navigation a:link,a:visited {
-  text-decoration: none;
-}
+  ul {
+    border-bottom: 1px solid $border-colour;
+    margin: 0 20px 0 0;
+    list-style-type: none;
+    padding: 0;
+  }
 
-#navigation a:hover {
-    color: #2e8aca;
-}
\ No newline at end of file
+  a:link,
+  a:visited {
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: $link-hover-colour;
+  }
+
+}
diff --git a/app/templates/main_nav.html b/app/templates/main_nav.html
index 8a671f55f..f252d98f3 100644
--- a/app/templates/main_nav.html
+++ b/app/templates/main_nav.html
@@ -1,5 +1,4 @@
-{% macro main_nav() %}
-  <nav id="navigation">
+<nav class="navigation">
   <h3><a href="{{ url_for('.dashboard') }}">Service name</a></h3>
   <ul>
     <li><a href="{{ url_for('.sendsms') }}">Send text messages</a></li>
@@ -16,5 +15,4 @@
   <ul>
     <li><a href="/user-profile">Your details</a></li>
   </ul>
-  </nav>
-{% endmacro %}
+</nav>
diff --git a/app/templates/withnav_template.html b/app/templates/withnav_template.html
index 43f4d7b10..732ba75ba 100644
--- a/app/templates/withnav_template.html
+++ b/app/templates/withnav_template.html
@@ -4,7 +4,7 @@
 {% block fullwidth_content %}
 	<div class="grid-row">
 	  <div class="column-one-quarter">
-	    {{ main_nav() }}
+	    {% include "main_nav.html" %}
 	  </div>
 	  <div class="column-three-quarters">
 	    {% block maincolumn_content %}{% endblock %}