fix: resolves issues from issues list (#164)

* add transparent bg to news cards * fix homepage spacing * make sure all images are the same height * update template to use default image size in cards * fix news heading spacing * fix breadcrumb chevron colour * fix h2 line height * make page contnets sticky * fix divider spacing * ability to add or remove example links * make sure link wraps * script for creating page contents * make sure spacing matches between cards * update dropdown arrow * Restyled by prettier (#165) Co-authored-by: Restyled.io <commits@restyled.io> Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk> Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <commits@restyled.io>
wmcadigital · May 12, 2021 · a6a1340 · a6a1340
1 parent aef5cad
commit a6a1340
Show file tree

Hide file tree

Showing 14 changed files with 126 additions and 34 deletions.
diff --git a/src/wmcads/assets/sass/_mixins.scss b/src/wmcads/assets/sass/_mixins.scss
@@ -21,7 +21,7 @@
     margin-top: 1.5rem * $multiplier;
     margin-bottom: 1.5rem * $multiplier;
     font-size: 2rem * $multiplier;
-    line-height: 3rem * $multiplier;
+    line-height: 2.3rem * $multiplier;
   }
   // Heading 3 (23px)
   @if $level == 3 {

diff --git a/src/wmcads/components/breadcrumb/_breadcrumb.scss b/src/wmcads/components/breadcrumb/_breadcrumb.scss
@@ -18,7 +18,7 @@
       display: inline-block;
       height: 0.8em;
       margin: 0 $size-xs;
-      color: get-color(information);
+      color: get-color(primary);
     }
   }
 

diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk
@@ -15,7 +15,7 @@
 <{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews else "" }} ">
     {% if(params.src) %}
         <img 
-        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1216&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}" alt="content image">
+        src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1216&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
     {% endif %}
     {% if(params.isCta) %}
         <div class="wmcads-p-sm">

diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss
@@ -56,23 +56,24 @@
 
   &--news {
     border: 0;
+    background-color: transparent;
 
     p {
       margin: 0;
     }
 
     h3 {
+      margin: $size-xs 0;
+
       a {
-        margin: $size-sm 0;
+        margin: $size-xs 0;
       }
     }
   }
 
-  h3 {
-    margin: $size-sm 0;
-  }
-
   img {
+    height: 180px;
     padding: 1px;
+    object-fit: cover;
   }
 }
diff --git a/src/wmcads/components/form-elements/dropdown/_dropdown.scss b/src/wmcads/components/form-elements/dropdown/_dropdown.scss
@@ -9,7 +9,7 @@
     border-radius: 0;
     // sass-lint:disable-all
     background: $white
-      url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 46 46' style='enable-background:new 0 0 46 46;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FE811B;stroke:%23FE811B;%7D .st1%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M0.5,0.5h45v45h-45V0.5z'/%3E%3Cpath class='st1' d='M15,18.9h17c1.2,0,1.8,1.4,0.9,2.2l-8.5,8.5c-0.5,0.5-1.4,0.5-1.9,0L14,21.2C13.2,20.4,13.8,18.9,15,18.9z'/%3E%3C/g%3E%3C/svg%3E%0A")
+      url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIiBmaWxsPSIjYzA1NzAxIi8+PGcgaWQ9IkZvcm0tRWxlbWVudHMiPjxnIGlkPSJGb3JtLUVsZW1lbnRzLV8tRHJvcGRvd24tXy1DbG9zZWQiIGRhdGEtbmFtZT0iRm9ybS1FbGVtZW50cy0vLURyb3Bkb3duLS8tQ2xvc2VkIj48ZyBpZD0iQ2FyZXQiPjxnIGlkPSJJY29uLV8tQ2FyZXQtXy1Eb3duIiBkYXRhLW5hbWU9Ikljb24tLy1DYXJldC0vLURvd24iPjxwYXRoIGlkPSJQYXRoIiBkPSJNMTcuMTExMiwxOUgzMi43MzYxYTEuMjEzMywxLjIxMzMsMCwwLDEsLjg1ODIsMi4wNzA5bC03LjgxMTIsNy44MTZhMS4yMTg1LDEuMjE4NSwwLDAsMS0xLjcxODksMGwtNy44MTEyLTcuODE2QTEuMjEzMywxLjIxMzMsMCwwLDEsMTcuMTExMiwxOVoiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvZz48L2c+PC9zdmc+")
       no-repeat right;
     appearance: none;
     background-size: contain;

diff --git a/src/wmcads/components/page-contents/_page-contents.njk b/src/wmcads/components/page-contents/_page-contents.njk
@@ -4,9 +4,11 @@
   <div class="wmcads-page-contents {% if(params.rightMargin) %} wmcads-m-r-lg {% endif %}">
       <h3>Page contents</h3>
       <div>{{title}}</div>
