From 956347b0fc63a0d451f4c870d9ddbd8f3eb174ff Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Wed, 7 Jul 2021 14:12:20 +0100 Subject: [PATCH] feat: search template amends (#200) * update breadcrumb to use text instead of an icon * new search template * update search js location * search page amends & fixes Co-authored-by: Nathan Rogan --- .../sass/wmcads-grid/_grid-css-grid.scss | 2 +- .../search/search-filter/_search-filter.njk | 2 +- .../search/search-filter/_search-filter.scss | 13 ++++ src/www/_layouts/_template-master-layout.njk | 1 - .../campaign-two-columns/campaign-template.js | 54 +++++++------ src/www/pages/templates/search/index.njk | 76 ++++++------------- src/www/pages/templates/search/search.scss | 25 +++++- 7 files changed, 91 insertions(+), 82 deletions(-) diff --git a/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss b/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss index c225944e..263f6ece 100644 --- a/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss +++ b/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss @@ -18,7 +18,7 @@ display: grid; grid-gap: $size-lg; grid-template-columns: repeat(auto-fit, minmax(448px, 1fr)); - + @media (max-width: $breakpoint-sm) { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); } diff --git a/src/wmcads/patterns/search/search-filter/_search-filter.njk b/src/wmcads/patterns/search/search-filter/_search-filter.njk index 661d0c84..485e3485 100755 --- a/src/wmcads/patterns/search/search-filter/_search-filter.njk +++ b/src/wmcads/patterns/search/search-filter/_search-filter.njk @@ -13,7 +13,7 @@

Filter

- Clear all + Clear all Close diff --git a/src/wmcads/patterns/search/search-filter/_search-filter.scss b/src/wmcads/patterns/search/search-filter/_search-filter.scss index 7ba035cf..18221ef9 100755 --- a/src/wmcads/patterns/search/search-filter/_search-filter.scss +++ b/src/wmcads/patterns/search/search-filter/_search-filter.scss @@ -112,6 +112,18 @@ $transition-fade-in: opacity 0.2s ease-out; } } + @media screen and (max-width: $breakpoint-md) { + .wmcads-search-filter__clear-all { + display: none; + } + + &--has-inputs-checked { + .wmcads-search-filter__clear-all.wmcads-hide-desktop { + display: flex; + } + } + } + @media screen and (min-width: $breakpoint-md) { border-bottom: 5px solid get-color(primary); @@ -149,4 +161,5 @@ $transition-fade-in: opacity 0.2s ease-out; } } } + } diff --git a/src/www/_layouts/_template-master-layout.njk b/src/www/_layouts/_template-master-layout.njk index f81442ae..70cef2e1 100755 --- a/src/www/_layouts/_template-master-layout.njk +++ b/src/www/_layouts/_template-master-layout.njk @@ -77,7 +77,6 @@ {% include "www/_partials/_scripts.njk" %} - diff --git a/src/www/pages/templates/campaign-two-columns/campaign-template.js b/src/www/pages/templates/campaign-two-columns/campaign-template.js index 233e07d5..5f7f82e6 100644 --- a/src/www/pages/templates/campaign-two-columns/campaign-template.js +++ b/src/www/pages/templates/campaign-two-columns/campaign-template.js @@ -1,33 +1,37 @@ const pageContents = () => { - const headings = document.querySelectorAll('main h2'); + const contents = document.querySelector('.wmcads-page-contents'); - headings.forEach(heading => { - const str = heading.innerHTML; - const linkStr = str.toLowerCase().replaceAll(' ', '-'); - const link = `#${linkStr}`; + if (contents != null) { + const headings = document.querySelectorAll('main h2'); - // add id to all the h2 - heading.setAttribute('id', linkStr); + headings.forEach(heading => { + const str = heading.innerHTML; + const linkStr = str.toLowerCase().replaceAll(' ', '-'); + const link = `#${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; - } + // add id to all the h2 + heading.setAttribute('id', linkStr); - // get the page contents - const menu = document.querySelector('.wmcads-page-contents'); - // add page contents link - menu.appendChild(createMenuItem()); - }); + // 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/search/index.njk b/src/www/pages/templates/search/index.njk index 85e795fc..b48165f3 100644 --- a/src/www/pages/templates/search/index.njk +++ b/src/www/pages/templates/search/index.njk @@ -1,19 +1,16 @@ {% extends "www/_layouts/template-layout-fullwidth.njk" %} {% set pageTitle="Search" %} {% set section = "Templates" %} {# Imports #} -{%- from "wmcads/components/content-tiles/normal/_normal.njk" import wmcadsContentTilesNormal -%} {% from "wmcads/components/link/link/_link.njk" import wmcadsLink %} -{% from "wmcads/components/inset-text/_inset-text.njk" import wmcadsInsetText %} {% from "wmcads/components/icon/_icon.njk" import wmcadsIcon %} -{% from "wmcads/components/content-card/_content-card.njk" import wmcadsContentCard %} {% from "wmcads/components/page-contents/_page-contents.njk" import wmcadsPageContents %} {% from "wmcads/patterns/search/search-bar/_search-bar.njk" import wmcadsSearchbar %} {% from "wmcads/patterns/search/search-filter/_search-filter.njk" import wmcadsSearchFilter %} {% from "wmcads/patterns/search/sort/_sort.njk" import wmcadsSearchSort %} -{% from "wmcads/patterns/search/search-filter/_search-filter.njk" import wmcadsSearchFilter %} {% from "wmcads/patterns/search/pagination/_pagination.njk" import wmcadsPagination %} {% from "wmcads/components/breadcrumb/_breadcrumb.njk" import wmcadsBreadcrumb %} {% from "wmcads/patterns/search/search-result/_search-result.njk" import wmcadsSearchResult %} + {# Set array of tiles #} {% block content %} @@ -22,31 +19,6 @@

Search results

{{wmcadsSearchbar()}} -
- {{wmcadsSearchSort()}} - {{wmcadsSearchFilter( - { - accordion: [{ - summaryTitle: "Topic", - options: [ - "Tickets", "Transport", "Housing and Land", "Economy and Innovation", "Public Service Reform", "Digital and Culture", "Wellbeing", "Environment" - ] - }, - { - summaryTitle: "Page type", - options: [ - "Services", "News articles", "Other/Everything else", "Campaigns", "People’s stories", "Projects/programmes" - ] - }, - { - summaryTitle: "Date", - options: [ - "Services", "Added in the last week", "Added in the last month", "Added in the last year" - ] - } - ]} - )}} -
@@ -99,31 +71,31 @@ activePage: 1 })}}
-
diff --git a/src/www/pages/templates/search/search.scss b/src/www/pages/templates/search/search.scss index 3ca6f9bf..6a45b314 100644 --- a/src/www/pages/templates/search/search.scss +++ b/src/www/pages/templates/search/search.scss @@ -1,4 +1,10 @@ .template-search { + .wmcads-grid { + @media screen and (max-width: $breakpoint-md) { + flex-direction: column-reverse; + } + } + .wmcads-p-r-xl { @media screen and (max-width: $breakpoint-md) { padding: 0; @@ -7,13 +13,28 @@ .wmcads-hide-mobile { @media screen and (max-width: $breakpoint-sm) { - display: none; + display: none; } } .wmcads-search-sort { @media screen and (max-width: $breakpoint-sm) { - margin-top: $size-md; + margin-top: $size-md; + } + } + + aside { + @media screen and (max-width: $breakpoint-md) { + display: flex !important; + flex-direction: column-reverse; + } + + .wmcads-search-sort { + @media screen and (max-width: $breakpoint-md) { + margin-top: $size-lg; + padding-top: $size-lg; + border-top: 1px solid get-color(brandCoolGrey); + } } } }