[BUGFIX] change markup for news list

News list had a bug and therefore did not scale properly depending on screensize.
Absolute positioning and fixed heigths are very hard to handle in responsive designs.
Therefore the markup was changed:

Bootstrap grid classes are used now, this saves code prevents positioning related bugs/problems.
The grid items are positioned with display: 'flex', which allows sizing the rows without using explicit, fixed values.

Author: Hendrik Putzek

Resources/Private/Extensions/News/Partials/List/SimpleList.html

@@ -19,35 +19,31 @@
 
 
 <f:section name="simpleList">
-	<article class="news-simple-list__item clearfix articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
+	<article class="news-simple-list__item row clearfix articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}" itemscope="itemscope" itemtype="http://schema.org/Article">
 		<n:excludeDisplayedNews newsItem="{newsItem}"/>
 
 		<f:if condition="{newsItem.mediaPreviews}">
 			<!-- media preview element -->
 			<f:then>
-				<div class="news-simple-list__img-wrap">
-					<n:link newsItem="{newsItem}" settings="{settings}" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
+					<div class="col-12 col-sm-3 news-simple-list__media-preview">
+					<n:link newsItem="{newsItem}" settings="{settings}" additionalAttributes="{aria-label: '{f:translate(key:\'news.more-link.linktext\', extensionName:\'Theme_t3kit\')}{newsItem.title}'}" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
 						<f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
 							<f:if condition="{mediaElement.originalResource.type} == 2">
-								<div class="news-simple-list__media-preview">
 									<f:media file="{mediaElement}" width="170"/>
-								</div>
 							</f:if>
 							<f:if condition="{mediaElement.originalResource.type} == 4">
 								<f:media file="{mediaElement}" additionalConfig="{loop: '0', autoplay: '0'}" />
 							</f:if>
 							<f:if condition="{mediaElement.originalResource.type} == 5">
-								<div class="news-simple-list__media-preview">
 									<f:media file="{mediaElement}" width="170"/>
-								</div>
 							</f:if>
 						</f:alias>
 					</n:link>
 				</div>
 			</f:then>
 			<f:else>
 				<f:if condition="{settings.displayDummyIfNoMedia}">
-					<div class="news-simple-list__img-wrap">
+					<div class="news-simple-list__img-wrap col-12 col-sm-3">
 						<div class="no-media-element">
 							<div class="news-simple-list__media-preview"  style="background-image:url('{f:uri.image(src: settings.list.media.dummyImage, treatIdAsReference: 1)}');"></div>
 						</div>
@@ -56,7 +52,7 @@
 			</f:else>
 		</f:if>
 
-		<div class="news-simple-list__text js__news-simple-list__dotdotdot">
+		<div class="news-simple-list__text col-12 col-sm-8">
 
 			<!-- date -->
 			<span class="news-list-date news-simple-list__date-wrp">
@@ -90,13 +86,11 @@ <h3>{newsItem.title}</h3>
 					</f:else>
 				</f:if>
 			</div>
+			<div class="news-simple-list__more-link">
+				<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
+					<f:translate key="more-link"/>
+				</n:link>
+			</div>
 		</div>
-
-		<div class="news-simple-list__more-link">
-			<n:link newsItem="{newsItem}" settings="{settings}" class="more" title="{f:translate(key:'news.more-link.linktext', extensionName:'Theme_t3kit')}{newsItem.title}">
-				<f:translate key="more-link"/>
-			</n:link>
-		</div>
-
 	</article>
 </f:section>

felayout_t3kit/dev/styles/main/plugins/news/newsCards.less

@@ -13,7 +13,7 @@
 }
 
 .news-cards__media-preview {
-    height: 180px;
+    min-height: 180px;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 50% 50%;

felayout_t3kit/dev/styles/main/plugins/news/newsSimpleList.less

@@ -1,76 +1,36 @@
-.news-simple-list__img-wrap {
-    margin-right: 20px;
-    overflow: hidden;
-    width: 100%;
-    position: relative;
+.news-simple-list__item {
+    background-color: darken(@main-body-bg, 5%);
+    margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    min-height: 266px;
 
-    &:after {
-        content: '';
-        display: block;
-        margin-bottom: 69.2%;
+    .img-responsive {
+        margin-bottom: 15px;
     }
-}
 
-.news-simple-list__img-wrap a {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.news-simple-list__media-preview {
-    width: 100%;
-    height: 100%;
-}
-
-.news-simple-list__text {
-    overflow: hidden;
-    position: relative;
-    padding: 15px 15px 0;
-    height: auto;
+    a {
+        display: inline-block;
+    }
 }
 
-.news-simple-list__item {
-    background-color: darken(@main-body-bg, 5%);
-    margin-bottom: 30px;
+// use custom width instead of bootstrap media query;
+// evaluated by testing the ideal value
+@media (min-width: 540px) {
+    .news-simple-list__item {
+        flex-direction: row;
+    }
 }
 
 .news-simple-list__media-preview {
-    background-size: cover;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-}
-
-.news-simple-list__more-link {
-    padding: 0 15px 15px;
+    display: block;
 }
 
 .news-simple-list__header h3 {
     font-size: 22px;
 }
 
-@media (min-width: @screen-sm-min) {
-    .news-simple-list__img-wrap {
-        float: left;
-        width: 290px;
-    }
-
-    .news-simple-list__text {
-        height: 168px;
-        padding-left: 0;
-        padding-top: 20px;
-        padding-right: 30px;
-    }
-
-    .news-simple-list__more-link {
-        padding: 0;
-    }
-}
-
 @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
-    .news-simple-list__more-link {
-        padding-top: 4px;
-    }
-
     .news-simple-list__header h3 {
         font-size: 19px;
     }