-      <a>link 1</a>
-      <a>link 2</a>
-      <a>link 3</a>
-      <a>link 4</a>
+      {% if(params.example) %}
+        <a>link 1</a>
+        <a>link 2</a>
+        <a>link 3</a>
+        <a>link 4</a>
+      {% endif %}
   </div>
 {% endmacro %}
diff --git a/src/wmcads/components/page-contents/_page-contents.scss b/src/wmcads/components/page-contents/_page-contents.scss
@@ -1,4 +1,6 @@
 .wmcads-page-contents {
+  position: sticky;
+  top: 0;
   margin-bottom: 30px;
   padding: 10px;
   border-bottom: 3px solid $black;
@@ -22,8 +24,7 @@
   a {
     display: block;
     margin-bottom: 10px;
-    overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: wrap;
   }
 }
diff --git a/src/www/pages/components/page-contents/index.njk b/src/www/pages/components/page-contents/index.njk
@@ -6,7 +6,9 @@
 {% block content %}
 {{
   compExample([
-    wmcadsPageContents()
+    wmcadsPageContents({
+      example: true
+    })
   ])  
 }}
 {% endblock %} 
diff --git a/src/www/pages/templates/campaign-one-column/index.njk b/src/www/pages/templates/campaign-one-column/index.njk
@@ -49,6 +49,7 @@
             src: true,
             isThirdCard: false,
             title: 'Get Going Continue Rolling',
+            isDefault: true,
             copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
           })
         }}
@@ -60,35 +61,38 @@
             src: true,
             isThirdCard: false,
             title: 'All things strolling',
+            isDefault: true,
             copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
           })
         }}
         </div>
-        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm">
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-t-sm wmcads-m-b-sm">
         {{
           wmcadsContentCard({
             clickable: true,
             src: true,
             isThirdCard: false,
             title: 'Changes in your area',
+            isDefault: true,
             copy: 'Understand what changes are being made in your area to help you travel safely'
           })
         }}
         </div>
-        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-t-sm wmcads-m-b-sm">
         {{
           wmcadsContentCard({
             clickable: true,
             src: true,
             isThirdCard: false,
             title: 'Get active and travel safely',
+            isDefault: true,
             copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
           })
         }}
         </div>
       </div>
 
-      <hr class="wmcads-divider-wmgreen  wmcads-m-t-xl" aria-hidden="true">
+      <hr class="wmcads-divider-wmgreen  wmcads-m-t-lg" aria-hidden="true">
       <h2>Get the best from your bike</h2>
       <div class="wmcads-accordion wmcads-m-b-sm">
         <button aria-controls="accordion-01" class="wmcads-accordion__summary-wrapper" aria-expanded="false">
@@ -144,7 +148,7 @@
           </div>
         </div>
 
-        <hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
+        <hr class="wmcads-divider-wmgreen wmcads-m-t-lg" aria-hidden="true">
 
         <h2>Additional Information</h2>
         <div class="wmcads-grid wmcads-grid--justify-between">
@@ -155,6 +159,7 @@
               src: true,
               isThirdCard: false,
               title: 'Support for businesses',
+              isDefault: true,
               copy: 'We have a wide range of options to support your business and employees at work and at home'
             })
           }}
@@ -166,13 +171,14 @@
               src: true,
               isThirdCard: false,
               title: 'Be Aware and Share',
+              isDefault: true,
               copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
             })
           }}
           </div>
         </div>
 
-        <hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
+        <hr class="wmcads-divider-wmgreen wmcads-m-t-lg" aria-hidden="true">
 
         <h3>Campaign Funding Partners</h3>
 

diff --git a/src/www/pages/templates/campaign-two-columns/campaign-template.js b/src/www/pages/templates/campaign-two-columns/campaign-template.js
@@ -0,0 +1,33 @@
+const pageContents = () => {
+  const headings = document.querySelectorAll('.main h2');
+
+  headings.forEach(heading => {
+    const str = heading.innerHTML;
+    const linkStr = str.toLowerCase().replaceAll(' ', '-');
+    const link = `#${linkStr}`;
+
+    // add id to all the h2
+    heading.setAttribute('id', linkStr);
+
+    // function to decode htmlentities
+    function decodeHtml(html) {
+      const txt = document.createElement('textarea');
+      txt.innerHTML = html;
+      return txt.value;
+    }
+    // function to add a link to the page contents
+    function createMenuItem() {
+      const li = document.createElement('a');
+      li.textContent = decodeHtml(str);
+      li.setAttribute('href', link);
+      return li;
+    }
+
+    // get the page contents
+    const menu = document.querySelector('.wmcads-page-contents');
+    // add page contents link
+    menu.appendChild(createMenuItem());
+  });
+};
+
+export default pageContents;
diff --git a/src/www/pages/templates/campaign-two-columns/index.njk b/src/www/pages/templates/campaign-two-columns/index.njk
@@ -30,9 +30,13 @@
     {{
       wmcadsPageContents({
         title: "Roll & Stroll",
-        rightMargin: true
+        rightMargin: true,
+        example: false
       })
     }}
