Skip to content

Commit

Permalink
feat: search template amends (#200)
Browse files Browse the repository at this point in the history
* 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 <nathan.rogan@wmca.org.uk>
  • Loading branch information
rolorogan and nathan-rogan authored Jul 7, 2021
1 parent 0687c44 commit 956347b
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 82 deletions.
2 changes: 1 addition & 1 deletion src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div id="search_filter" class="wmcads-search-filter">
<div class="wmcads-search-filter__header">
<h3 class="wmcads-search-filter__header-title">Filter</h3>
<a href="#" class="wmcads-link wmcads-search-filter__clear-all">Clear all</a>
<a href="#" class="wmcads-search-filter__clear-all wmcads-hide-desktop">Clear all</a>
<a href="#" id="hide_filter_btn" class="wmcads-search-filter__close">
<svg>
<title>Close</title>
Expand Down
13 changes: 13 additions & 0 deletions src/wmcads/patterns/search/search-filter/_search-filter.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -149,4 +161,5 @@ $transition-fade-in: opacity 0.2s ease-out;
}
}
}

}
1 change: 0 additions & 1 deletion src/www/_layouts/_template-master-layout.njk
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@

<!-- Scripts -->
{% include "www/_partials/_scripts.njk" %}
<script src="$*cdn/js/wmcads-templates.min.js"></script>
<!-- end: Scripts -->
</body>

Expand Down
54 changes: 29 additions & 25 deletions src/www/pages/templates/campaign-two-columns/campaign-template.js
Original file line number Diff line number Diff line change
@@ -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;
76 changes: 24 additions & 52 deletions src/www/pages/templates/search/index.njk
Original file line number Diff line number Diff line change
@@ -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 %}

Expand All @@ -22,31 +19,6 @@
<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">
Expand Down Expand Up @@ -99,31 +71,31 @@
activePage: 1
})}}
</div>
<aside class="wmcads-col-1 wmcads-col-md-1-3 wmcads-m-b-lg wmcads-hide-mobile">
<aside class="wmcads-col-1 wmcads-col-md-1-3 wmcads-m-b-lg">
<hr 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"
]
}
]}
)}}

{
accordion: [{
summaryTitle: "Topic",
options: [
"Tickets", "Transport", "Housing and Land", "Economy and Innovation", "Public Service Reform", "Digital and Culture", "Wellbeing", "Environment"
]
},
{
summaryTitle: "Page type",
options: [
"News articles", "Other/Everything else", "Campaigns", "People’s stories", "Projects/programmes"
]
},
{
summaryTitle: "Date",
options: [
"Added in the last week", "Added in the last month", "Added in the last year"
]
}
]})
}}
</aside>
</div>
</div>
Expand Down
25 changes: 23 additions & 2 deletions src/www/pages/templates/search/search.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
}
}
}
}

0 comments on commit 956347b

Please sign in to comment.