Commit f8cf2bfe authored by Chris Shantz's avatar Chris Shantz
Browse files

Merge branch '3.0.x' into prod/3.0.x

parents e41b0ba2 0824dbcd
......@@ -58,14 +58,14 @@ $test-color-12: #f00;
width: 100vw;
}
@mixin uw-full-width-reset {
left: 0;
left: inherit;
margin-left: -1rem;
margin-right: -1rem;
max-width: 100%;
padding: 0;
margin-right: -2rem;
max-width: inherit;
padding:inherit;
position: relative;
right: 0;
width: 100%;
right: inherit;
width: inherit;
}
@mixin uw-contained-width-reset() {
margin-left:inherit;
......
......@@ -96,7 +96,9 @@ label,
font-family: $form-label-font-family;
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
margin-bottom: rem(gesso-spacing(xs));
form &{
margin-bottom: rem(gesso-spacing(xs));
}
abbr {
display: inline;
font-size: gesso-font-size(1);
......
......@@ -5,10 +5,14 @@ img {
border: 0;
font-style: italic; // Makes alt text stand out from surrounding text.
max-width: 100%;
vertical-align: middle;
@media print {
max-width: 100% !important;
page-break-inside: avoid;
}
}
.media--type-uw-mt-image{
img{
height: auto;
}
}
......@@ -6,9 +6,6 @@ $sidebar-gap: $grid-gap;
}
&__sidebar{
display:none;
*{
padding-right:0.25rem;
}
}
// Reset the grid to become flexed when we have sidebar.
&.uw-node__with-sidebar{
......@@ -25,25 +22,30 @@ $sidebar-gap: $grid-gap;
margin:0 auto;
}
.uw-full-width{
width:100vw;
}
@include medium {
flex-direction: row;
gap:$sidebar-gap;
.layout{
padding-right:0;
width: clamp(320px, 868px, calc(100vw - 347px));
}
.uw-contained-width{
padding-right:0;
width: clamp(320px, 868px, calc(100vw - 347px));
}
/* Match the width of WCMS2's narrow: 496px */
.uw-contained-width--narrow{
padding-right:0;
width: clamp(320px, 496px, calc(100vw - 347px));
}
/* Match the width of WCMS2's wide: 753px */
.uw-contained-width--wide{
padding-right:0;
width: clamp(320px, 753px, calc(100vw - 347px));
}
}
......@@ -51,27 +53,33 @@ $sidebar-gap: $grid-gap;
.uw-node__sidebar{
// Turn on sidebar with display.
display:block;
padding:0 1rem;
width:100%;
.layout{
padding:0;
}
@include medium {
padding: 1rem 0;
padding:0;
width: $sidebar-width;
.layout{
width:inherit;
}
}
}
}
}
// Class appears when full width content loads with sidebar on page
.uw-section-has-full-width.uw-node__with-sidebar {
.uw-node__grid {
justify-content: space-between;
.uw-node__node{
width:100%;
@include medium {
padding-right:0;
width: calc(100vw - 347px);
}
}
}
.uw-full-width{
max-width:inherit;
padding:0;
......@@ -79,8 +87,8 @@ $sidebar-gap: $grid-gap;
}
}
.uw-node__sidebar{
padding: 0
@include medium{
padding: 0
}
}
}
......@@ -8,7 +8,7 @@
$(document).ready(function () {
// Step through each FF on the page.
$('.card.banner').each(function () {
$('.card__banner').each(function () {
// Get the number of items for the carousel, if any.
var num_of_items = 1;
......
{% embed '@layouts/carousel/carousel.twig' %}
{% block content %}
{% include '@components/card/card--banner/card--banner.twig' with {
banners: banners,
'banners': banners,
} %}
{% endblock %}
{% endembed %}
\ No newline at end of file
{% endembed %}
......@@ -24,9 +24,10 @@ banners:
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
big_text: 'Image1'
small_text: 'Caption 1'
link: 'http://google.ca'
big_text: 'President Goel leads Waterloo into bold new futures'
small_text: 'Vivek Goel officially installed as the University of Waterloo’s seventh president and vice-chancellor'
faculty: 'org-default'
-
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
......@@ -46,7 +47,10 @@ banners:
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
small_text: 'Image2'
link: 'http://google.ca'
big_text: 'President Goel leads Waterloo into bold new futures'
small_text: 'Vivek Goel officially installed as the University of Waterloo’s seventh president and vice-chancellor'
faculty: 'org-mat'
-
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
......@@ -67,6 +71,9 @@ banners:
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
link: 'http://google.ca'
big_text: 'President Goel leads Waterloo into bold new futures'
small_text: 'Vivek Goel officially installed as the University of Waterloo’s seventh president and vice-chancellor'
faculty: 'org-sci'
autoplay: 1
slide_speed: 7000
style: 'full-width'
......
......@@ -8,18 +8,12 @@ $card-meta-color: gesso-color(ui, generic, text-dark) !default;
$card-padding: rem(gesso-spacing(sm)) !default;
.card {
@include uw-flex-grid(card);
//background:$test-color-1;
width: 100%;
.views-row &{
height:100%;
}
.uw-label{
display:block;
margin-top:1rem;
}
&__catalog-tags {
padding-bottom: rem(gesso-spacing(sm));
}
......@@ -29,25 +23,67 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card--show-hover{
border-bottom: 3px solid $card-accent-border-color;
box-shadow: gesso-box-shadow(1);
padding: $card-padding;
transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
&:hover,
&:focus-within {
box-shadow: gesso-box-shadow(3);
}
}
.card__featured-image{
background-position:center center;
background-repeat:no-repeat;
.card__image{}
.card__featured-image {
align-items: center;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height:45rem;
display: grid;
height: 45rem;
justify-items: center;
min-height: 44rem;
position: relative;
.card__header {
align-self: end;
margin-bottom: 0;
margin-top: 0;
max-width: $max-width;
padding: 0 gesso-spacing(md);
@include xl {
padding: 0;
}
.card__date {
margin-bottom: 0;
margin-top: 0;
}
.card__title {
background: gesso-brand(org-default, uw-white, primary);
font-size: gesso-font-size(8);
margin-bottom: 0;
margin-top: 0;
padding: gesso-spacing(sm) gesso-spacing(md);
}
.card__sub-title {
background: gesso-brand(org-default, uw-white, primary);
font-size: gesso-font-size(4);
margin-bottom: 0;
margin-top: 0;
padding: gesso-spacing(xs) gesso-spacing(md);
}
.card__author {
background: gesso-brand(org-default, uw-white, primary);
margin-bottom: 0;
margin-top: 0;
padding: gesso-spacing(xs) gesso-spacing(md);
}
}
}
// top
.card__header{
@include uw-no-breakout();
color: $card-meta-color;
margin-bottom: rem(gesso-spacing(sm));
margin-bottom: rem(gesso-spacing(xs));
width: 100%;
}
......@@ -66,10 +102,13 @@ $card-padding: rem(gesso-spacing(sm)) !default;
);
}
}
.card__sub-title{}
.card__author{
@include uw-no-breakout();
font-family: gesso-font-family(systemmedium);
font-size: gesso-font-size(-1);
margin-top: 0;
padding: 0 0 gesso-spacing(xs) 0;
a {
@include link(
$card-link-color,
......@@ -79,17 +118,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
// body
.card__body {
@include uw-flex-grid();
//background:$test-color-10;
gap:inherit;
padding: $card-padding;
width: 100%;
}
.card__content {
//background:$test-color-9;
margin-bottom: rem(gesso-spacing(md));
width: 100%;
&:empty{
margin-bottom:0;
}
}
.card__media {
//background:$test-color-4;
......@@ -130,21 +166,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
// footer
.card__footer {
@include uw-no-breakout();
margin-top: auto;
padding: rem(gesso-spacing(md));
width: 100%;
> div {
margin-bottom: rem(gesso-spacing(sm));
&:last-child {
margin-bottom: 0;
}
}
}
.card__tags{
margin:0;
padding:0;
width: 100%;
}
.card__readmore {
text-align: right;
......@@ -154,8 +183,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
width: 100%;
}
// Have not worked on card feature.
.card--feature {
.card__body {
padding-top: $card-padding;
......
......@@ -4,100 +4,119 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.#{$faculty} {
// If the UW branding group
@if $faculty == org-default {
.card.banner{
.card__header{
background-color: rgba(0,0,0,.8);
.card__banner--caption{
background-color:$uw-black;
@include small {
background-color: rgba(0,0,0,.8);
}
a {
color: $uw-gold;
&:hover {
color: $uw-gold;
}
}
}
.sub-title{
.card__banner--sub-title {
color: $uw-white;
}
.card__title {
.card__banner--title {
color: $uw-gold;
a {
color: $uw-gold;
}
}
}
}
@else {
.card.banner{
.card__header{
background: rgba(gesso-brand($faculty, 'primary'), 0.8);
.card__banner--caption{
background:gesso-brand($faculty, 'primary');
@include small {
background: rgba(gesso-brand($faculty, 'primary'), 0.8);
}
a {
color:gesso-brand($faculty, 'lvl1');
&:hover {
color:gesso-brand($faculty, 'lvl1');
}
}
}
.sub-title{
.card__banner--sub-title {
color:gesso-brand($faculty, 'lvl1');
}
.card__title {
.card__banner--title {
color:gesso-brand($faculty, 'lvl1');
a {
color:gesso-brand($faculty, 'lvl1');
}
}
}
}
}
}
.card.banner {
.card__banner {
.card__body {
padding:inherit;
}
}
.card__banner--image {
margin-bottom: 0;
padding: 0;
position:relative;
position: relative;
}
.card__banner--caption {
display: block;
height: auto;
margin-bottom: 0;
opacity: 1;
padding: 1rem 2rem;
position:relative;
@include small{
bottom:0;
position:absolute;
}
.card__content{
display:none;
text-align: center;
width: 100%;
z-index: gesso-z-index(overlay);
strong{
font-weight:400;
}
.card__header {
bottom: 0;
display: block;
height: auto;
margin-bottom:0;
opacity: 1;
padding: 1rem 2rem;
position: absolute;
text-align: center;
width: 100%;
z-index: gesso-z-index(overlay);
.card__title {
font-family: $header-font-family;
font-size: gesso-font-size(6);
line-height: 1.25;
margin:0;
}
.sub-title {
font-family:gesso-font-family(book);
font-size: gesso-font-size(0);
line-height:1;
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.card__media {
margin-bottom: 0;
order:inherit;
a {
display:block;
}
.card__banner--title {
display: block;
font-family: $header-font-family;
font-size: gesso-font-size(6);
font-weight: 400;
letter-spacing: .045rem;
line-height: 1.25;
margin: 0;
text-align: center;
width:auto;
}
.card__banner--sub-title {
display: block;
font-family: gesso-font-family(book);
font-size: gesso-font-size(0);
line-height: 1.25;
width:auto;
}
.card__banner--media {
background:$uw-black;
margin-bottom: 0;
order: inherit;
a {
background:$uw-black;
display: block;
opacity:1;
transition-delay: 0s;
transition-duration: .2s;
transition-property: color,background-color,border-color,opacity;
transition-timing-function: linear;
&:hover{
opacity:0.6;
transition-delay: 0s;
transition-duration: .2s;
transition-property: color,background-color,border-color,opacity;
transition-timing-function: linear;
}
}
.card__title {
a {
font-family: $header-font-family;
font-weight: 400;
letter-spacing: .045rem;
text-align: center;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}
{% for image in banners.images %}
{% include '@components/card/card.twig' with {
sources: image.sources,
img_element: image.img_element,
alt: image.alt,
card_type: 'banner',
title: image.big_text,
sub_title: image.small_text,
url: image.link,
'banner': image,
'show_header': 'no',
'type': 'banner',
'faculty': faculty,
} %}
{% endfor %}
......@@ -3,7 +3,7 @@ banners:
-
sources:
-
srcset: '../../../../source/images/president/president_xlarge.jpg'
srcset: '../../../../source/images/president/original.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
-
......@@ -22,53 +22,8 @@ banners:
srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
img_element: '../../../../source/images/president/original.jpg'
alt: 'Alternative text'
big_text: 'Image1'
small_text: 'Caption 1'
link: 'http://google.ca'
-
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
big_text: 'Image2'
-
sources: