-
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.
* 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
1 parent
4d9188f
commit 6ad80c6
Showing
15 changed files
with
475 additions
and
8 deletions.
There are no files selected for viewing
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.
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 |
---|---|---|
|
@@ -50,7 +50,6 @@ | |
} | ||
|
||
&--main { | ||
margin-bottom: $size-lg; | ||
flex-grow: 1; | ||
} | ||
} | ||
|
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
25 changes: 25 additions & 0 deletions
25
src/www/pages/templates/campaign-one-column/campaign-template.scss
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,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; | ||
} | ||
} | ||
} | ||
} |
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,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 & 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 & Stroll</h1> | ||
<h2>Have your say on cycling & 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 & 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 & 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 & 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 %} |
27 changes: 27 additions & 0 deletions
27
src/www/pages/templates/campaign-two-columns/campaign-template.scss
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,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; | ||
} | ||
} | ||
} | ||
} |
Oops, something went wrong.