Skip to content
Snippets Groups Projects
Commit 0380972b authored by Eric Bremner's avatar Eric Bremner
Browse files

ISTWCMS-5195: adding many card elements to make card easier to read

parent b3dbc185
No related branches found
No related tags found
1 merge request!118Feature/istwcms 5195 ebremner node theming
Hide whitespace changes
Inline Side-by-side
Showing
with 108 additions and 87 deletions
source/_patterns/04-components/card/card--node/card--node.twig
+ 3
− 10
View file @ 0380972b
......@@ -4,23 +4,16 @@
{% set node_image_class = 'without-image' %}
{% endif %}
{{ dd(node) }}
<div class="uw-node__{{ node_image_class }}">
{% include '@components/card/card.twig' with {
'type': type,
'title': node.title,
'sub_title': node.sub_title,
'featured_image': featured_image,
'hero': node.hero,
'date': node.date,
'hero_image': node.hero_image,
'header': node.header,
'tags': node.tags,
'content': node.content,
'sources': node.image.sources,
'img_element': node.image.img_element,
'image': node.image.uri,
'alt': node.image.alt,
'header_level': 2,
'show_hover': '',
'author': node.author,
'url': node.url,
'additional_info': node.additional_info,
'location_info': node.location_info,
......
source/_patterns/04-components/card/card-elements/_author.twig 0 → 100644
+ 8
− 0
View file @ 0380972b
<div class="card__author">
by
{% if author.link %}
<a href="{{ author.link }}">{{ author.name }}</a>
{% else %}
{{ author.name }}
{% endif %}
</div>
source/_patterns/04-components/card/card-elements/_content.twig 0 → 100644
+ 3
− 0
View file @ 0380972b
<div class="card__content">
{{ content }}
</div>
source/_patterns/04-components/card/card-elements/_date.twig 0 → 100644
+ 6
− 0
View file @ 0380972b
<div class="card__date">
{% include '@components/date/date.twig' with {
'date_format': date_format,
'date': date,
} %}
</div>
source/_patterns/04-components/card/card-elements/_header.twig 0 → 100644
+ 27
− 0
View file @ 0380972b
<div class="card__header">
{% if header.date %}
{% include '@components/card/card-elements/_date.twig' with {
'date_format': date_format,
'date': header.date,
} %}
{% endif %}
{% if show_title == 'yes' %}
{% include '@components/card/card-elements/_title.twig' with {
'header_level': 2,
'title': header.title,
} %}
{% endif %}
{% if header.position %}
{% include '@components/card/card-elements/_position.twig' with {
'position': position
} %}
{% endif %}
{% if header.author %}
{% include '@components/card/card-elements/_author.twig' with {
'author': header.author
} %}
{% endif %}
</div>
source/_patterns/04-components/card/card-elements/_hero-image.twig 0 → 100644
+ 2
− 0
View file @ 0380972b
<div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
</div>
source/_patterns/04-components/card/card-elements/_listing-image.twig 0 → 100644
+ 15
− 0
View file @ 0380972b
<div class="card__media">
{% if url %}
<a href="{{ url }}">
{% endif %}
{% include "@components/responsive-image/responsive-image.twig" with {
sources: listing_image.sources,
img_element: listing_image.img_element,
alt: listing_image.alt
}%}
{% if url %}
</a>
{% endif %}
</div>
source/_patterns/04-components/card/card-elements/_position.twig 0 → 100644
+ 3
− 0
View file @ 0380972b
<div class="card__position">
{{ position }}
</div>
source/_patterns/04-components/card/card-elements/_title.twig 0 → 100644
+ 27
− 0
View file @ 0380972b
{% if header_level %}
<h{{ header_level }} class="card__title">
{% else %}
<div class="card__title">
<strong>
{% endif %}
{% if url %}
<a href="{{ url }}">
{% endif %}
{{ title }}
{% if url %}
</a>
{% endif %}
{% if header_level %}
</h{{ header_level }}>
{% else %}
</strong>
</div>
{% endif%}
{% if sub_title %}
<span class="sub-title">{{ sub_title }}</span>
{% endif %}
source/_patterns/04-components/card/card.twig
+ 14
− 77
View file @ 0380972b
......@@ -9,84 +9,21 @@
<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ card_type }}" >
{% if featured_image == 'yes' and hero.img_element %}
<div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
</div>
{% if hero_image %}
{% include '@components/card/card-elements/_hero-image.twig' with {
'hero': hero_image,
} %}
{% endif %}
<div class="card__body">
{% if title or author or date or sub_title or position %}
<div class="card__header">
{% if date %}
<div class="card__date">
{% include '@components/date/date.twig' with {
'date_format': date_format,
'date': date,
} %}
</div>
{% endif %}
{% if show_title == 'yes' %}
{% if header_level %}
<h{{ header_level }} class="card__title">
{% else %}
<div class="card__title">
<strong>
{% endif %}
{% if url %}
<a href="{{ url }}">
{% endif %}
{{ title }}
{% if url %}
</a>
{% endif %}
</strong>
{% if header_level %}
</h{{ header_level }}>
{% else %}
</div>
{% endif%}
{% if sub_title %}
<span class="sub-title">{{ sub_title }}</span>
{% endif %}
{% endif %}
{% if position %}
<div class="card__position">
{{ position }}
</div>
{% endif %}
{% if author %}
<div class="card__author">
by
{% if author.link %}
<a href="{{ author.link }}">{{ author.name }}</a>
{% else %}
{{ author.name }}
{% endif %}
</div>
{% endif %}
</div>
{% endif %}
{% include '@components/card/card-elements/_header.twig' with {
'header': header
} %}
{% if not featured_image and (sources or img_element) %}
<div class="card__media">
{% if url %}
<a href="{{ url }}">
{% endif %}
{% include "@components/responsive-image/responsive-image.twig" with {
sources: sources,
img_element: img_element,
alt: alt
}%}
{% if url %}
</a>
{% endif %}
</div>
{% if listing_image %}
{% include '@components/card/card-elements/_listing-image.twig' with {
'listing_image': listing_image
} %}
{% endif %}
{% if image and not card_type == 'banner' %}
......@@ -96,9 +33,9 @@
{% endif %}
{% if content %}
<div class="card__content">
{{ content }}
</div>
{% include '@components/card/card-elements/_content.twig' with {
'content': content
} %}
{% endif %}
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment