Skip to content

Commit

Permalink
feat: content template sidebar (#180)
Browse files Browse the repository at this point in the history
* make img height auto on mobile

* fix card spacing

* rename one col content template

* styling updates

* misc styling updates

Co-authored-by: Nathan Rogan <nathan.rogan@wmca.org.uk>
  • Loading branch information
rolorogan and nathan-rogan authored Jun 24, 2021
1 parent a6a1340 commit 0533c4b
Show file tree
Hide file tree
Showing 25 changed files with 397 additions and 245 deletions.
5 changes: 1 addition & 4 deletions src/wmcads/assets/sass/_typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,7 @@ body {

// Get rid of margin for the first header item in main content
* {
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
h1:first-child {
margin-top: 0;
}
}
Expand Down
28 changes: 25 additions & 3 deletions src/wmcads/assets/sass/_utilities.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
}

// MARGINS AND PADDINGS
// Helper mixin used to generate various sizes of margin/padding
// Helper mixin used to generate various sizes of margin/padding - wmcads-m-b-sm - wmcads-grid--spacing-lg-4-lg
@mixin x-mar-pad($side, $type: "margin") {
&-xs {
#{$type}#{$side}: $size-xs;
Expand All @@ -93,6 +93,10 @@

&-sm {
#{$type}#{$side}: $size-sm;

&-sm-none {
#{$type}#{$side}: $breakpoint-xs;
}
}

&-md {
Expand Down Expand Up @@ -161,13 +165,13 @@ body {
// Show/hide on desktop devices only
.wmcads-hide-mobile {
@media screen and (max-width: $breakpoint-md) {
display: none;
display: none !important;
}
}

.wmcads-hide-desktop {
@media screen and (min-width: $breakpoint-md) {
display: none;
display: none !important;
}
}

Expand Down Expand Up @@ -229,3 +233,21 @@ body {
background-color: transparent;
}
}

//Hide visually apart from screen readers
.visible-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;

&:focus {
position: absolute;
width: auto;
height: auto;
overflow: auto;
clip: auto;
}
}
4 changes: 1 addition & 3 deletions src/wmcads/assets/sass/split/typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@
// Mixins
@import "../mixins";


// Typography Styles
#umb-grid {
.umb-grid {
@import "../typography";
}

4 changes: 4 additions & 0 deletions src/wmcads/components/accordion/_accordion.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
width: calc(100% - 32px);
padding-right: $size-md;
vertical-align: middle;

h4 {
margin-top: 0;
}
}

&__icon {
Expand Down
2 changes: 1 addition & 1 deletion src/wmcads/components/breadcrumb/_breadcrumb.njk
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ And we show the current page breadcrumb at all times.
{#- Link back to homepage #}
<li class="wmcads-breadcrumb__list-item">
<a href="/" class="wmcads-breadcrumb__link">
Home
<i class="fal fa-home-alt" aria-hidden="true"></i>
</a>
</li>
{#- If pageTitle != same as section, then we can show section breadcrumb #}
Expand Down
4 changes: 2 additions & 2 deletions src/wmcads/components/content-card/_content-card.njk
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@

{# This macro checks if it's being called inside a {% call %} tag #}
{# It's an easier way to pass in larger html content #}
<{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews else "" }} ">
<{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews else "" }} {{"wmcads-css-grid-block--double" if params.isDoubleCard else "" }} ">
{% if(params.src) %}
<img
src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1216&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1316&height=345&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=600&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image">
{% endif %}
{% if(params.isCta) %}
<div class="wmcads-p-sm">
Expand Down
11 changes: 10 additions & 1 deletion src/wmcads/components/content-card/_content-card.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
//accessibility styles
@mixin accessibility-hover {
h2 {
h2,
h3 {
text-decoration: underline;
}

Expand Down Expand Up @@ -75,5 +76,13 @@
height: 180px;
padding: 1px;
object-fit: cover;

@media screen and (max-width: $breakpoint-md) {
height: auto;
}
}

h3 {
margin-top: 0;
}
}
4 changes: 4 additions & 0 deletions src/wmcads/components/hub-header/_hub-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@
left: calc((100% - 927px) / 2);
max-width: 468px;
overflow: auto;

@media (max-width: $breakpoint-lg) {
margin: $size-md;
}
}

h1 {
Expand Down
6 changes: 5 additions & 1 deletion src/wmcads/patterns/header/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ $header-height-mobile: 4rem;
// Logo styles
&__logo-link {
display: inline-block;
width: 34px;
width: 37px;
height: 34px;
margin-right: $size-sm;
overflow: hidden;
Expand Down Expand Up @@ -217,6 +217,10 @@ $header-height-mobile: 4rem;
background: transparent;
}
}

button {
font: caption;
}
}

// mobile only mega menu styles
Expand Down
2 changes: 2 additions & 0 deletions src/www/_partials/_template_head.njk
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,6 @@
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.3/styles/a11y-dark.min.css"/>
<link rel="stylesheet" href="$*cdn/css/wmcads-website.min.css" />
<link rel="stylesheet" href="$*cdn/css/templates.min.css" />

<script src="https://kit.fontawesome.com/32be3e4082.js" crossorigin="anonymous"></script>
</head>
5 changes: 4 additions & 1 deletion src/www/assets/json/merged.njk.json
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,10 @@
"name": "Campaign Two Columns"
},
{
"name": "Content Template"
"name": "Content One Column"
},
{
"name": "Content Two Columns"
}
]
}
Expand Down
20 changes: 10 additions & 10 deletions src/www/pages/patterns/header-and-footer/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,16 @@

