-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* update breadcrumb to use text instead of an icon * new search template * update search js location Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>
- Loading branch information
1 parent
cf0872d
commit 0687c44
Showing
15 changed files
with
1,193 additions
and
1,560 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -13,6 +13,11 @@ | |
| } | ||
| } | ||
|
|
||
| &__date { | ||
| margin: 0; | ||
| padding-top: $size-xs; | ||
| } | ||
|
|
||
| &__excerpt { | ||
| padding-top: $size-md; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -158,6 +158,9 @@ | |
| }, | ||
| { | ||
| "name": "Content Two Columns" | ||
| }, | ||
| { | ||
| "name": "Search" | ||
| } | ||
| ] | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,4 @@ | ||
| .homepage { | ||
|
|
||
| .what-we-do { | ||
| svg { | ||
| display: block; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| {% 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 %} | ||
|
|
||
| <div class="template-search"> | ||
| <div class="wmcads-container wmcads-m-b-lg"> | ||
| <h1 id="wmcads-main-content" class="wmcads-hide-mobile">Search results</h1> | ||
| <div class="wmcads-col-1 wmcads-col-md-2-3 wmcads-p-r-xl"> | ||
| {{wmcadsSearchbar()}} | ||
| <div class="wmcads-hide-desktop"> | ||
| {{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" | ||
| ] | ||
| } | ||
| ]} | ||
| )}} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="wmcads-container"> | ||
| <div class="wmcads-grid"> | ||
| <div class="main wmcads-col-1 wmcads-col-md-2-3 wmcads-m-b-xl wmcads-p-r-lg"> | ||
| <p>Found <strong>20</strong> matching results</p> | ||
| {{wmcadsSearchResult( | ||
| { | ||
| pageTitle: "HS2 Ltd", | ||
| breadcrumbs: ['Home', 'What we do', "HS2", "HS2 Ltd"], | ||
| date: "Thursday 23 August 2018", | ||
| excerpt: "High Speed Two (HS2) is the new railway that will be the backbone of Britain’s <strong>transport</strong> network. High Speed Two Limited (HS2 Ltd) is the company developing..." | ||
| } | ||
| )}} | ||
| {{wmcadsSearchResult( | ||
| { | ||
| pageTitle: "Connectivity", | ||
| breadcrumbs: ['Home', 'What we do', "HS2", "Connectivity"], | ||
| date: "Thursday 23 August 2018", | ||
| excerpt: "HS2 will place the West Midlands at the heart of the UK’s <strong>transport</strong> network, with two new stations in the region, the interchange at Solihull and the new Curzon Street..." | ||
| } | ||
| )}} | ||
| {{wmcadsSearchResult( | ||
| { | ||
| pageTitle: "New transport system will be sprinting for success at Commonwealth Games", | ||
| breadcrumbs: ['Home', 'What we do', "HS2", "New transport system will be sprinting for success..."], | ||
| date: "Thursday 23 August 2018", | ||
| excerpt: "Top athletes are not the only ones aiming to be in peak condition for the 2022 Commonwealth Games in Birmingham – the region’s <strong>transport</strong> system is also..." | ||
| } | ||
| )}} | ||
| {{wmcadsSearchResult( | ||
| { | ||
| pageTitle: "Our Vision", | ||
| breadcrumbs: ['Home', 'What we do', "HS2", "Our Vision"], | ||
| date: "Thursday 23 August 2018", | ||
| excerpt: "High Speed 2 (HS2) will have a truly transformational impact on the West Midlands. As well as the economic benefits of investment in high speed rail infrastructure..." | ||
| } | ||
| )}} | ||
| {{wmcadsSearchResult( | ||
| { | ||
| pageTitle: "Network Resilience", | ||
| breadcrumbs: ['Home', 'What we do', "HS2", "Network Resilience"], | ||
| date: "Thursday 23 August 2018", | ||
| excerpt: "We are experiencing an unprecedented level of investment in bringing much needed improvements to the way that people and goods are able to move around the West..." | ||
| } | ||
| )}} | ||
|
|
||
| {{wmcadsPagination({ | ||
| pageCount: 8, | ||
| activePage: 1 | ||
| })}} | ||
| </div> | ||
| <aside class="wmcads-col-1 wmcads-col-md-1-3 wmcads-m-b-lg wmcads-hide-mobile"> | ||
| {{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" | ||
| ] | ||
| } | ||
| ]} | ||
| )}} | ||
|
|
||
| </aside> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endblock %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| const searchFilterJs = () => { | ||
| const showBtn = document.getElementById('show_filter_btn'); | ||
| const hideBtn = document.getElementById('hide_filter_btn'); | ||
| const showResults = document.getElementById('show_results_btn'); | ||
| const searchFilter = document.getElementById('search_filter'); | ||
|
|
||
| if (searchFilter) { | ||
| const filterOptions = searchFilter.querySelectorAll('.wmcads-fe-checkboxes__input'); | ||
|
|
||
| filterOptions.forEach(option => { | ||
| option.addEventListener('change', () => { | ||
| if ([...filterOptions].some(input => input.checked)) { | ||
| searchFilter.classList.add('wmcads-search-filter--has-inputs-checked'); | ||
| } else { | ||
| searchFilter.classList.remove('wmcads-search-filter--has-inputs-checked'); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| const showFilter = (show = true) => { | ||
| if (show) { | ||
| searchFilter.classList.add('wmcads-search-filter--is-open'); | ||
| searchFilter.setAttribute('aria-expanded', 'true'); | ||
| } else { | ||
| searchFilter.classList.remove('wmcads-search-filter--is-open'); | ||
| searchFilter.setAttribute('aria-expanded', 'false'); | ||
| } | ||
| }; | ||
|
|
||
| const clearFilters = () => { | ||
| filterOptions.forEach(option => { | ||
| option.checked = false; // eslint-disable-line no-param-reassign | ||
| }); | ||
| searchFilter.classList.remove('wmcads-search-filter--has-inputs-checked'); | ||
| }; | ||
|
|
||
| showBtn.addEventListener('click', e => { | ||
| e.preventDefault(); | ||
| showFilter(); | ||
| }); | ||
|
|
||
| hideBtn.addEventListener('click', e => { | ||
| e.preventDefault(); | ||
| showFilter(false); | ||
| }); | ||
|
|
||
| document.querySelectorAll('.wmcads-search-filter__clear-all').forEach(clearBtn => { | ||
| clearBtn.addEventListener('click', e => { | ||
| e.preventDefault(); | ||
| clearFilters(); | ||
| }); | ||
| }); | ||
|
|
||
| showResults.addEventListener('click', () => showFilter(false)); | ||
| } | ||
| }; | ||
|
|
||
| export default searchFilterJs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| .template-search { | ||
| .wmcads-p-r-xl { | ||
| @media screen and (max-width: $breakpoint-md) { | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| .wmcads-hide-mobile { | ||
| @media screen and (max-width: $breakpoint-sm) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .wmcads-search-sort { | ||
| @media screen and (max-width: $breakpoint-sm) { | ||
| margin-top: $size-md; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| import pageContents from './pages/templates/campaign-two-columns/campaign-template'; | ||
| import search from './pages/templates/search/search-template'; | ||
|
|
||
| window.addEventListener('DOMContentLoaded', pageContents()); | ||
| window.addEventListener('DOMContentLoaded', pageContents(), search()); |