EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine news teaser layout

Browse Source
This commit is contained in:
Björn Fromme
2018-12-02 15:28:20 +01:00
parent f0dfe79dde
commit 38a5e29a6a
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
+8 -8
View File
@@ -1,7 +1,7 @@
.news-entry { .news-entry {
width: 100%; width: 100%;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 20px; margin-bottom: 40px;
} }
} }
@@ -13,7 +13,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include mq($from: tablet) { @include mq($from: desktop) {
flex-direction: row; flex-direction: row;
} }
} }
@@ -22,8 +22,8 @@
width: 100%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
@include mq($from: tablet) { @include mq($from: desktop) {
width: percentage(1/3); width: percentage(1/2);
} }
} }
@@ -33,15 +33,15 @@
} }
.news-entry__headline { .news-entry__headline {
margin-top: 0; hyphens: auto;
} }
.news-entry__teaser { .news-entry__teaser {
width: 100%; width: 100%;
@include mq($from: tablet) { @include mq($from: desktop) {
padding-left: 16px; padding-left: 24px;
width: percentage(2/3); width: percentage(1/2);
} }
p { p {
web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
+3 -3
View File
@@ -6,7 +6,7 @@
<n:excludeDisplayedNews newsItem="{newsItem}"/> <n:excludeDisplayedNews newsItem="{newsItem}"/>
<div class="news-entry__inner"> <div class="news-entry__inner">
<div class="news-entry__image"> <div class="news-entry__image">
<h2 class="headline headline--primary" itemprop="headline"> <h2 class="headline headline--primary news-entry__headline" itemprop="headline">
{newsItem.title} {newsItem.title}
<span class="subline"> <span class="subline">
<time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time> <time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}"><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></time>
@@ -18,7 +18,7 @@
<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}"> <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
crop="{mediaElement.crop}" crop="{mediaElement.crop}"
width="640" height="360c+50" width="640"
alt="{mediaElement.originalResource.alternative}" class="scale"/> alt="{mediaElement.originalResource.alternative}" class="scale"/>
</f:alias> </f:alias>
</f:if> </f:if>
@@ -28,7 +28,7 @@
<f:alias map="{mediaElement: '{newsItem.media.0}'}"> <f:alias map="{mediaElement: '{newsItem.media.0}'}">
<f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
crop="{mediaElement.crop}" crop="{mediaElement.crop}"
width="640" height="360c+50" width="640"
alt="{mediaElement.originalResource.alternative}" class="scale"/> alt="{mediaElement.originalResource.alternative}" class="scale"/>
</f:alias> </f:alias>
</f:if> </f:if>