Update to article template structure

ukparliament · Mar 28, 2018 · 54840e0 · 54840e0
1 parent df81373
commit 54840e0
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/stylesheets/components/_article.scss b/src/stylesheets/components/_article.scss
@@ -1,7 +1,15 @@
+.article--wrapper {
+  @include media($desktop) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
 article {
   margin: $base-spacing-unit-extra-large 0 $base-spacing-unit-small;
 
   @media (min-width: $desktop) {
+    flex: 1;
     margin-top: ($base-spacing-unit-large * 2);
   }
 }
diff --git a/src/stylesheets/components/_aside.scss b/src/stylesheets/components/_aside.scss
@@ -2,9 +2,10 @@ aside {
   margin: $base-spacing-unit-extra-large 0 $base-spacing-unit-small;
 
   @include media($desktop) {
+    width: 225px;
+    margin-left: 45px;
     margin-top: ($base-spacing-unit-large * 2);
   }
-
   .block {
     @extend .theme--grey-4;
   }

diff --git a/src/templates/prototypes/article.pug b/src/templates/prototypes/article.pug
@@ -2,66 +2,76 @@ extends ../../layouts/layout-front-page.pug
 block content
   -var thingPage = true
 
-  .container.flex--2__2-1
-    article(tabindex=0)#content
-      header
-        p #[+link('#', 'MPs Guide to Procedure')]
-        h1 How to submit an oral question on paper
-        p These steps are for submitting on oral question on paper.
-        p You can also submit an oral question online.
-        p You or your staff can complete these steps, but your handwritten signature is needed for step 3
+  .container
+    .article--wrapper
+      article(tabindex=0)#content
+        header
+          p #[+link('#', 'MPs Guide to Procedure')]
+          h1 How to submit an oral question on paper
+          p These steps are for submitting on oral question on paper.
+          p You can also submit an oral question online.
+          p You or your staff can complete these steps, but your handwritten signature is needed for step 3
 
-      div(role='main')
-        h2 Steps
-        ol
-          li Use the Question Time rota (PDF, 45 KB) to find out which departments are due to answer questions. The deadline for tabling oral questions is 12.30pm three sitting days before the Question Time takes place (or five sitting days for Northern Ireland, Scotland and Wales questions). A sitting day is a day when the House is meeting.
-          li Fill in a question form (download a question form (Word doc, 39 KB) from the intranet or get one from the Table Office or Procedural Hub).
-            ul
-              li Tick the box to specify that it is an oral question. Fill in your name, constituency and the relevant department.
-              li Write the text of your question in the blank space on the form. Check it conforms to the rules for questions. To submit a topical question, write 'T' in the blank space. You can table one substantive and one topical question (check the rota to see whether there are topical questions for that department) for each departmental Question Time. A substantive question means you submit the text of the question in advance. A topical question means there is no need to submit the text in advance.
-              li If you are asking a substantive question and have an interest to declare, tick the box and email [email protected] to say what the interest is.
-          li Take your question form to the Table Office or Procedural Hub in person, or ask another MP to take it for you. Or sign the question form and post it or ask your staff to take it to the Table Office or Procedural Hub (faxed, stamped or photocopied signatures cannot be accepted).
-          li The Table Office will check your question and contact you if they have a problem. Once the Table Office has approved your question, it has been tabled.
+        //------ Example nav -------//
+          nav
+            .block
+              ul.list--inline
+                each val in ['Heading one', 'Heading two', 'Heading three', 'Heading four', 'Heading five', 'Heading six', 'Heading seven', 'Heading eight', 'Heading nine', 'Heading ten']
+                  li
+                    +link('#')= val
+        //--------------------------//
 
-      footer
-        h2.beta Contact an expert
+        div(role='main')
+          h2 Steps
+          ol
+            li Use the Question Time rota (PDF, 45 KB) to find out which departments are due to answer questions. The deadline for tabling oral questions is 12.30pm three sitting days before the Question Time takes place (or five sitting days for Northern Ireland, Scotland and Wales questions). A sitting day is a day when the House is meeting.
+            li Fill in a question form (download a question form (Word doc, 39 KB) from the intranet or get one from the Table Office or Procedural Hub).
+              ul
+                li Tick the box to specify that it is an oral question. Fill in your name, constituency and the relevant department.
+                li Write the text of your question in the blank space on the form. Check it conforms to the rules for questions. To submit a topical question, write 'T' in the blank space. You can table one substantive and one topical question (check the rota to see whether there are topical questions for that department) for each departmental Question Time. A substantive question means you submit the text of the question in advance. A topical question means there is no need to submit the text in advance.
+                li If you are asking a substantive question and have an interest to declare, tick the box and email [email protected] to say what the interest is.
+            li Take your question form to the Table Office or Procedural Hub in person, or ask another MP to take it for you. Or sign the question form and post it or ask your staff to take it to the Table Office or Procedural Hub (faxed, stamped or photocopied signatures cannot be accepted).
+            li The Table Office will check your question and contact you if they have a problem. Once the Table Office has approved your question, it has been tabled.
 
-        h3.zeta For enquiries about this thing
-        p Table office
-        dl.list--definition
-          dt Email:
-          dd #[+link('[email protected]', '[email protected]')]
-          dt Extension(s):
-          dd 3305
+        footer
+          h2.beta Contact an expert
 
-        h2 Up to:
-        p #[+link('#', 'MPs Guide to Procedure')]
+          h3.zeta For enquiries about this thing
+          p Table office
+          dl.list--definition
+            dt Email:
+            dd #[+link('[email protected]', '[email protected]')]
+            dt Extension(s):
+            dd 3305
 
-    aside
-      h2 Related Articles
-      .block
-        ul.list--pipe
-          li
-            .list--details
-              +link('#', 'MPs guide to business questions')
-          li
-            .list--details
-              +link('#', 'MPs guide to deadlines for questions')
-          li
-            .list--details
-              +link('#', 'An overview of oral questions for MPs')
-          li
-            .list--details
-              +link('#', 'MPs guide to Prime Ministers questions')
-          li
-            .list--details
-              +link('#', 'MPs guide to problems with questions')
-          li
-            .list--details
-              +link('#', 'MPs guide to rules for questions')
-          li
-            .list--details
-              +link('#', 'MPs guide to urgent questions')
-          li
-            .list--details
-              +link('#', 'MPs guide to written questions')
+          h2 Up to:
+          p #[+link('#', 'MPs Guide to Procedure')]
+
+      aside
+        h2 Related Articles
+        .block
+          ul.list--pipe
+            li
+              .list--details
+                +link('#', 'MPs guide to business questions')
+            li
+              .list--details
+                +link('#', 'MPs guide to deadlines for questions')
+            li
+              .list--details
+                +link('#', 'An overview of oral questions for MPs')
+            li
+              .list--details
+                +link('#', 'MPs guide to Prime Ministers questions')
+            li
+              .list--details
+                +link('#', 'MPs guide to problems with questions')
+            li
+              .list--details
+                +link('#', 'MPs guide to rules for questions')
+            li
+              .list--details
+                +link('#', 'MPs guide to urgent questions')
+            li
+              .list--details
+                +link('#', 'MPs guide to written questions')