Merge pull request #1091 from City-of-Helsinki/UHF-10259-curated-even…

…t-list

UHF-10259: Curated event list

src/scss/06_components/__index.scss

@@ -15,3 +15,4 @@
 @import 'tags';
 @import 'throbber';
 @import 'editorially';
+@import 'linkedevents-event';

src/scss/06_components/_linkedevents-event.scss

@@ -0,0 +1,73 @@
+// @todo: Move these styles to generice teaser file
+// https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868
+.linkedevents-event {
+ display: flex;
+ height: 100%;
+
+ @include breakpoint($breakpoint-m) {
+ flex-direction: column;
+ padding-bottom: 0;
+ }
+}
+
+.linkedevents-event__title {
+ @include font(h5);
+ margin-bottom: $spacing-half;
+ margin-top: 0;
+
+ @include breakpoint($breakpoint-l) {
+ @include font(h4);
+ }
+}
+
+.linkedevents-event__title a::after {
+ bottom: 0;
+ content: '';
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.linkedevents-event__text-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding-inline-start: $spacing;
+ width: 60%;
+
+ @include breakpoint($breakpoint-m) {
+ padding: $spacing 0 0 0;
+ width: unset;
+ }
+
+ [dir='rtl'] & {
+ padding-left: 0;
+ padding-right: $spacing;
+
+ @include breakpoint($breakpoint-m) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+}
+
+.linkedevents-event__img {
+ position: relative;
+ width: 40%;
+
+ @include breakpoint($breakpoint-m) {
+ width: unset;
+ }
+
+ img {
+ display: block;
+ height: auto;
+ width: 100%;
+ }
+}
+
+.linkedevents-event__date-container {
+ @include font(small);
+ color: $color-black-60
+}

src/scss/06_components/pages/_news-page.scss

@@ -82,16 +82,18 @@
 }
 
 // Latest news block variant.
