diff --git a/Resources/Private/Partials/TeaserContentOverview.html b/Resources/Private/Partials/TeaserContentOverview.html index 24987e38346fdef90e7a83ebe71d85b65ff35d7a..dba500fc8d48e4db583ed601025ef850fb15c0c7 100644 --- a/Resources/Private/Partials/TeaserContentOverview.html +++ b/Resources/Private/Partials/TeaserContentOverview.html @@ -4,6 +4,39 @@ {headerTag -> f:format.raw()} {newsMetaData.news.subtitleWithFallbackToTitle} {closingHeaderTag -> f:format.raw()} + + <div class="tx-sgnews-teaser-meta"> + <f:alias map="{authorCount: '{newsMetaData.news.newsAuthor -> f:count()}'}"> + <f:if condition="{authorCount}"> + <span class="author"> + <f:for each="{newsMetaData.news.newsAuthor}" as="newsAuthor" iteration="iterator"> + <f:alias map="{divider: '{f:if(condition: \'{iterator.cycle} < {authorCount}\', then: \',\')}'}"> + <f:if condition="{newsAuthor.name}"> + {newsAuthor.name}{divider} + </f:if> + </f:alias> + </f:for> + </span> + </f:if> + </f:alias> + + <span class="date"> + <f:format.date + format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date> + </span> + + <span class="category"> + {newsMetaData.category.subtitleWithFallbackToTitle} + </span> + + <f:if condition="{newsMetaData.news.tags}"> + <span class="tags"> + <f:for each="{newsMetaData.news.tags}" as="tag" iteration="it"> + {tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if> + </f:for> + </span> + </f:if> + </div> </div> <div class="tx-sgnews-teaser-description"> diff --git a/Resources/Public/Sass/_layout-content.scss b/Resources/Public/Sass/_layout-content.scss index 4c42e448e2712f19b8b315b77b35e4016e2aa1b6..2bfa35770744ad073dc596d07f5e6d0743a5f30b 100644 --- a/Resources/Public/Sass/_layout-content.scss +++ b/Resources/Public/Sass/_layout-content.scss @@ -95,5 +95,50 @@ $sg-news-chevron-color: var(--component-color-primary-background, $black-base); } } + .tx-sgnews-teaser-meta { + color: var(--component-color-foreground); + // stylelint-disable declaration-no-important + font-size: 1em !important; + text-align: left !important; + // stylelint-enable + margin: -10px 0 5px; + display: flex; + flex-wrap: wrap; + + .date::before { + @include inline-svg($icon-regular-calendar-alt, $black-base); + width: 9px; + height: 10px; + margin: 0; + } + + .author::before { + @include inline-svg($icon-solid-user, $black-base); + width: 9px; + height: 10px; + margin: 0; + } + + .category::before { + @include inline-svg($icon-solid-tag, $black-base); + content: ''; + display: inline-block; + width: 9px; + height: 10px; + margin: 0; + } + .tags::before { + @include inline-svg($icon-solid-tags, $black-base); + content: ''; + display: inline-block; + width: 9px; + height: 10px; + margin: 0; + } + + > span:not(:last-child) { + margin-right: 15px; + } + } }