{{
compExample([
wmcadsHeader({
navItems: navItems,
banner: true,
breadcrumbs: {
section: section,
pageTitle: pageTitle
},
exampleAria: "Full header",
id: "full"
})
wmcadsHeader ({
id: "mega-menu",
navItems: navItems,
banner: true,
linkTopLevel: true,
breadcrumbs: {
section: section,
pageTitle: pageTitle
}
})
])
}}

Expand Down
55 changes: 55 additions & 0 deletions src/www/pages/templates/_general.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
.wmcads-html {
.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;
}
}
}

.wmcads-page-contents {
@media screen and (max-width: $breakpoint-md) {
margin: 0 !important;
}
}
}

// Creates a css-grid layout for content cards
.wmcads-css-grid {
display: inline;

&-3-col {
@media screen and (min-width: $breakpoint-sm) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: $size-lg;
grid-auto-flow: row dense;
}

@media (min-width: $breakpoint-md) {
grid-template-columns: 1fr 1fr 1fr;
}
}

&-2-col {
@media screen and (min-width: $breakpoint-sm) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: $size-lg;
grid-auto-flow: row dense;
}
}

&-block {
&--double {
grid-column: auto / span 2;
}
}

}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.template-campaign-1-col {
.template-campaign {
.partner {
display: flex !important;
align-items: center;
Expand All @@ -8,18 +8,4 @@
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;
}
}
}
}
7 changes: 6 additions & 1 deletion src/www/pages/templates/campaign-one-column/index.njk
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{# Set array of tiles #}
{% block content %}

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

<div class="wmcads-container wmcads-hide-desktop">
<h1 id="wmcads-main-content">Roll &amp; Stroll</h1>
Expand Down Expand Up @@ -188,6 +188,11 @@
<img src="/img/examples/active-travel-fund.png" alt="Active Travel fund">
</a>
</div>
<div class="wmcads-col-2-3 wmcads-col-sm-1-2 wmcads-m-b-md partner">
<a href="/">
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg" alt="Active Travel fund">
</a>
</div>
</div>
</div>
</div>
Expand Down

This file was deleted.

Loading

0 comments on commit 0533c4b

Please sign in to comment.