+// @todo: move medium teaser styles to generic teaser
+// https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868
 .news-listing--latest-medium-teasers {
  margin-bottom: 0;
  padding-inline-start: 0; // User agent stylesheet override
  padding-right: 0;
 
  @include breakpoint($breakpoint-m) {
- grid-column-gap: $spacing-and-half;
- grid-row-gap: $spacing-double;
+ column-gap: $spacing-and-half;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
+ row-gap: $spacing-double;
  }
 
  .news-listing__item {
@@ -219,13 +221,13 @@
 }
 
 .news-listing--card-teasers {
- grid-gap: 0;
  display: grid;
+ gap: 0;
  list-style: none;
  padding-left: 0;
 
  @include breakpoint($breakpoint-m) {
- grid-column-gap: $spacing-and-half;
+ column-gap: $spacing-and-half;
  grid-template-columns: repeat(3, 1fr);
  }
 

src/scss/06_components/paragraphs/__index.scss

@@ -5,6 +5,7 @@
 @import 'contact-card';
 @import 'contact-card-listing';
 @import 'content-cards';
+@import 'curated-event-list';
 @import 'district-and-project-search';
 @import 'event-list';
 @import 'hearings';

src/scss/06_components/paragraphs/_curated-event-list.scss

@@ -0,0 +1,31 @@
+.curated-event-list__events {
+ display: grid;
+ gap: 0;
+ list-style: none;
+ padding-left: 0;
+
+ @include breakpoint($breakpoint-m) {
+ column-gap: $spacing-and-half;
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+
+.curated-event-list__event + .curated-event-list__event {
+ margin-top: $spacing-double;
+
+ @include breakpoint($breakpoint-m) {
+ margin-top: 0;
+ }
+}
+
+.curated-event-list__empty-message__container {
+ margin-bottom: $spacing-and-half;
+}
+
+.curated-event-list__empty-message {
+ @include font(h4);
+}
+
+.curated-event-list__event {
+ position: relative;
+}

templates/content/external-entity--linkedevents-event.html.twig

@@ -0,0 +1,43 @@
+{# @todo Use a general component to create the card-teaser html #}
+{# https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868 #}
+<div class="linkedevents-event">
+ <div class="linkedevents-event__img">
+ {{ content.main_image }}
+ </div>
+ <div class="linkedevents-event__text-container">
+ <h3 class="linkedevents-event__title">
+ {{ content.external_link }}
+ </h3>
+ <div class="linkedevents-event__date-container">
+ {% set is_multidate = start_timestamp|date('Y-m-d') != end_timestamp|date('Y-m-d') %}
+ {% set same_year = start_timestamp|date('Y') == end_timestamp|date('Y') %}
+ {% set html_start = start_timestamp|format_date('custom', 'Y-m-d') ~ 'T' ~ start_timestamp|format_date('custom', 'H:i') %}
+ {% set html_end = end_timestamp|format_date('custom', 'Y-m-d') ~ 'T' ~ end_timestamp|format_date('custom', 'H:i') %}
+ {% if is_multidate and not same_year %}
+ <time datetime="{{ html_start }}">
+ {{ start_timestamp|date('d.m.Y') }}
+ </time>
+ –
+ <time datetime="{{ html_end }}">
+ {{ end_timestamp|date('d.m.Y') }}
+ </time>
+ {% elseif is_multidate %}
+ <time datetime="{{ html_start }}">
+ {{ start_timestamp|date('d.m.') }}
+ </time>
+ –
+ <time datetime="{{ html_end }}">
+ {{ end_timestamp|date('d.m.Y') }}
+ </time>
+ {% else %}
+ <time datetime="{{ html_start }}">
+ {{ start_timestamp|format_date('publication_date_format') }}
+ </time>
+ –
+ <time datetime="{{ html_end }}">
+ {{ end_timestamp|format_date('custom', 'H:i') }}
+ </time>
+ {% endif %}
+ </div>
+ </div>
+</div>

templates/module/helfi-news-item/node--news-item--card-teaser.html.twig

@@ -1,3 +1,5 @@
+{# @todo Use a general component to create the card-teaser html #}
+{# https://helsinkisolutionoffice.atlassian.net/browse/UHF-10868 #}
 <div class="news-listing__content news-listing__card-teaser">
  {# Main image #}
  <div class="news-listing__img">

templates/paragraphs/paragraph--curated-event-list.html.twig

@@ -0,0 +1,38 @@
+{% block paragraph %}
+ {% embed "@hdbt/misc/component.twig" with
+ {
+ component_classes: [
+ 'component--full-width',
+ 'component--curated-event-list',
+ ],
+ component_title_level: 'h2',
+ component_title: 'Recommended events'|trans({}, {'context': 'Curated event list title'}),
+ }
+ %}
+ {% block component_content %}
+ <div class="curated-event-list">
+ {% if content.future_or_ongoing is empty %}
+ <div class="curated-event-list__empty-message__container">
+ <span class="curated-event-list__empty-message">
+ {{ 'Recommended events were not found'|t({}, {'context': 'Curated events list empty message'}) }}
+ </span>
+ </div>
+ {% else %}
+ <ul class="curated-event-list__events">
+ {% for event in content.future_or_ongoing %}
+ <li class="curated-event-list__event">
+ {{ event }}
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ {% include '@hdbt/navigation/link-button.html.twig' with {
+ label: content.field_all_events_link.0['#title'],
+ open_in_a_new_window: content.field_all_events_link.0.options.target_new,
+ type: 'primary',
+ url: content.field_all_events_link.0['#url'],
+ } %}
+ </div>
+ {% endblock %}
+ {% endembed %}
+{% endblock %}

translations/fi.po

@@ -1312,6 +1312,14 @@ msgctxt "The helper text before the news article changed timestamp"
 msgid "updated"
 msgstr "päivitetty"
 
+msgctxt "Curated event list title"
+msgid "Recommended events"
+msgstr "Suositellut tapahtumat"
+
+msgctxt "Curated events list empty message"
+msgid "Recommended events were not found"
+msgstr "Suositeltuja tapahtumia ei löytynyt."
+
 msgctxt "React & Share cookie compliance"
 msgid "Would you like to give feedback on this page?"
 msgstr "Haluatko antaa meille palautetta tästä sivusta?"