[TASK] Style the related news teasers

Classes/Domain/Repository/NewsRepository.php

@@ -545,7 +545,7 @@ class NewsRepository extends AbstractRepository {
 			->from('pages', 'pages')
 			->where(
 				$qb->expr()->eq('doktype', $qb->createNamedParameter(News::DOK_TYPE_NEWS, Connection::PARAM_INT)),
-				$qb->expr()->gt('lastUpdated', $news->getLastUpdated()->getTimestamp())
+				$qb->expr()->gte('lastUpdated', $news->getLastUpdated()->getTimestamp())
 			)->andWhere(...$constraints)
 			->orderBy('lastUpdated', 'desc')
 			->execute();
@@ -554,7 +554,7 @@ class NewsRepository extends AbstractRepository {
 		// Here we fetch the lastUpdated of the $limit amount of news with older lastUpdated dates
 		$result = $qb->where(
 				$qb->expr()->eq('doktype', $qb->createNamedParameter(News::DOK_TYPE_NEWS, Connection::PARAM_INT)),
-				$qb->expr()->lt('lastUpdated', $news->getLastUpdated()->getTimestamp())
+				$qb->expr()->lte('lastUpdated', $news->getLastUpdated()->getTimestamp())
 			)->andWhere(...$constraints)
 			->orderBy('lastUpdated', 'asc')
 			->execute();

Classes/ViewHelpers/RelatedViewHelper.php

@@ -57,7 +57,7 @@ class RelatedViewHelper extends AbstractViewHelper {
 			$iterationData = [
 				'index' => 0,
 				'cycle' => 1,
-				'total' => count($arguments['each'])
+				'total' => count($related)
 			];
 		}
 

Resources/Private/Partials/TeaserRelated.html

+{namespace sg=SGalinski\SgNews\ViewHelpers}
+
+<f:comment>
+	<!--
+	Usage Example:
+
+	<f:render partial="Teaser" arguments="{
+		newsMetaData: newsMetaData,
+		headerTag: '<h3>',
+		closingHeaderTag: '</h3>',
+		showCategory: 1
+	}" />
+
+	newsMetaData -> news element
+	headerTag -> hierarchy type of the header tag
+	showCategory -> defines if the category may be shown
+
+	Use <f:debug>{_all}</f:debug> to see all parameters and fields.
+	-->
+</f:comment>
+
+<f:link.page pageUid="{news.uid}" class="tx-sgnews-teaser">
+	<f:if condition="{news.teaser1Image}">
+		<f:for each="{news.teaser1Image}" as="teaserImage">
+			<div class="tx-sgnews-teaser-image tx-sgnews-teaser-image-stretched"
+				 style="background-image: url({f:uri.image(image: teaserImage)});"></div>
+		</f:for>
+	</f:if>
+	<div class="tx-sgnews-teaser-inner">
+		<div class="tx-sgnews-teaser-title">
+			{headerTag -> f:format.raw()}
+			{news.subtitleWithFallbackToTitle}
+			{closingHeaderTag -> f:format.raw()}
+		</div>
+	</div>
+</f:link.page>

Resources/Private/Templates/SingleView/SingleView.html

@@ -93,7 +93,7 @@
 		<section class="content">
 			<div class="container">
 				<div class="tx-sgnews-single">
-					<div class="tx-sgnews-single-container">
+					<ul class="tx-sgnews-single-container">
 						<f:alias
 							map="{content: '{f:cObject(typoscriptObjectPath: \'{f:if(condition: \\\'{newsMetaData.news.contentFromAnotherPage}\\\', then: \\\'lib.contentFromAnotherPage\\\', else: \\\'lib.mainContent\\\')}\')}'}">
 							<div class="tx-sgnews-single-content">
@@ -216,21 +216,26 @@
 								</div>
 							</f:then>
 							<f:else>
-								<div class="tx-sgnews-single-related">
-									<h3>
-										<f:translate key="frontend.singleview.relatedArticles"/>
-									</h3>
-
-									<ul>
-										<sg:related news="{newsMetaData.news}" limit="5" as="relatedNewsEntry">
-											<li>
-												<a href="{f:uri.page(pageUid: '{relatedNewsEntry.uid}')}">
-													{relatedNewsEntry.subtitleWithFallbackToTitle}
-												</a>
-											</li>
-										</sg:related>
-									</ul>
-								</div>
+								<sg:related news="{newsMetaData.news}" iteration="iterator" limit="5" as="relatedNewsEntry">
+									<f:if condition="{iterator.isFirst}">
+										<div class="tx-sgnews-single-related">
+											<h3>
+												<f:translate key="frontend.singleview.relatedArticles"/>
+											</h3>
+											<ul class="tx-sgnews-list tx-sgnews-overview">
+									</f:if>
+									<li class="col-md-4 col-sm-6 col-xs-12">
+										<f:render partial="TeaserRelated" arguments="{
+											news: relatedNewsEntry,
+											headerTag: '<h2>',
+											closingHeaderTag: '</h2>'
+										}" />
+									</li>
+									<f:if condition="{iterator.isLast}">
+											</ul>
+										</div>
+									</f:if>
+								</sg:related>
 							</f:else>
 						</f:if>
 					</div>