[WEBDEV-557] Remove .list--details CSS-Class and HTML-Wrapper (#455)

ukparliament · Jun 1, 2018 · 6e5270b · 6e5270b
1 parent 8a54ebd
commit 6e5270b
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 217 deletions.
diff --git a/src/elements/_lists.pug b/src/elements/_lists.pug
@@ -1,8 +1,8 @@
 //- List Box
 mixin list--block(name, constituency, party, image)
   li
-    if image
-      .card
+    .card
+      if image
         figure.avatar--round
           +link('#', '')(aria-hidden="true", tabIndex="-1")
             picture
@@ -15,72 +15,78 @@ mixin list--block(name, constituency, party, image)
             p= 'MP for ' + constituency
           p= party
 
-    else
-      .list--details
-        h2 #[+link('#', constituency)]
-        p= name
+      else
+        .card__details
+          h2 #[+link('#', constituency)]
+          p= name
 
 //- List Box Parties
 mixin list--block__parties(party, count)
   li
-    .list--details
-      h2 #[+link('#', party)]
-      p= 'All current ' + party + ' MPs'
-    .list--details
-      span.count= count
-      | MPs
+    .card
+      .card__details
+        h2 #[+link('#', party)]
+        p= 'All current ' + party + ' MPs'
+      .card__details
+        span.count= count
+        | MPs
 
 //- List Box Accessible
 mixin list--block__accessible(constituency, date)
   li
-    .list--details
-      if constituency
-        h2 #[+link('#', constituency)]
-          span.sr-only= 'constituency from ' + date
-        p
-          span(aria-hidden='true')= date
-      else
-        h2 #[+link('#', date)]
+    .card
+      .card__details
+        if constituency
+          h2 #[+link('#', constituency)]
+            span.sr-only= 'constituency from ' + date
+          p
+            span(aria-hidden='true')= date
+        else
+          h2 #[+link('#', date)]
 
 //- List Box Generic
 mixin list--block__generic(heading, content)
   li
-    .list--details
-      if list_box_h4
-        h4 #[+link('#', heading)]
-      else if list_box_h3
-        h3 #[+link('#', heading)]
-      else
-        h2 #[+link('#', heading)]
-      p= content
-      block
+    .card
+      .card__details
+        if list_box_h4
+          h4 #[+link('#', heading)]
+        else if list_box_h3
+          h3 #[+link('#', heading)]
+        else
+          h2 #[+link('#', heading)]
+        p= content
+        block
 
-//- List Box Inline
+//- List Block Inline
 mixin list--block__inline(name, count, inline_text)
   if inline_text
     li
-      .list--details__inline
-        h2 #[+link('#', name)]
-        p= '- ' + count + ' MPs'
+      .card--inline
+        .card__details
+          h2 #[+link('#', name)]
+          p= '- ' + count + ' MPs'
   else
     li
-      .list--details
-        h2 #[+link('#', name)]
-        p= count + ' MPs'
+      .card
+        .card__details
+          h2 #[+link('#', name)]
+          p= count + ' MPs'
 
 //- List Pipe
 mixin list--pipe(constituency, date, name)
   li
-    .list--details
-      if member
-        p= 'MP for '
-          +link('#', constituency)
-        p= date
-      else if name
-        h2 #[+link('#', name)]
-        p= date
-      else
-        p= date
+    .card
+      .card__details
+        if member
+          p= 'MP for '
+            +link('#', constituency)
+          p= date
+        else if name
+          h2 #[+link('#', name)]
+          p= date
+        else
+          p= date
 
 //- List Pipe Media
 mixin list--pipe__media(imgURL, imgAlt, heading, btnURL, btnText)

diff --git a/src/elements/_utilities.pug b/src/elements/_utilities.pug
@@ -1,13 +1,10 @@
 ul.list--inline
   li.visually-hidden(aria-hidden='true')
-    .list--details
-      include ../icons/print.svg
-      +link('#', 'Print page').btn--print
+    include ../icons/print.svg
+    +link('#', 'Print page').btn--print
   li
-    .list--details
-      include ../icons/download.svg
-      +link('#', 'Download as PDF')
+    include ../icons/download.svg
+    +link('#', 'Download as PDF')
   li
-    .list--details
-      include ../icons/share.svg
-      +link('#', 'Share')
+    include ../icons/share.svg
+    +link('#', 'Share')
diff --git a/src/stylesheets/components/_card.scss b/src/stylesheets/components/_card.scss
@@ -1,20 +1,36 @@
+/*--- Card ---*/
+
 .card,
 [class*="card--"] {
   @include media($extra-small) {
     @include card;
   }
 }
 
+/*--- Card inline ---*/
+
+.card--inline .card__details * {
+  display: inline;
+}
+
+/*--- Card details ---*/
+
 .card__details {
+  @include first-child;
+  @include last-child;
+  @include media($extra-small) {
+    flex: 1 1 0;
+  }
   > * {
+    margin-top: $base-spacing-unit;
     margin-bottom: $base-spacing-unit;
   }
-  @include last-child();
+}
+
+.card__details + .card__details {
   @include media($extra-small) {
-    flex: 1 1 0;
-    > * {
-      flex-basis: 100%;
-      margin-bottom: $base-spacing-unit;
-    }
+    max-width: 25%;
+    align-self: center;
+    text-align: right;
   }
 }
diff --git a/src/stylesheets/components/_list-styles.scss b/src/stylesheets/components/_list-styles.scss
@@ -167,25 +167,6 @@ dl, dt, dd {
   list-style-type: lower-alpha;
 }
 
-/*--- List Details Options ---*/
-
-.list--details {
-  @include list--details
-}
-
-.list--details__inline {
-  @include list--details__inline;
-}
-
-.list--details + .list--details {
-  @include media($extra-small) {
-    flex-basis: 25%;
-    text-align: right;
-    align-self: center;
-    margin-left: $base-spacing-unit;
-  }
-}
-
 /*--- Default Nested Lists [ul/ol] ---*/
 
 // List style for <ul> tags without any classes, nested

diff --git a/src/stylesheets/elements/_headings.scss b/src/stylesheets/elements/_headings.scss
@@ -132,12 +132,6 @@ footer h2 {
   }
 }
 
-.list--details, .list--details__inline {
-  h2, h3, h4, h5, h6 {
-    margin-top: 0;
-  }
-}
-
 /*--- List Events ---*/
 
 .list--events > li > {
@@ -235,15 +229,8 @@ article + aside > h2 {
 .card,
 [class*="card--"] {
   h2, h3, h4, h5, h6 {
-    @extend .epsilon;
+    @include epsilon;
     flex-basis: 100%;
     color: $grey-1;
-    margin: 0 0 $base-spacing-unit;
-
-    @include media($extra-small) {
-      ~ * {
-        margin-top: $base-spacing-unit;
-      }
-    }
   }
 }
diff --git a/src/stylesheets/settings/_mixins.scss b/src/stylesheets/settings/_mixins.scss
@@ -113,7 +113,13 @@
 
 /*--- Remove top/bottom margins ---*/
 
-@mixin last-child() {
+@mixin first-child {
+  :first-child {
+    margin-top: 0;
+  }
+}
+
+@mixin last-child {
   :last-child {
     margin-bottom: 0;
   }
@@ -393,15 +399,6 @@
   > li {
     width: 100%;
     @include block;
-    @include media($extra-small) {
-      display: inline-flex;
-    }
-    /* IE11 Fix */
-    @media(-ms-high-contrast: none) {
-      *::-ms-backdrop, figure + .list--details {
-        padding-left: $base-spacing-unit-small;
-      }
-    }
   }
 }
 
@@ -415,50 +412,20 @@
     background: transparent;
     border-bottom: solid 1px $grey-3;
     padding: $base-spacing-unit-tiny 0 ($base-spacing-unit-tiny - 1) 0;
-    @include media($extra-small) {
-      display: inline-flex;
-    }
-    /* IE11 Fix */
-    @media(-ms-high-contrast: none) {
-      *::-ms-backdrop, figure + .list--details {
-        padding-left: $base-spacing-unit-large;
-      }
-    }
   }
   > li:first-of-type {
     border-top: solid 1px $grey-3;
   }
 }
 
-@mixin list--details {
-  margin-top: 0;
-  word-break: break-word;
-  @include media($extra-small) {
-    flex-basis: 100%;
-    display: inline-block;
-  }
-  * {
-    margin-bottom: $base-spacing-unit;
-  }
-  :last-child {
-    margin-bottom: 0;
-  }
-}
-
-@mixin list--details__inline {
-  @include list--details;
-  * {
-    display: inline;
-  }
-}
-
 /*--- Card Mixins ---*/
 
 @mixin card {
   display: flex;
   flex-wrap: wrap;
   flex-basis: 100%;
   align-items: flex-start;
+  @include headings-margin-top(0);
 }
 
 /*--- Avatar Mixins ---*/

diff --git a/src/templates/prototypes/_headings.pug b/src/templates/prototypes/_headings.pug
@@ -22,10 +22,11 @@ block content
         h2 Heading preceding a heading
         ul.list--block
           li
-            .list--details
-              h5 MP for #[+link('#', 'Hackney North and Stoke Newington')]
-              p Parliamentary role
-              p 8 Jun 2017 to present
+            .card
+              .card__details
+                h5 MP for #[+link('#', 'Hackney North and Stoke Newington')]
+                p Parliamentary role
+                p 8 Jun 2017 to present
         h2 Heading preceding content
         p Paragraph preceding a heading
         h2 Heading ending timeline