Date blocks
Why and how to use this component
Users need a way to quickly see an event’s date and status.\ The solution is a date block that allows users to easily visualize this information.
When to use this component
- for lists of events and agenda pages
Do not use this component
- in any other situation except listings
{#
- "variant" (string); display variant (default: '')
- "week_day" (string); day(s) of the week of the event (default: '')
- "day" (string); day number(s) of the event (default: '')
- "month" (string); month(s) of the event (default: '')
- "year" (string); year(s) of the event (default: '')
- "extra_classes" (string): extra CSS classes to be added
- "extra_attributes" (array): extra attributes classes (optional, format: [{ 'name': 'name_of_the_attribute', 'value': 'value_of_the_attribute'}])
#}
{% set variant = variant|default('') %}
{% set week_day = week_day|default('') %}
{% set day = day|default('') %}
{% set month = month|default('') %}
{% set year = year|default('') %}
{# Internal properties #}
{% set _css_class = 'ecl-date-block' %}
{% set _extra_attributes = '' %}
{# Internal logic - Process properties #}
{% if variant != '' %}
{% set _css_class = _css_class ~ ' ecl-date-block--' ~ variant %}
{% endif %}
{% if extra_class is defined %}
{% set _css_class = _css_class ~ ' ' ~ extra_Class %}
{% endif %}
{% if extra_attributes is defined %}
{% for attr in extra_attributes %}
{% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~'"' %}
{% endfor %}
{% endif %}
{# Print the result #}
<div class="{{ _css_class }}" {{ _extra_attributes|raw }}>
<div class="ecl-date-block__body">
{% if week_day != '' %}
<span class="ecl-date-block__week-day">{{ week_day }}</span>
{% endif %}
{% if day != '' %}
<span class="ecl-date-block__day">{{ day }}</span>
{% endif %}
{% if month != '' %}
<span class="ecl-date-block__month">{{ month }}</span>
{% endif %}
{% if year != '' %}
<span class="ecl-date-block__year">{{ year }}</span>
{% endif %}
</div>
</div>
/* Default event */
{
"week_day": "Tue",
"day": "12",
"month": "Jan"
}
/* Ongoing event */
{
"variant": "ongoing",
"week_day": "Wed-Fri",
"day": "31-11",
"month": "May-Jun"
}
/* Cancelled event */
{
"variant": "cancelled",
"week_day": "Mon",
"day": "11",
"month": "Jan"
}
/* Past event */
{
"variant": "past",
"day": "2-4",
"month": "Feb",
"year": "2015"
}
<!-- Default event -->
<div class="ecl-date-block">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Tue</span>
<span class="ecl-date-block__day">12</span>
<span class="ecl-date-block__month">Jan</span>
</div>
</div>
<!-- Ongoing event -->
<div class="ecl-date-block ecl-date-block--ongoing">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Wed-Fri</span>
<span class="ecl-date-block__day">31-11</span>
<span class="ecl-date-block__month">May-Jun</span>
</div>
</div>
<!-- Cancelled event -->
<div class="ecl-date-block ecl-date-block--cancelled">
<div class="ecl-date-block__body">
<span class="ecl-date-block__week-day">Mon</span>
<span class="ecl-date-block__day">11</span>
<span class="ecl-date-block__month">Jan</span>
</div>
</div>
<!-- Past event -->
<div class="ecl-date-block ecl-date-block--past">
<div class="ecl-date-block__body">
<span class="ecl-date-block__day">2-4</span>
<span class="ecl-date-block__month">Feb</span>
<span class="ecl-date-block__year">2015</span>
</div>
</div>
-
Content:
/* * Date block * @define date-block */ .ecl-date-block { background-color: map-get($ecl-colors, 'grey-5'); border-bottom: 0.2em solid map-get($ecl-colors, 'yellow-100'); display: inline-flex; margin: 0; position: relative; &::before { border-left: 1.2em solid transparent; border-top: 1.2em solid #fff; content: ''; position: absolute; right: 0; top: 0; } } .ecl-date-block__body { align-items: center; display: inline-flex; flex-direction: column; justify-content: center; min-height: 5.55rem; min-width: 5.55rem; } .ecl-date-block__week-day { font-size: map-get($ecl-font-size, 'xs'); line-height: 1.2; } .ecl-date-block__day { font-size: map-get($ecl-font-size, 'xl'); font-weight: 700; line-height: 1.2; } .ecl-date-block__month { font-size: map-get($ecl-font-size, 's'); font-weight: 700; line-height: 1.1; } .ecl-date-block__year { font-size: map-get($ecl-font-size, 's'); line-height: 1.2; } // ongoing .ecl-date-block--ongoing { background-color: map-get($ecl-colors, 'yellow-100'); } // cancelled .ecl-date-block--cancelled { border-bottom-color: map-get($ecl-colors, 'grey-10'); text-decoration: line-through; } // past .ecl-date-block--past { background-color: #fff; border: 0.2em solid map-get($ecl-colors, 'grey-50'); &::before { border-left-width: 1.35em; border-top-width: 1.35em; right: -0.2em; top: -0.2em; } &::after { border-right: 0.2em solid map-get($ecl-colors, 'grey-50'); content: ''; height: 1.85em; position: absolute; right: 0.45em; top: -0.4em; transform: rotate(135deg); } }
- URL: /components/raw/ecl-date-blocks/ecl-date-blocks.scss
- Filesystem Path: framework/components/ecl-date-blocks/ecl-date-blocks.scss
- Size: 1.7 KB
- Handle: @ec-europa/ecl-date-blocks
- Tags: atom
- Preview:
- Filesystem Path: framework/components/ecl-date-blocks/ecl-date-blocks.twig