Refactor and move layouts and templates

Author: edwardhorsford

app.js

@@ -51,6 +51,8 @@ app.use(cookieParser());
 // Nunjucks configuration for application
 const appViews = [
   path.join(__dirname, 'app/views/'),
+  path.join(__dirname, 'app/views/_templates'),
+  path.join(__dirname, 'app/views/_includes'),
   path.join(__dirname, 'docs/views/'),
   path.join(__dirname, 'lib/prototype-admin/'),
   path.join(__dirname, 'node_modules/nhsuk-frontend/packages/components'),

app/views/includes/scripts.html app/views/_includes/scripts.htmlapp/views/includes/scripts.html renamed to app/views/_includes/scripts.html

@@ -0,0 +1,17 @@
+
+{% extends "layout.html" %}
+
+
+{% block content %}
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-two-thirds">
+    {% if formAction or isForm %}
+      <form action="{{formAction or 'GET'}}">
+    {% endif %}
+    {% block pageContent %}{% endblock %}
+    {% if formAction or isForm %}
+      </form>
+    {% endif %}
+  </div>
+</div>
+{% endblock %}

app/views/_templates/layout-app.html

@@ -13,9 +13,12 @@
 {% endblock %}
 
 <!-- Set the page title -->
-{% block pageTitle %}
-  NHS.UK prototype kit
-{% endblock %}
+{% block pageTitle -%}
+  {%- if pageHeading -%}
+    {{- pageHeading }} -
+  {%- endif -%}
+  {{- serviceName }} - NHS
+{%- endblock %}
 
 <!-- Edit the header -->
 <!-- Header code examples can be found at https://service-manual.nhs.uk/design-system/components/header -->
@@ -51,7 +54,7 @@
 {% block bodyEnd %}
   {% block scripts %}
     <!-- Custom JavaScript files can be added to this file -->
-    {% include "includes/scripts.html" %}
+    {% include "_includes/scripts.html" %}
     <!-- For adding page specific JavsScript -->
     {% block pageScripts %}{% endblock %}
   {% endblock %}

app/views/layout.html app/views/_templates/layout.htmlapp/views/layout.html renamed to app/views/_templates/layout.html

@@ -1,41 +1,14 @@
-<!-- Use this page as the index for your project -->
 
-<!-- ADDING CUSTOM CSS - Add your custom CSS or Sass in /app/assets/sass/main.scss -->
+{% extends 'layout-app.html' %}
 
-<!-- Extends the layout from /views/layout.html -->
-{% extends 'layout.html' %}
-<!--
-  In /views/layout.html you can:
-    - change the header and footer
-    - add custom CSS and JavaScript
--->
+{% set formAction = "foo" %}
 
-<!-- Set the page title -->
-{% block pageTitle %}
-  {{serviceName}}
-{% endblock %}
-
-<!-- For adding a breadcrumb or back link -->
-<!-- Code examples can be found at https://service-manual.nhs.uk/design-system/components/breadcrumbs and https://service-manual.nhs.uk/design-system/components/back-link -->
-{% block beforeContent %}
-{% endblock %}
 
+{% block pageContent %}
 
-<!-- For adding page content -->
-<!-- Page layout code can be found at https://service-manual.nhs.uk/design-system/styles/layout -->
-{% block content %}
-  <div class="nhsuk-grid-row">
-    <div class="nhsuk-grid-column-two-thirds">
-
-      <!-- Change the page title here -->
-      <h1>
-        {{serviceName}}
-        <span class="nhsuk-caption-xl nhsuk-caption--bottom">Prototype kit {{version}}</span>
-      </h1>
-
-
-      <!-- End of content -->
+<h1>
+  {{serviceName}}
+  <span class="nhsuk-caption-xl nhsuk-caption--bottom">Prototype kit {{version}}</span>
+</h1>
 
-    </div>
-  </div>
 {% endblock %}

app/views/index.html

@@ -33,7 +33,7 @@
 
 {% block bodyEnd %}
   {% block scripts %}
-    {% include "includes/scripts.html" %}
+    {% include "_includes/scripts.html" %}
     {% block pageScripts %}{% endblock %}
   {% endblock %}
 {% endblock %}