Merge pull request #65 from nhsuk/rationalise-layouts

Rationalise layouts
nhsuk · Apr 29, 2024 · 4c8db2f · 4c8db2f
2 parents 9c081f4 + 31b80c0
commit 4c8db2f
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 92 deletions.
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -14,26 +14,34 @@
     <title>{{ title }}</title>
   </head>
   <body>
-    {% block header %}
-      {{ skipLink({
-        "URL": "#maincontent",
-        "heading": "Skip to main content"
-      }) }}
-
-      {{ header({
-        "showNav": "false",
-        "showSearch": "false",
-        "homeHref": baseUrl
-      }) }}
-    {% endblock %}
-
     {% block body %}
-      {% block content %}
-        <main role="main">
-          {{ content | safe }}
-        </main>
+      {% block skiplink %}
+        {{ skipLink({
+          "URL": "#maincontent",
+          "heading": "Skip to main content"
+        }) }}
+      {% endblock skiplink %}
+
+      {% block header %}
+        {{ header({
+          "showNav": "false",
+          "showSearch": "false",
+          "homeHref": baseUrl
+        }) }}
       {% endblock %}
+
+      {% block container %}
+        <div class="nhsuk-width-container">
+          <main role="main" id="maincontent" class="nhsuk-main-wrapper">
+            {% block main %}
+              {{ content | safe }}
+            {% endblock main %}
+          </main>
+        </div>
+      {% endblock container %}
+
+      {% block footer %}{% endblock %}
+
     {% endblock body %}
-    {% block footer %}{% endblock %}
   </body>
 </html>
diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk
@@ -1,46 +1,26 @@
-{% extends "./base.njk" %}
+{% extends "./sidebar.njk" %}
 
 {%- from "./partials/side-navigation.njk" import appSideNavigation %}
 
-{% block content %}
-  <div class="nhsuk-width-container">
-    <div class="nhsuk-grid-row">
-      <div class="nhsuk-grid-column-one-third">
-        {{ appSideNavigation({
-          currentPath: page.url | url,
-          classes: 'app-side-navigation--desktop nhsuk-u-padding-top-6',
-          sections: [
-            {
-              heading: {
-                text: "Components"
-              },
-              items: collections.component
-            }
-          ]
-        }) }}
-      </div>
-      <div class="nhsuk-grid-column-two-thirds">
-        <main id="main-content" class="nhsuk-main-wrapper" role="main">
-          <h1 class="nhsuk-heading-xl">
-            {% if not isIndex %}<span class="nhsuk-caption-xl">Components</span>{% endif %}
-            {{ title }}
-          </h1>
-          {{ content | safe }}
+{% set sidebar %}
+  {{ appSideNavigation({
+    classes: 'nhsuk-u-padding-top-6',
+    currentPath: page.url | url,
+    sections: [
+      {
+        heading: {
+          text: "Components"
+        },
+        items: collections.component
+      }
+    ]
+  }) }}
+{% endset %}
 
-          {{ appSideNavigation({
-            classes: 'app-side-navigation--mobile',
-            currentPath: page.url | url,
-            sections: [
-              {
-                heading: {
-                  text: "Components"
-                },
-                items: collections.component
-              }
-            ]
-          }) }}
-        </main>
-      </div>
-    </div>
-  </div>
+{% block main %}
+  <h1 class="nhsuk-heading-xl">
+    {% if tags and "component" in tags %}<span class="nhsuk-caption-xl">Components</span>{% endif %}
+    {{ title }}
+  </h1>
+  {{ content | safe }}
 {% endblock %}
diff --git a/docs/_includes/layouts/plain.njk b/docs/_includes/layouts/plain.njk
@@ -1,7 +1,11 @@
 {% extends "./base.njk" %}
 
-{% block content %}
-  <h1>{{ title }}</h1>
+{% block body %}
+  <main role="main">
+    {% block main %}
+      <h1>{{ title }}</h1>
 
-  {{ content | safe }}
+      {{ content | safe }}
+    {% endblock %}
+  </main>
 {% endblock %}
diff --git a/docs/_includes/layouts/sidebar.njk b/docs/_includes/layouts/sidebar.njk
@@ -0,0 +1,30 @@
+{% extends "./base.njk" %}
+
+{% block container %}
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-one-third">
+        {% block sidebar_desktop %}
+          <div class="app-side-navigation--desktop">
+            {{ sidebar | safe }}
+          </div>
+        {% endblock %}
+      </div>
+
+      <div class="nhsuk-grid-column-two-thirds">
+        <main role="main" id="maincontent" class="nhsuk-main-wrapper">
+          {% block main %}
+            {{ content | safe }}
+          {% endblock main %}
+        </main>
+
+        {# Sidebar nav is at the bottom for mobile #}
+        {% block sidebar_mobile %}
+          <div class="app-side-navigation--mobile">
+            {{ sidebar | safe }}
+          </div>
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+{% endblock %}
diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
@@ -11,22 +11,3 @@
 
 // Import all styles specific for the design system docs
 @import "docs/assets/css/components/side-navigation";
-
-/**
- * Custom style for the homepage
- */
-
-.app-section {
-  @include nhsuk-responsive-padding(6, "bottom");
-  @include nhsuk-responsive-padding(6, "top");
-
-  @include mq($until: desktop) {
-    .nhsuk-grid-column-one-half:last-child {
-      padding-top: nhsuk-spacing(3);
-    }
-  }
-}
-
-.app-section--white {
-  background-color: $color_nhsuk-white;
-}
diff --git a/docs/index.njk b/docs/index.njk
@@ -14,17 +14,13 @@
   }) }}
 {% endblock %}
 
-{% block content %}
-  <div class="app-section">
-    <div class="nhsuk-width-container">
-      <div class="nhsuk-grid-row">
-        <div class="nhsuk-grid-column-full">
-          {{ card({
-            title: "Components",
-            href: "./components/"
-          }) }}
-        </div>
-      </div>
+{% block main %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-full">
+      {{ card({
+        title: "Components",
+        href: "./components/"
+      }) }}
     </div>
   </div>
 {% endblock %}