Skip to content

Commit

Permalink
feat: campaign templates (#146)
Browse files Browse the repository at this point in the history
* add margin to right col

* remove dfault margin for main container

* Add ability to overlay loop on an image (campain)

* campaign page - one col

* remove width and add dynamic title

* campaign 2 col template

* styling updates

* add alt to img

Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>
  • Loading branch information
rolorogan and nathan-rogan authored May 5, 2021
1 parent 4d9188f commit 6ad80c6
Showing 15 changed files with 475 additions and 8 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/wmcads/assets/sass/_mixins.scss
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
// Heading 1 (46px)
@if $level == 1 {
margin-top: 1.5rem * $multiplier;
margin-bottom: 3rem * $multiplier;
margin-bottom: 2rem * $multiplier;
font-size: 2.875rem * $multiplier;
line-height: 3rem * $multiplier;
}
1 change: 0 additions & 1 deletion src/wmcads/assets/sass/_utilities.scss
Original file line number Diff line number Diff line change
@@ -50,7 +50,6 @@
}

&--main {
margin-bottom: $size-lg;
flex-grow: 1;
}
}
6 changes: 4 additions & 2 deletions src/wmcads/components/page-contents/_page-contents.njk
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
{% macro wmcadsPageContents(params) %}
<div class="wmcads-page-contents">
{% set title = params.title if params.title else "Page title" %}

