Skip to content
Snippets Groups Projects
Commit 1bab7e8c authored by Eric Bremner's avatar Eric Bremner Committed by Martin Leblanc
Browse files

ISTWCMS-5658: adding multi-type list

parent 2dd49e08
No related branches found
No related tags found
1 merge request!18Feature/istwcms 5658 ebremner multi type list
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/multi-type-list/_multi-tab-list-include-content.twig 0 → 100644
+ 6
− 0
View file @ 1bab7e8c
{% for info in lists[type] %}
{% include '@components/card/card--teaser/_card--teaser.twig' with {
'teaser': info,
'type': 'teaser',
} %}
{% endfor %}
src/patterns/04-components/multi-type-list/_multi-type-list.scss 0 → 100644
+ 5
− 0
View file @ 1bab7e8c
.uw-multi-type-list__button {
display: block;
text-align: center;
width: 100%;
}
src/patterns/04-components/multi-type-list/multi-type-list.twig 0 → 100644
+ 72
− 0
View file @ 1bab7e8c
{% set content_list = [] %}
{% for type, list in lists %}
{% set content_list = content_list|merge([type]) %}
{% endfor %}
{% set button_modifier_classes -%}
button button--large {{ modifier_classes }}
{%- endset %}
{% embed '@components/tabs/_tabs.twig' with {
'tab_type': 'content',
'content_list': content_list,
'button_modifier_classes': button_modifier_classes,
} %}
{% for type, list in lists %}
{% for info in list %}
{% if loop.parent.loop.index == 1 %}
{% block content_area_1 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button--large/button--large.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 2 %}
{% block content_area_2 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button--large/button--large.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% elseif loop.parent.loop.index == 3 %}
{% block content_area_3 %}
{% include '@components/multi-type-list/_multi-tab-list-include-content.twig' with {
'type': type,
'lists': lists,
'view_all': view_all,
} %}
{% if view_all %}
<div class="uw-multi-type-list__button">
{% include '@components/button/button--large/button--large.twig' with {
'url': view_all[type].url,
'text': view_all[type].text,
} %}
</div>
{% endif %}
{% endblock %}
{% endif %}
{% endfor %}
{% endfor %}
{% endembed %}
\ No newline at end of file
src/patterns/04-components/multi-type-list/multi-type-list.yml 0 → 100644
+ 502
− 0
View file @ 1bab7e8c
lists:
blog:
-
url: '#'
bundle: 'blog'
header:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 1'
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>'
-
url: '#'
bundle: 'blog'
header:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 2'
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>'
-
url: '#'
bundle: 'blog'
header:
date:
0: 'Friday, September 19, 2020'
title: 'Blog Teaser 3'
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 1'
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>'
-
url: '#'
bundle: 'news'
header:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 2'
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>'
-
url: '#'
bundle: 'news'
header:
date:
0: 'Friday, September 19, 2020'
title: 'News Teaser 3'
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 1'
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>'
-
url: '#'
bundle: 'event'
header:
date:
0: 'Friday, September 19, 2020'
title: 'Event Teaser 2'
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>'
-
url: '#'
bundle: 'event'
header:
date:
0: 'Friday, September 19, 2020'
title: 'Event Teaser 3'
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>'
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