+
+    <div id="test">
+    </div>
     </aside>
 
     <div class="main wmcads-col-1 wmcads-col-md-2-3 wmcads-m-b-xl">
@@ -59,6 +63,7 @@
             src: true,
             isThirdCard: false,
             title: 'Get Going Continue Rolling',
+            isDefault: true,
             copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
           })
         }}
@@ -70,35 +75,38 @@
             src: true,
             isThirdCard: false,
             title: 'All things strolling',
+            isDefault: true,
             copy: 'Wherever youre heading, theres always new and safe ways to get there on foot. '
           })
         }}
         </div>
-        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm">
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-t-sm wmcads-m-b-sm">
         {{
           wmcadsContentCard({
             clickable: true,
             src: true,
             isThirdCard: false,
             title: 'Changes in your area',
+            isDefault: true,
             copy: 'Understand what changes are being made in your area to help you travel safely'
           })
         }}
         </div>
-        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
+        <div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-t-sm wmcads-m-b-sm">
         {{
           wmcadsContentCard({
             clickable: true,
             src: true,
             isThirdCard: false,
             title: 'Get active and travel safely',
+            isDefault: true,
             copy: 'Enjoy being physically active and travelling outdoors responsibly and safely. '
           })
         }}
         </div>
       </div>
 
-      <hr class="wmcads-divider-wmgreen  wmcads-m-t-xl" aria-hidden="true">
+      <hr class="wmcads-divider-wmgreen  wmcads-m-t-lg" aria-hidden="true">
       <h2>Get the best from your bike</h2>
       <div class="wmcads-accordion wmcads-m-b-sm">
         <button aria-controls="accordion-01" class="wmcads-accordion__summary-wrapper" aria-expanded="false">
@@ -154,7 +162,7 @@
           </div>
         </div>
 
-        <hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
+        <hr class="wmcads-divider-wmgreen wmcads-m-t-lg" aria-hidden="true">
 
         <h2>Additional Information</h2>
         <div class="wmcads-grid wmcads-grid--justify-between">
@@ -165,6 +173,7 @@
               src: true,
               isThirdCard: false,
               title: 'Support for businesses',
+              isDefault: true,
               copy: 'We have a wide range of options to support your business and employees at work and at home'
             })
           }}
@@ -176,13 +185,14 @@
               src: true,
               isThirdCard: false,
               title: 'Be Aware and Share',
+              isDefault: true,
               copy: 'If you drive in the West Midlands be prepared to share the road space with more Rollers and Strollers.'
             })
           }}
           </div>
         </div>
 
-        <hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
+        <hr class="wmcads-divider-wmgreen wmcads-m-t-lg" aria-hidden="true">
 
         <h3>Campaign Funding Partners</h3>
 

diff --git a/src/www/pages/templates/homepage/homepage.scss b/src/www/pages/templates/homepage/homepage.scss
@@ -1,4 +1,6 @@
 .homepage {
+  margin-bottom: $size-xl;
+
   .what-we-do {
     svg {
       display: block;
@@ -26,6 +28,39 @@
       padding: 0 $size-sm;
     }
   }
+
+  .thirds {
+    .wmcads-col-sm-1-2:last-of-type {
+      @media screen and (max-width: $breakpoint-md) {
+        margin-top: $size-lg;
+      }
+    }
+  }
+
+  .news {
+    .wmcads-col-md-12-24 {
+      padding-right: $size-lg;
+      @media screen and (max-width: $breakpoint-md) {
+        margin-bottom: $size-lg;
+        padding-right: 0;
+      }
+    }
+
+    .wmcads-col-sm-1-2:nth-child(2) {
+      padding-right: $size-md;
+      @media screen and (max-width: $breakpoint-md) {
+        padding-right: 0;
+      }
+    }
+
+    .wmcads-col-sm-1-2:nth-child(3) {
+      padding-left: $size-md;
+      @media screen and (max-width: $breakpoint-md) {
+        padding-left: 0;
+      }
+    }
+
+  }
 }
 
 .wmcads-container.homepage {