From f89f75125890a9bc1f594f309802fffdad51954b Mon Sep 17 00:00:00 2001 From: Usman Afzal Date: Fri, 14 Dec 2018 17:21:42 +0000 Subject: [PATCH] [WEBSITE-1114] Refactoring of collection lists within article (#553) --- src/components/collections.pug | 51 ++++++++---- src/components/meta.pug | 6 +- src/stylesheets/components/_list-styles.scss | 27 +----- src/stylesheets/elements/_headings.scss | 5 ++ src/stylesheets/elements/_links.scss | 6 +- src/stylesheets/settings/_mixins.scss | 7 ++ src/templates/index.pug | 3 - src/templates/prototypes/article-new.pug | 53 ------------ src/templates/prototypes/article.pug | 86 ++++++-------------- test/paths.json | 5 +- 10 files changed, 83 insertions(+), 166 deletions(-) delete mode 100644 src/templates/prototypes/article-new.pug diff --git a/src/components/collections.pug b/src/components/collections.pug index 5318bd73..88a40cf6 100644 --- a/src/components/collections.pug +++ b/src/components/collections.pug @@ -1,18 +1,35 @@ -h2 - +link('#', 'Collection one') -ol - li #[+link('#', 'Article one')] - li #[+link('#', 'Article two')] - li #[+link('#', 'Article three')] - li Article header - li #[+link('#', 'Article five')] - li #[+link('#', 'Article ')] +h2 More in: #[+link('#', 'Collection one')] +ol.list--2 + li + .card + .card__details + small Article + h2 #[+link('#', 'Article one')] + li + .card + .card__details + small Article + h2 #[+link('#', 'Article two')] + li + .card + .card__details + small Collection + h2 #[+link('#', 'Collection one')] + li + .card + .card__details + small Collection + h2 #[+link('#', 'Collection two')] -h2 - +link('#', 'Collection two') -ol - li #[+link('#', 'Article one')] - li Article header - li #[+link('#', 'Article two')] - li #[+link('#', 'Article three')] - li #[+link('#', 'Article four')] +h2 More in: #[+link('#', 'Collection two')] +ol.list--2 + li + .card + .card__details + small Article + h2 #[+link('#', 'Article one')] + li + .card + .card__details + small Collection + h2 #[+link('#', 'Collection one')] diff --git a/src/components/meta.pug b/src/components/meta.pug index fff264d3..2f11a944 100644 --- a/src/components/meta.pug +++ b/src/components/meta.pug @@ -1,7 +1,9 @@ if article dl.meta - dt Publisher/s - dd #[+link('#', 'Name of publisher')], #[+link('#', 'Name of second publisher')] + dt Author + dd #[+link('#', 'Author name')] + dt Publisher + dd #[+link('#', 'team')], #[+link('#', 'department')], #[+link('#', 'house')], #[+link('#', 'committee')], #[+link('#', 'sub-brand')] dt Date published dd time(datetime="2018-09-18") 18 September 2018 diff --git a/src/stylesheets/components/_list-styles.scss b/src/stylesheets/components/_list-styles.scss index 86bb3fcc..4d40dd7f 100644 --- a/src/stylesheets/components/_list-styles.scss +++ b/src/stylesheets/components/_list-styles.scss @@ -59,10 +59,7 @@ dl, dt, dd { /*--- List Column Options ---*/ .list--2 { - @include col--2; - @include media($medium) { - @include last-row(2); - } + @include list--2; } section:not([class*="section--wide"] ) .list--3 { @@ -280,14 +277,6 @@ article [role='main'] { } } -aside [class*="list"] li { - display: block; - width: auto; - &.active { - background-color: $grey-3; - } -} - footer .list { margin: 0; padding: 0; @@ -324,17 +313,5 @@ footer .list { } article aside ol { - @include list; - margin-bottom: $base-spacing-unit-large; -} - -article aside li:before { - /* Dash preceeding a collection list item */ - content: "\002014"; - color: $grey-2; - margin-right: $base-spacing-unit; -} - -article aside li { - @include typography--heavy; + @include list--block; } diff --git a/src/stylesheets/elements/_headings.scss b/src/stylesheets/elements/_headings.scss index 04fe8ffe..b77304ee 100644 --- a/src/stylesheets/elements/_headings.scss +++ b/src/stylesheets/elements/_headings.scss @@ -212,6 +212,11 @@ article + aside > h2 { margin-bottom: 0; } +article aside h2 { + @include epsilon; + @include typography--light; +} + /*--- Card styles ---*/ .card, diff --git a/src/stylesheets/elements/_links.scss b/src/stylesheets/elements/_links.scss index b5356b81..5b3c3567 100644 --- a/src/stylesheets/elements/_links.scss +++ b/src/stylesheets/elements/_links.scss @@ -179,8 +179,8 @@ figure a :hover { opacity: 0.8; } -/*--- Article styles---*/ +/*--- Component Specific ---*/ -article aside li a { - @include typography--light; +article aside h2 a { + @include typography--heavy; } diff --git a/src/stylesheets/settings/_mixins.scss b/src/stylesheets/settings/_mixins.scss index 93527082..4c21f927 100644 --- a/src/stylesheets/settings/_mixins.scss +++ b/src/stylesheets/settings/_mixins.scss @@ -389,6 +389,13 @@ } } +@mixin list--2 { + @include col--2; + @include media($medium) { + @include last-row(2); + } +} + /*--- Global Typography Mixins ---*/ @mixin alpha { diff --git a/src/templates/index.pug b/src/templates/index.pug index 682c0d1d..a5ca9bae 100644 --- a/src/templates/index.pug +++ b/src/templates/index.pug @@ -14,7 +14,6 @@ html(lang="en") h2 Templates ul li #[+link('/templates/prototypes/article.html', 'Article')] - li #[+link('/templates/prototypes/article-new.html', 'Article New')] li #[+link('/templates/prototypes/front-page.html', 'Front Page')] li #[+link('/templates/prototypes/people-id.html', 'People ID')] li #[+link('/templates/prototypes/people-constituency.html', 'People Constituency')] @@ -23,8 +22,6 @@ html(lang="en") li #[+link('/templates/prototypes/guide-to-procedures.html', 'Guide to Procedures (Short form)')] li #[+link('/templates/prototypes/questions.html', 'Questions')] li #[+link('/templates/prototypes/search-results.html', 'Search results')] - li #[+link('/templates/prototypes/visiting-security.html', 'Visiting Security')] - li #[+link('/templates/prototypes/gtp-meeting-times.html', 'Guide to procedure meeting times')] section diff --git a/src/templates/prototypes/article-new.pug b/src/templates/prototypes/article-new.pug deleted file mode 100644 index e7888a6d..00000000 --- a/src/templates/prototypes/article-new.pug +++ /dev/null @@ -1,53 +0,0 @@ -extends ../../layouts/layout.pug -block content - -var thingPage = true - -var article = true - - article(tabindex=0)#content - header - .container - small #[+link('#', 'Article Type [Article, News, Guidance]')] - h1 - span Article header - span.context Context - p Summary is a brief overview of what the content is about. - p If you want to find out what what's happening on a particular day in the Chamber the best way is to look at the Order Paper, which is the daily agenda. - - include ../../components/meta - - div(role='main') - .container - // Lead image component // - figure - picture - source(srcset="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=CU_5:2&width=732&quality=80, https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=CU_5:2&width=1464&quality=80 2x" media="(min-width: 480px)") - source(srcset="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=MCU_3:2&width=444&quality=80, https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=MCU_3:2&width=888&quality=80 2x") - img(src="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?width=732&quality=80", alt="Margot James") - figcaption Lead image (optional) #[+link('#','example link to resource')] - - // Headless CMS content - p You can speak in debates in the Chamber and Westminster Hall. You should be aware of the Rules of behaviour and courtesies in the House, issued by the Speaker, before you do so. - p The House reaches its decisions or highlights its opinions by debating motions. MPs argue for or against a specific motion and then reach a decision, with or without the need for a vote. Motions are listed on the Order Paper, along with the names of the MPs who support them. - p A general motion is neutrally worded. It usually begins, “That this House has considered”. It lets the House discuss an issue without giving an opinion or taking action on it. You can’t amend this kind of motion. - p A substantive motion calls on the House to take action or express an opinion. You can amend a substantive motion. - p Although most motions that are debated are tabled by the Government, there are opportunities for backbenchers to hold debates too: - - ol - li adjournment debates - li Westminster Hall debates - li Backbench Business Committee debates - li emergency debates - - ul - li adjournment debates - li Westminster Hall debates - li Backbench Business Committee debates - li emergency debates - - p The main Opposition parties get a chance to hold debates on their motions on Opposition days. - - footer - .container - aside - include ../../components/collections - include ../../components/utilities diff --git a/src/templates/prototypes/article.pug b/src/templates/prototypes/article.pug index 10c96fcd..057501a9 100644 --- a/src/templates/prototypes/article.pug +++ b/src/templates/prototypes/article.pug @@ -6,76 +6,44 @@ block content article(tabindex=0)#content header .container - small #[+link('#', 'Article Type [Article, News, Guidance]')] + small #[+link('#', 'Article')] #[+link('#', 'News')] #[+link('#', 'Guidance')] h1 - span Article header - span.context Context - p A demo of how html content will display in the article tag + span Article heading + p Summary is a brief overview of what the content is about. + p If you want to find out what what's happening on a particular day in the Chamber the best way is to look at the Order Paper, which is the daily agenda. include ../../components/meta div(role='main') .container - h1 - span Heading 1 - h2 Heading 2 - h3 Heading 3 - h4 Heading 4 - h5 Heading 5 - h6 Heading 6 - - h2 Links - p #[+link('#', 'A link')] - p This is #[+link('#', 'another link')] - - h2 Emphasis - p - strong This text is bold - p - em This text is italic - p - del This text has a strikethrough - - h2 Blockquotes - blockquote - p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - h2 Lists - - h3 Ordered - ol - li List item 1 - li List item 2 - li List item 3 - - h3 Unordered - ul - li List item - li List item - li List item + // Lead image component // + figure + picture + source(srcset="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=CU_5:2&width=732&quality=80, https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=CU_5:2&width=1464&quality=80 2x" media="(min-width: 480px)") + source(srcset="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=MCU_3:2&width=444&quality=80, https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?crop=MCU_3:2&width=888&quality=80 2x") + img(src="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?width=732&quality=80", alt="Margot James") + figcaption Lead image (optional) #[+link('#','example link to resource')] + + // Headless CMS content + p You can speak in debates in the Chamber and Westminster Hall. You should be aware of the Rules of behaviour and courtesies in the House, issued by the Speaker, before you do so. + p The House reaches its decisions or highlights its opinions by debating motions. MPs argue for or against a specific motion and then reach a decision, with or without the need for a vote. Motions are listed on the Order Paper, along with the names of the MPs who support them. + p A general motion is neutrally worded. It usually begins, “That this House has considered”. It lets the House discuss an issue without giving an opinion or taking action on it. You can’t amend this kind of motion. + p A substantive motion calls on the House to take action or express an opinion. You can amend a substantive motion. + p Although most motions that are debated are tabled by the Government, there are opportunities for backbenchers to hold debates too: - h3 Unordered in ordered ol - li List item 1 - li List item 2 - ul - li List item - li List item - li List item - li List item 3 + li adjournment debates + li Westminster Hall debates + li Backbench Business Committee debates + li emergency debates - h3 Ordered in unordered ul - li List item - li List item - ol - li List item 1 - li List item 2 - li List item 3 - li List item + li adjournment debates + li Westminster Hall debates + li Backbench Business Committee debates + li emergency debates - h2 Images - img(src="https://api-parliament-uk.azure-api.net/photo/0qLRSwb3.jpeg?width=732&quality=80" alt="Margot James") + p The main Opposition parties get a chance to hold debates on their motions on Opposition days. footer .container diff --git a/test/paths.json b/test/paths.json index 801eea11..0a15f370 100644 --- a/test/paths.json +++ b/test/paths.json @@ -4,7 +4,6 @@ }, "urls": [ "http://localhost:5000/templates/prototypes/article.html", - "http://localhost:5000/templates/prototypes/article-new.html", "http://localhost:5000/templates/prototypes/front-page.html", "http://localhost:5000/templates/prototypes/people-id.html", "http://localhost:5000/templates/prototypes/people-constituency.html", @@ -26,8 +25,6 @@ "http://localhost:5000/templates/prototypes/_navigations.html", "http://localhost:5000/templates/prototypes/_tables.html", "http://localhost:5000/templates/prototypes/_toggles.html", - "http://localhost:5000/templates/prototypes/_tracks.html", - "http://localhost:5000/templates/prototypes/gtp-meeting-times.html", - "http://localhost:5000/templates/prototypes/visiting-security.html" + "http://localhost:5000/templates/prototypes/_tracks.html" ] }