From 38a5e29a6a07af69d424a8c8fb0ef1f3568893ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Sun, 2 Dec 2018 15:14:56 +0100
Subject: [PATCH] Refine news teaser layout

---
 .../Resources/Private/Assets/scss/_news.scss     | 16 ++++++++--------
 .../Private/Partials/News/List/Item.html         |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
index c2f8ac96..fe0eaa36 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_news.scss
@@ -1,7 +1,7 @@
 .news-entry {
   width: 100%;
   &:not(:last-child) {
-    margin-bottom: 20px;
+    margin-bottom: 40px;
   }
 }
 
@@ -13,7 +13,7 @@
   display: flex;
   flex-direction: column;
 
-  @include mq($from: tablet) {
+  @include mq($from: desktop) {
     flex-direction: row;
   }
 }
@@ -22,8 +22,8 @@
   width: 100%;
   margin-bottom: 8px;
 
-  @include mq($from: tablet) {
-    width: percentage(1/3);
+  @include mq($from: desktop) {
+    width: percentage(1/2);
   }
 }
 
@@ -33,15 +33,15 @@
 }
 
 .news-entry__headline {
-  margin-top: 0;
+  hyphens: auto;
 }
 
 .news-entry__teaser {
   width: 100%;
 
-  @include mq($from: tablet) {
-    padding-left: 16px;
-    width: percentage(2/3);
+  @include mq($from: desktop) {
+    padding-left: 24px;
+    width: percentage(1/2);
   }
 
   p {
diff --git a/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html b/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
index a68da98c..5ffa48e9 100644
--- a/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
+++ b/web/typo3conf/ext/ep_events/Resources/Private/Partials/News/List/Item.html
@@ -6,7 +6,7 @@
         <n:excludeDisplayedNews newsItem="{newsItem}"/>
         <div class="news-entry__inner">
             <div class="news-entry__image">
-                <h2 class="headline headline--primary" itemprop="headline">
+                <h2 class="headline headline--primary news-entry__headline" itemprop="headline">
                     {newsItem.title}
                     <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>
@@ -18,7 +18,7 @@
                             <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
                                 <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
                                          crop="{mediaElement.crop}"
-                                         width="640" height="360c+50"
+                                         width="640"
                                          alt="{mediaElement.originalResource.alternative}" class="scale"/>
                             </f:alias>
                         </f:if>
@@ -28,7 +28,7 @@
                             <f:alias map="{mediaElement: '{newsItem.media.0}'}">
                                 <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}"
                                          crop="{mediaElement.crop}"
-                                         width="640" height="360c+50"
+                                         width="640"
                                          alt="{mediaElement.originalResource.alternative}" class="scale"/>
                             </f:alias>
                         </f:if>