From f8bf4ba6bc67d7598257eb389fc672421422ddc6 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Tue, 11 May 2021 16:42:47 -0400
Subject: [PATCH] ISTWCMS-4695: completing logic and templates for card--baner
---
css/styles.css | 17 ++++++++-----
js/component_scripts.min.js | 1 -
.../card/card--banner/_card--banner.scss | 6 +++++
.../card/card--banner/card--banner.js | 1 -
.../card/card--banner/card--banner.twig | 20 +++++++--------
.../card/card--banner/card--banner.yml | 25 +++++++++++--------
source/_patterns/04-components/card/card.twig | 13 +++++++---
7 files changed, 52 insertions(+), 31 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index b1491a75..2430c261 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3511,12 +3511,17 @@ button {
.card.banner .card__media {
margin-bottom: 0; }
-.card.banner .card__title a {
- color: #fdd54f;
- font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
- font-weight: 400;
- letter-spacing: .045rem;
- text-align: center; }
+.card.banner .card__title {
+ color: #fdd54f; }
+ .card.banner .card__title a {
+ color: #fdd54f;
+ font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+ font-weight: 400;
+ letter-spacing: .045rem;
+ text-align: center; }
+
+.card.banner .sub-title {
+ color: #fdd54f; }
.uw-colour-bar__cbarorg-default__uw-gold--lvl1 {
background-color: #fffaaa; }
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index ba3f6ea4..04a5e1ca 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -302,7 +302,6 @@ else {
attach: function (context, settings) {
$(document).ready(function () {
- console.log('HERE1');
// Step through each FF on the page.
$('.card.banner').each(function () {
diff --git a/source/_patterns/04-components/card/card--banner/_card--banner.scss b/source/_patterns/04-components/card/card--banner/_card--banner.scss
index 9a32b64f..b062fe1c 100644
--- a/source/_patterns/04-components/card/card--banner/_card--banner.scss
+++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss
@@ -21,6 +21,8 @@
}
.card__title {
+ color: $uw-gold;
+
a {
color: $uw-gold;
font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
@@ -29,4 +31,8 @@
text-align: center;
}
}
+
+ .sub-title {
+ color: $uw-gold;
+ }
}
\ No newline at end of file
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.js b/source/_patterns/04-components/card/card--banner/card--banner.js
index dc64cac6..9e9a9d7c 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.js
+++ b/source/_patterns/04-components/card/card--banner/card--banner.js
@@ -3,7 +3,6 @@
attach: function (context, settings) {
$(document).ready(function () {
- console.log('HERE1');
// Step through each FF on the page.
$('.card.banner').each(function () {
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.twig b/source/_patterns/04-components/card/card--banner/card--banner.twig
index cdc949e2..9b151b03 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.twig
+++ b/source/_patterns/04-components/card/card--banner/card--banner.twig
@@ -1,15 +1,15 @@
{% embed '@layouts/carousel/carousel.twig' %}
{% block content %}
- {% for image in images %}
- {% for img in image %}
- {% include '@components/card/card.twig' with {
- sources: img.sources,
- img_element: img.img_element,
- type: 'banner',
- title: img.title,
- header_level: 2,
- } %}
- {% endfor %}
+ {% for image in banners.images %}
+ {% include '@components/card/card.twig' with {
+ sources: image.sources,
+ img_element: image.img_element,
+ type: 'banner',
+ title: image.big_text,
+ sub_title: image.small_text,
+ header_level: 2,
+ url: image.link,
+ } %}
{% endfor %}
{% endblock %}
{% endembed %}
\ No newline at end of file
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.yml b/source/_patterns/04-components/card/card--banner/card--banner.yml
index e9549c06..44f6529d 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.yml
+++ b/source/_patterns/04-components/card/card--banner/card--banner.yml
@@ -1,6 +1,6 @@
-images:
- -
- image:
+banners:
+ images:
+ -
sources:
-
srcset: '../../../../source/images/president/president_xlarge.jpg'
@@ -24,9 +24,10 @@ images:
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
- title: 'Image1'
- -
- image:
+ 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)'
@@ -45,9 +46,8 @@ images:
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
- title: 'Image2'
- -
- image:
+ big_text: 'Image2'
+ -
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -66,4 +66,9 @@ images:
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
- title: 'Image3'
+ big_text: 'Image3'
+ link: 'http://google.ca'
+ autoplay: 1
+ slide_speed: 7000
+ style: 'full-width'
+ transition_speed: 400
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 08a4e850..20e42e62 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -23,10 +23,17 @@
{% if title %}
<h{{ header_level }} class="card__title">
- <a href="{{ url }}">
- {{ title }}
- </a>
+ {% if url %}
+ <a href="{{ url }}">
+ {% endif %}
+ {{ title }}
+ {% if url %}
+ </a>
+ {% endif %}
</h{{ header_level }}>
+ {% if sub_title %}
+ <span class="sub-title">{{ sub_title }}</span>
+ {% endif %}
{% endif %}
{% if author_name %}
--
GitLab