From cc3409636d7bce358eca272423983669e1f39c8f Mon Sep 17 00:00:00 2001 From: Eric Bremner <ebremner@uwaterloo.ca> Date: Mon, 15 Nov 2021 16:21:52 +0000 Subject: [PATCH] ISTWCMS-5195: updating banners to work --- .../04-components/banners/banners.twig | 4 +-- .../card/card--banner/_card--banner.scss | 3 -- .../card/card--banner/card--banner.twig | 10 ++----- .../card/card-elements/_banner.twig | 30 +++++++++++++++++++ source/_patterns/04-components/card/card.twig | 23 +++++++++----- 5 files changed, 50 insertions(+), 20 deletions(-) create mode 100644 source/_patterns/04-components/card/card-elements/_banner.twig diff --git a/source/_patterns/04-components/banners/banners.twig b/source/_patterns/04-components/banners/banners.twig index be699f54..d546e2bb 100644 --- a/source/_patterns/04-components/banners/banners.twig +++ b/source/_patterns/04-components/banners/banners.twig @@ -1,7 +1,7 @@ {% 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 %} 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 09c6d985..b191f163 100644 --- a/source/_patterns/04-components/card/card--banner/_card--banner.scss +++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss @@ -49,9 +49,6 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat' position:relative; } - .card__content{ - display:none; - } .card__header { bottom: 0; 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 2ccb9754..2e31e0d0 100644 --- a/source/_patterns/04-components/card/card--banner/card--banner.twig +++ b/source/_patterns/04-components/card/card--banner/card--banner.twig @@ -1,11 +1,7 @@ {% 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', } %} {% endfor %} diff --git a/source/_patterns/04-components/card/card-elements/_banner.twig b/source/_patterns/04-components/card/card-elements/_banner.twig new file mode 100644 index 00000000..64db59fd --- /dev/null +++ b/source/_patterns/04-components/card/card-elements/_banner.twig @@ -0,0 +1,30 @@ +{% if image.big_text or image.small_text %} + <div class="card__header"> + {% if image.big_text %} + <div class="card__title"> + {{ image.big_text }} + </div> + {% endif %} + {% if image.small_text %} + <span class="sub-title"> + {{ image.small_text }} + </span> + {% endif %} + </div> +{% endif %} + +<div class="card__banner"> + {% if image.url %} + <a href="{{ image.url }}"> + {% endif %} + + {% include "@components/responsive-image/responsive-image.twig" with { + sources: image.sources, + img_element: listing_image.img_element, + alt: listing_image.alt + }%} + + {% if url %} + </a> + {% endif %} +</div> diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig index 6754d838..0a5439e4 100644 --- a/source/_patterns/04-components/card/card.twig +++ b/source/_patterns/04-components/card/card.twig @@ -7,6 +7,10 @@ {% endif %} {% endif %} +{% if show_header is null %} + {% set show_header = 'yes' %} +{% endif %} + <article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" > {% if hero_image %} @@ -16,10 +20,13 @@ {% endif %} <div class="card__body"> - {% include '@components/card/card-elements/_header.twig' with { - 'header': header, - 'show_title': show_title - } %} + + {% if show_header == 'yes' %} + {% include '@components/card/card-elements/_header.twig' with { + 'header': header, + 'show_title': show_title + } %} + {% endif %} {% if listing_image %} {% include '@components/card/card-elements/_listing-image.twig' with { @@ -27,10 +34,10 @@ } %} {% endif %} - {% if image and not card_type == 'banner' %} - <div class="card__image"> - <img src="{{ image }}" alt="{{ alt }}" /> - </div> + {% if banner %} + {% include '@components/card/card-elements/_banner.twig' with { + 'banner': banner + } %} {% endif %} {% if content %} -- GitLab