From 54840e06550be94c16d5c0486a3f6a48ba4c51c1 Mon Sep 17 00:00:00 2001 From: Usman Afzal Date: Wed, 28 Mar 2018 09:54:03 +0100 Subject: [PATCH] Update to article template structure --- package-lock.json | 37 ++++--- src/stylesheets/components/_article.scss | 8 ++ src/stylesheets/components/_aside.scss | 3 +- src/templates/prototypes/article.pug | 126 ++++++++++++----------- 4 files changed, 99 insertions(+), 75 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a4a3837..4e93c722 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3575,11 +3575,6 @@ } } }, - "string_decoder": { - "version": "0.10.31", - "bundled": true, - "dev": true - }, "string-width": { "version": "1.0.2", "bundled": true, @@ -3590,6 +3585,11 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "0.10.31", + "bundled": true, + "dev": true + }, "stringstream": { "version": "0.0.5", "bundled": true, @@ -6098,6 +6098,12 @@ "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", "dev": true }, + "normalize.css": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-5.0.0.tgz", + "integrity": "sha1-fOyHXOgXilMzxN6Ato6pwYudfDc=", + "dev": true + }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", @@ -8192,15 +8198,6 @@ "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=", "dev": true }, - "string_decoder": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", - "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", - "dev": true, - "requires": { - "safe-buffer": "5.1.0" - } - }, "string-width": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", @@ -8212,6 +8209,15 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz", + "integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=", + "dev": true, + "requires": { + "safe-buffer": "5.1.0" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", @@ -8767,8 +8773,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true, - "optional": true + "dev": true }, "union-value": { "version": "1.0.0", diff --git a/src/stylesheets/components/_article.scss b/src/stylesheets/components/_article.scss index ea8ec4fc..e1d402fc 100644 --- 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 index 07fd7a73..24075bf0 100644 --- 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 index c6c1742f..f2b2117f 100644 --- 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 tableoffice@parliament.uk 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 tableoffice@parliament.uk 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('tableoffice@parliament.uk', 'tableoffice@parliament.uk')] - 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('tableoffice@parliament.uk', 'tableoffice@parliament.uk')] + 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')