<div class="wmcads-page-contents {% if(params.rightMargin) %} wmcads-m-r-lg {% endif %}">
<h3>Page contents</h3>
<div>Page title</div>
<div>{{title}}</div>
<a>link 1</a>
<a>link 2</a>
<a>link 3</a>
2 changes: 0 additions & 2 deletions src/wmcads/components/page-contents/_page-contents.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
.wmcads-page-contents {
width: 288px;
min-height: 57px;
margin-bottom: 30px;
padding: 10px;
border-bottom: 3px solid $black;
7 changes: 7 additions & 0 deletions src/wmcads/patterns/feedback-loop/_feedback-loop.scss
Original file line number Diff line number Diff line change
@@ -10,6 +10,12 @@

// Override container defaults
.wmcads-container {
position: absolute;
right: 0;
left: 0;
margin-top: -$size-lg;
margin-right: auto;
margin-left: auto;
padding: $size-xs $size-md;
overflow: hidden;
color: $white;
@@ -33,6 +39,7 @@
border-left: 1px solid get-color(cta);
color: initial;
background-color: $white;
text-align: center;
}

.wmcads-link {
3 changes: 2 additions & 1 deletion src/www/_layouts/_template-master-layout.njk
Original file line number Diff line number Diff line change
@@ -30,8 +30,9 @@
{# header #}

{# main #}
<main class="wmcads-container--main">
<main class="wmcads-container--main {% if(params.tempCampaign) %} wmcads-m-r-lg {% endif %}">
{% block body %}{% endblock %}
{{params}}
</main>
{# main #}

2 changes: 1 addition & 1 deletion src/www/_layouts/layout-left-pane.njk
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
<div class="wmcads-col-1 wmcads-col-lg-1-3 wmcads-p-b-lg">
{% include "www/_partials/nav/subnav.njk" %}
</div>
<div class="wmcads-col-1 wmcads-col-lg-2-3" id="wmcads-main-content">
<div class="wmcads-col-1 wmcads-col-lg-2-3 wmcads-m-b-xl" id="wmcads-main-content">
<h1>{{ pageTitle }}</h1>
<hr>
{% block content %}{% endblock content %}
6 changes: 6 additions & 0 deletions src/www/assets/json/merged.njk.json
Original file line number Diff line number Diff line change
@@ -147,6 +147,12 @@
{
"name": "Homepage"
},
{
"name": "Campaign One Column"
},
{
"name": "Campaign Two Columns"
},
{
"name": "Content Template"
}
25 changes: 25 additions & 0 deletions src/www/pages/templates/campaign-one-column/campaign-template.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.template-campaign-1-col {
.partner {
display: flex !important;
align-items: center;
justify-content: center;

@media screen and (max-width: $breakpoint-sm) {
padding: 0 !important;
}
}

.wmcads-grid--justify-between {
.wmcads-p-r-sm {
@media screen and (max-width: $breakpoint-sm) {
padding: 0 !important;
}
}

.wmcads-p-l-sm {
@media screen and (max-width: $breakpoint-sm) {
padding: 0 !important;
}
}
}
}
195 changes: 195 additions & 0 deletions src/www/pages/templates/campaign-one-column/index.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
{% extends "www/_layouts/template-layout-fullwidth.njk" %}
{% set pageTitle="Campaign Template - One Column" %} {% 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-header/_page-header.njk" import wmcadsPageHeader %}
{%- from "wmcads/components/button/_button.njk" import wmcadsButton as start -%}
{# Set array of tiles #}
{% block content %}

<div class="template-campaign-1-col">

<div class="wmcads-container wmcads-hide-desktop">
<h1 id="wmcads-main-content">Roll &amp; Stroll</h1>
</div>

{{
wmcadsPageHeader({
title: false,
large: true
})
}}
<div class="wmcads-container">
<div class="wmcads-grid">
<div class="wmcads-col-1 wmcads-col-md-3-4 wmcads-p-t-lg">
<h1 id="wmcads-main-content" class="wmcads-hide-mobile">Roll &amp; Stroll</h1>
<h2>Have your say on cycling &amp; walking changes in your local area.</h2>
<p>Lockdown has been quite a journey but cycling and walking is more popular than ever.</p>
<p>After marking this year the Big Summer of Cycling &amp; Walking, let’s not stop now. We're continuing to invest in creating a region that supports healthy, greener and safer travelling. We want to help you get started or keep going.</p>
<p>Whatever your travel plans - whether it's a cycle around your local streets or a winter walkie - we're here to help you start the adventure before you get there. There’s never been a better time to stay fit and healthy than right now - so, get your roll &amp; stroll on!</p>
{{
start({
classNames: "wmcads-btn--start",
text: "Have your say",
iconRight: "general-chevron-right"
})
}}

<hr class="wmcads-divider-wmgreen wmcads-m-t-lg" aria-hidden="true">
<h2>Cycling &amp; walking in your area</h2>
<div class="wmcads-grid wmcads-grid--justify-between">
<div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm"">
{{
wmcadsContentCard({
clickable: true,
src: true,
isThirdCard: false,
title: 'Get Going Continue Rolling',
copy: 'Whether youre rolling to work or school, or catching some fresh air, theres always safe and new ways to get there.'
})
}}
</div>
<div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
{{
wmcadsContentCard({
clickable: true,
src: true,
isThirdCard: false,
title: 'All things strolling',
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">
{{
wmcadsContentCard({
clickable: true,
src: true,
isThirdCard: false,
title: 'Changes in your area',
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">
{{
wmcadsContentCard({
clickable: true,
src: true,
isThirdCard: false,
title: 'Get active and travel safely',
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">
<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">
<!-- accordion summary -->
<div class="wmcads-accordion__summary">
<h4 class="wmcads-m-b-none">Love to Ride</h4>
</div>
<!-- plus icon -->
<svg class="wmcads-accordion__icon">
<use xlink:href="#wmcads-general-expand" href="#wmcads-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmcads-accordion__icon wmcads-accordion__icon--minimise">
<use xlink:href="#wmcads-general-minimise" href="#wmcads-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmcads-accordion__content" id="accordion-01">
<p>
<strong>Some random subtitle</strong>
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
</p>
</div>
</div>
<div class="wmcads-accordion wmcads-m-b-sm">
<button aria-controls="accordion-01" class="wmcads-accordion__summary-wrapper" aria-expanded="false">
<!-- accordion summary -->
<div class="wmcads-accordion__summary">
<h4 class="wmcads-m-b-none">Love your bike</h4>
</div>
<!-- plus icon -->
<svg class="wmcads-accordion__icon">
<use xlink:href="#wmcads-general-expand" href="#wmcads-general-expand"></use>
</svg>
<!-- minus icon -->
<svg class="wmcads-accordion__icon wmcads-accordion__icon--minimise">
<use xlink:href="#wmcads-general-minimise" href="#wmcads-general-minimise"></use>
</svg>
</button>
<!-- accordion content -->
<div class="wmcads-accordion__content" id="accordion-01">
<p>
<strong>Some random subtitle</strong>
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt consectetur, eius repellat dolor vel corporis eos fugiat. Ut totam, incidunt sequi iusto nesciunt illum natus, dolores velit cumque, excepturi labore!
</p>
</div>
</div>
<hr class="wmcads-divider-wmgreen wmcads-m-t-xl" aria-hidden="true">
<h2>Additional Information</h2>
<div class="wmcads-grid wmcads-grid--justify-between">
<div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-r-sm wmcads-m-b-sm"">
{{
wmcadsContentCard({
clickable: true,
src: true,
isThirdCard: false,
title: 'Support for businesses',
copy: 'We have a wide range of options to support your business and employees at work and at home'
})
}}
</div>
<div class="wmcads-col-1 wmcads-col-sm-1-2 wmcads-p-l-sm wmcads-m-b-sm">
{{
wmcadsContentCard({
clickable: true,
src: true,
isThirdCard: false,
title: 'Be Aware and Share',
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">

<h3>Campaign Funding Partners</h3>

<div class="wmcads-grid wmcads-grid--spacing-2-md">
<div class="wmcads-col-2-3 wmcads-col-sm-1-2 wmcads-m-b-md partner">
<a href="/">
<img src="/img/examples/active-travel-fund.png" alt="Active Travel fund">
</a>
</div>
</div>
</div>
</div>
</div>

<div class="wmcads-grid wmcads-grid--justify-center">
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=1280&height=400&rnd=132122595620000000" alt="campaign bottom image" />
</div>

</div>
{% endblock %}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.template-campaign-2-col {
.wmcads-page-contents {
@media screen and (max-width: $breakpoint-md) {
margin: 0 !important;
}
}

h1 {
@media screen and (max-width: $breakpoint-md) {
margin-top: $size-md !important;
}
}

.wmcads-grid--justify-between {
.wmcads-p-r-sm {
@media screen and (max-width: $breakpoint-sm) {
padding: 0 !important;
}
}

.wmcads-p-l-sm {
@media screen and (max-width: $breakpoint-sm) {
padding: 0 !important;
}
}
}
}
Loading

0 comments on commit 6ad80c6

Please sign in to comment.