Merge pull request #478 from alphagov/move-breadcrumb-outside-main

Move breadcrumb outside the main element
alphagov · Jun 13, 2017 · 8e34ec7 · 8e34ec7
2 parents 0532ec9 + e8c625a
commit 8e34ec7
Show file tree

Hide file tree

Showing 12 changed files with 30 additions and 32 deletions.
diff --git a/app/views/guide_alpha_beta.html b/app/views/guide_alpha_beta.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Alpha and beta banners — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Alpha and beta banners

diff --git a/app/views/guide_buttons.html b/app/views/guide_buttons.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Buttons — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Buttons

diff --git a/app/views/guide_colour.html b/app/views/guide_colour.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Colour — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Colour

diff --git a/app/views/guide_data.html b/app/views/guide_data.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Data — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Data

diff --git a/app/views/guide_errors.html b/app/views/guide_errors.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Errors and validation — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Errors and validation

diff --git a/app/views/guide_form_elements.html b/app/views/guide_form_elements.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Form elements — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Form elements

diff --git a/app/views/guide_icons_images.html b/app/views/guide_icons_images.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Icons and images — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Icons and images

diff --git a/app/views/guide_layout.html b/app/views/guide_layout.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Layout — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Layout

diff --git a/app/views/guide_typography.html b/app/views/guide_typography.html
@@ -2,12 +2,10 @@
 
 {% block page_title %}Typography — GOV.UK elements{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
 <main id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <h1 class="heading-xlarge">
     <span class="heading-secondary">GOV.UK elements</span>
     Typography

diff --git a/app/views/index.html b/app/views/index.html
@@ -4,12 +4,9 @@
   GOV.UK elements
 {% endblock %}
 
-{% block content %}
-
+{% block main_content %}
 <main class="elements-index" id="content" role="main" tabindex="-1">
 
-  {% include "includes/breadcrumb.html" %}
-
   <div class="grid-row">
     <div class="column-two-thirds">
 

diff --git a/app/views/layout.html b/app/views/layout.html
@@ -10,6 +10,13 @@
   {% include "includes/elements_tracking.html" %}
 {% endblock %}
 
+{% block content %}
+<div class="site-wrapper">
+  {% include "includes/breadcrumb.html" %}
+  {% block main_content %}{% endblock %}
+</div>
+{% endblock %}
+
 {% block cookie_message %}
   <p>{{cookieText | safe }}</p>
 {% endblock %}

diff --git a/assets/sass/elements-documentation.scss b/assets/sass/elements-documentation.scss
@@ -16,9 +16,21 @@
 
 // ==========================================================================
 // Elements page styles
+// These are example styles, used only for the elements pages
 // ==========================================================================
 
-// These are example styles, used only for the elements pages
+// Add a class to wrap the <main> element
+// This is so the breadcrumb can sit outside <main>
+.site-wrapper {
+  @extend %site-width-container;
+
+  // Override margins set on #content
+  // This is a kludge to prevent a breaking change to govuk_elements_sass
+  // where @extend %site-width-container; is set for #content, so we need to override its margins
+  #content {
+    margin: 0;
+  }
+}
 
 .elements-index {
   // Reduce top and bottom margins