From a549ffd24ad908ec84a76641b685b211540b27f8 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Thu, 23 Jun 2022 11:09:09 -0400
Subject: [PATCH] ISTWCMS-5647: adding card teaser
---
.../card/card--teaser/_card--teaser.scss | 61 ++++++
.../card/card--teaser/_card--teaser.twig | 20 ++
.../card/card--teaser/card--teaser.twig | 17 ++
.../card/card--teaser/card--teaser.yml | 181 ++++++++++++++++++
4 files changed, 279 insertions(+)
create mode 100644 src/patterns/04-components/card/card--teaser/_card--teaser.scss
create mode 100644 src/patterns/04-components/card/card--teaser/_card--teaser.twig
create mode 100644 src/patterns/04-components/card/card--teaser/card--teaser.twig
create mode 100644 src/patterns/04-components/card/card--teaser/card--teaser.yml
diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.scss b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
new file mode 100644
index 00000000..40388933
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -0,0 +1,61 @@
+.card__teaser {
+ @include uw-flex-grid(card);
+
+ .views-row & {
+ height:100%;
+ }
+
+ .uw-label {
+ display: block;
+ margin-top: 1rem;
+ }
+
+ .card__tags {
+ margin: inherit;
+ margin-top: auto;
+ padding: 0;
+ }
+
+ .uw-node__without-image & {
+ .card__header,
+ .card__footer {
+ padding: 0;
+ }
+ }
+
+ &--profile {
+
+ .card {
+ &__image {
+ margin:0;
+ max-width:5rem;
+ }
+
+ &__header {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ //grid-template-rows: minmax(3rem, auto);
+ .uw-image__profiles {
+ grid-column: 1/2;
+ grid-row: 1 / 3;
+ margin-right: 1rem;
+ }
+
+ .card__position {
+ grid-column: 2/3;
+ grid-row: 2/3;
+ }
+
+ .card__title {
+ grid-column: 2/3;
+ grid-row: 1/2;
+ margin: 0;
+ }
+ }
+
+ &__body {
+ grid-column: 1/3;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.twig b/src/patterns/04-components/card/card--teaser/_card--teaser.twig
new file mode 100644
index 00000000..e3189e70
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/_card--teaser.twig
@@ -0,0 +1,20 @@
+{% if type and (type == 'header' or type == 'footer') %}
+ {% set show_hover = '' %}
+{% else %}
+ {% set show_hover = 'true' %}
+{% endif %}
+
+{% set modifier_classes = 'teaser--' ~ teaser.bundle %}
+
+{% include '@components/card/card.twig' with {
+ 'bundle': node.bundle,
+ 'modifier_classes': modifier_classes,
+ 'type': type,
+ 'url': teaser.url,
+ 'header': teaser.header,
+ 'image': teaser.image,
+ 'content': teaser.content,
+ 'footer': teaser.footer,
+ 'tags': teaser.tags,
+ 'show_hover': show_hover,
+} %}
diff --git a/src/patterns/04-components/card/card--teaser/card--teaser.twig b/src/patterns/04-components/card/card--teaser/card--teaser.twig
new file mode 100644
index 00000000..1d6228a3
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/card--teaser.twig
@@ -0,0 +1,17 @@
+<h2>Teaser - Blog</h2>
+{% include '@components/card/card--teaser/_card--teaser.twig' with {
+ 'teaser': teasers.blog,
+ 'type': 'teaser'
+} %}
+
+<h2>Teaser - Event</h2>
+{% include '@components/card/card--teaser/_card--teaser.twig' with {
+ 'teaser': teasers.events,
+ 'type': 'teaser'
+} %}
+
+<h2>Teaser - News</h2>
+{% include '@components/card/card--teaser/_card--teaser.twig' with {
+ 'teaser': teasers.news,
+ 'type': 'teaser'
+} %}
diff --git a/src/patterns/04-components/card/card--teaser/card--teaser.yml b/src/patterns/04-components/card/card--teaser/card--teaser.yml
new file mode 100644
index 00000000..ec5d1512
--- /dev/null
+++ b/src/patterns/04-components/card/card--teaser/card--teaser.yml
@@ -0,0 +1,181 @@
+teasers:
+ blog:
+ url: '#'
+ bundle: 'blog'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser'
+ author:
+ name: 'Blog Author'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '/images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '/images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ news:
+ url: '#'
+ bundle: 'news'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser'
+ author:
+ name: 'News Author'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '/images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '/images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ events:
+ url: '#'
+ bundle: 'event'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ image:
+ type: 'listing_image'
+ sources:
+ - srcset: '/images/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '/images/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '/images/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
--
GitLab