Skip to content
Snippets Groups Projects
Commit 748a3ff4 authored by m26lebla's avatar m26lebla
Browse files

Adding the event teaser and the ability to select the datetime format per card-teaser

parent 51edd998
No related branches found
No related tags found
No related merge requests found
Showing
with 234 additions and 52 deletions
......@@ -4826,6 +4826,14 @@ picture {
.card--teaser .card__title a:active {
color: #757575; }
.teaser--event .card__date {
margin-bottom: 0.5rem;
order: 1; }
.teaser--event .card__title {
margin: 0;
order: 2; }
.uw-bg--black {
background-color: #000; }
......
......@@ -3,5 +3,5 @@
{%- endset %}
{% if year %}
<span class="{{ date_modifier_classes }}" > {{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
<span class="{{ date_modifier_classes }}" > {{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }} &mdash; {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
{% endif %}
---
title: Medium Date Short Month
---
{% set date_modifier_classes -%}
uw-date uw-date--medium-date-short-month {{ date_modifier_classes }}
{%- endset %}
{% if year %}
<span class="{{ date_modifier_classes }}" > {{ month.short }}. {{ day.short }}, {{ year.long }}</span>
{% endif %}
\ No newline at end of file
......@@ -12,6 +12,14 @@ __Variables:__
* author_link: [string] URL for the author link.
* show_hover: [boolean] to show outline and shadow on hover
* date: [string] Date of the card.
* date_format: [string] Choose the date format used for presentation.
* long_date
* long_datetime
* medium_date
* medium_datetime
* medium_date_short_month
* short_date
* short_datetime
* read_more: [boolean] Whether to show the read more link.
* footer: [string] Footer content of the card.
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
......
......@@ -5,9 +5,41 @@
<div class="card__header">
{% if date %}
<div class="card__date">
{% include "@base/date-formats/long-date.twig" with {
modifier_classes: 'uw-date uw-date--long',
} %}
{% if date_format == 'long_date' %}
{% include "@base/date-formats/long-date.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
{% if date_format == 'long_datetime' %}
{% include "@base/date-formats/long-datetime.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
{% if date_format == 'medium_date' %}
{% include "@base/date-formats/medium-date.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
{% if date_format == 'medium_date_short_month' %}
{% include "@base/date-formats/medium-date-short-month.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
{% if date_format == 'medium_datetime' %}
{% include "@base/date-formats/medium-datetime.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
{% if date_format == 'short_date' %}
{% include "@base/date-formats/short-date.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
{% if date_format == 'short_datetime' %}
{% include "@base/date-formats/short-datetime.twig" with {
modifier_classes: modifier_classes,
}%}
{% endif %}
</div>
{% endif %}
<h{{ header_level }} class="card__title">
......
......@@ -6,7 +6,8 @@ url: '#'
author_name: 'Author Lastname'
author_link: '#'
footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
date: Thursday, September 28, 2018
date: 'Thursday, September 28, 2018'
date_format: 'long_date'
read_more: true
show_hover: true
tags:
......
// @file
// Styles for teaser.
//.teaser--blog{
// .card__body {
// background: #ff1493;
// }
//
// .card__header{
// background:#F00;
// }
//
// .card__date {
// background: #ffa500;
// }
//
// .card__author{
// background: #800080;
// }
//
// .card__title{
// background: #adff2f;
// }
//
// .card__content {
// background: #2f4f4f;
// }
//
// .card__media {
// background: #fffacd;
// }
// .card__footer{
// background: #ff0;
// .card__tags{
//
// }
// .card__readmore{
//
// }
// .card__social{
//
// }
// }
//}
// Styles for blog teaser.
.teaser--blog{
.card__body {
}
.card__header{
}
.card__date {
}
.card__author{
}
.card__title{
}
.card__content {
}
.card__media {
}
.card__footer{
.card__tags{
}
.card__readmore{
}
.card__social{
}
}
}
......@@ -12,6 +12,14 @@ __Variables: (same form card)__
* author_link: [string] URL for the author link.
* show_hover: [boolean] to show outline and shadow on hover
* date: [string] Date of the card.
* date_format: [string] Choose the date format used for presentation.
* long_date
* long_datetime
* medium_date
* medium_datetime
* medium_date_short_month
* short_date
* short_datetime
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
* img_element: [string] Url to source of fall back image.
* alt: [string] Alt text to the image used in the picture tag or fallback image.
......
......@@ -6,6 +6,7 @@
modifier_classes: teaser_modifier_classes,
title: title,
url: url,
date_format: date_format,
date: date,
tags: tags,
sources: sources,
......@@ -14,7 +15,6 @@
show_hover: show_hover,
content: content,
header_level: '2',
url: url,
author_name: author_name,
author_link: author_link,
} %}
\ No newline at end of file
---
title: 'Blog Teaser title'
url: '#'
date: Thursday, September 28, 2018
date: 'Thursday, September 28, 2018'
date_format: 'long_date'
author_name: 'Author Lastname'
author_link: '#'
tags:
......
// @file
// Styles for event teaser.
.teaser--event{
.card__body {
}
.card__header{
}
.card__date {
margin-bottom: rem(gesso-spacing(xs));
order:1;
}
.card__author{
}
.card__title{
margin:0;
order:2;
}
.card__content {
}
.card__media {
}
.card__footer{
.card__tags{
}
.card__readmore{
}
.card__social{
}
}
}
---
el: .teaser--event
title: Teaser Event
---
__Variables: (same form card)__
* modifier_classes: [string] Classes to modify the default component styling.
* title: [string] Title of the card.
* header_level: [string] Set the level of herder <h?> tag for card
* url: [string] URL of the card.
* author_name: [string] Author name.
* author_link: [string] URL for the author link.
* show_hover: [boolean] to show outline and shadow on hover
* date: [string] Date of the card.
* date_format: [string] Choose the date format used for presentation.
* long_date
* long_datetime
* medium_date
* medium_datetime
* medium_date_short_month
* short_date
* short_datetime
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
* img_element: [string] Url to source of fall back image.
* alt: [string] Alt text to the image used in the picture tag or fallback image.
* content: [string] Content of the card.
* tags: [array] List of taxonomy tags
* type: [string] Type of the tag, it will add class ".tag--type".
* size: [string] Size of the tag, it will add class ".tag--size"
* url: [string] URL of the tag.
* title: [string] Title of the tag.
\ No newline at end of file
{% set teaser_modifier_classes -%}
card--teaser teaser--event {{ modifier_classes }}
{%- endset %}
{% include "@components/teaser/teaser.twig" with {
modifier_classes: teaser_modifier_classes,
title: title,
url: url,
date: date,
sources: sources,
img_element: img_element,
alt: alt,
show_hover: show_hover,
content: content,
header_level: '2',
} %}
\ No newline at end of file
---
title: 'Event Teaser title'
url: '#'
date: 'AUG 14, 2020'
date_format: 'long_datetime'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_large.jpg'
media: 'all and (min-width: 49.81rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_medium.jpg'
media: 'all and (min-width: 30rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_small.jpg'
media: 'all and (min-width: 25rem)'
type: 'image/jpeg'
- srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text for blog teaser photo'
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>
......@@ -11,6 +11,14 @@ __Variables: (same form card)__
* author_name: [string] Author name.
* author_link: [string] URL for the author link.
* date: [string] Date of the card.
* date_format: [string] Choose the date format used for presentation.
* long_date
* long_datetime
* medium_date
* medium_datetime
* medium_date_short_month
* short_date
* short_datetime
* read_more: [boolean] Whether to show the read more link.
* footer: [string] Footer content of the card.
* sources: [string] URL for the srcset of picture tag inside of responsive-image.
......
......@@ -6,6 +6,7 @@
modifier_classes: teaser_modifier_classes,
title: title,
url: url,
date_format: date_format,
date: date,
tags: tags,
sources: sources,
......@@ -14,7 +15,6 @@
show_hover: show_hover,
content: content,
header_level: '2',
url: url,
author_name: author_name,
author_link: author_link,
} %}
\ No newline at end of file
......@@ -3,7 +3,8 @@ title: 'This is a Teaser title using the card component'
url: '#'
author_name: 'Author Lastname'
author_link: '#'
date: Thursday, September 28, 2018
date: 'Thursday, September 28, 2018'
date_format: 'long_date'
tags:
- url: '#'
title: 'Tag 1'
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment