[FEATURE] fix layout

Resources/Private/Partials/Teaser.html

@@ -20,10 +20,15 @@
 </f:comment>
 
 <f:alias map="{singleViewUri: '{f:uri.page(pageUid: \'{newsMetaData.news.uid}\')}'}">
-	<a href="{singleViewUri}">
+	<a href="{singleViewUri}" class="tx-sgnews-teaser">
 		<f:if condition="{newsMetaData.teaserImageObject}">
 			<div class="tx-sgnews-teaser-image tx-sgnews-teaser-image-stretched" style="background-image: url({f:uri.image(image: newsMetaData.teaserImageObject)});"></div>
 		</f:if>
+		<f:if condition="{showCategory}">
+			<span class="tx-sgnews-teaser-category">
+				{newsMetaData.category.subtitleWithFallbackToTitle}
+			</span>
+		</f:if>
 		<div class="tx-sgnews-teaser-inner">
 			<div class="tx-sgnews-teaser-title">
 				{headerTag -> f:format.raw()}
@@ -59,12 +64,6 @@
 				<f:format.date format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
 			</span>
 
-			<f:if condition="{showCategory}">
-				<span class="category">
-					{newsMetaData.category.subtitleWithFallbackToTitle}
-				</span>
-			</f:if>
-
 			<span class="likes"><span class="badge"><i class="fa fa-star"></i>{newsMetaData.news.likes}</span></span>
 		</div>
 	</a>

Resources/Public/Sass/styles.scss

@@ -44,6 +44,21 @@
 	}
 }
 
+.tx-sgnews-teaser {
+	position: relative;
+}
+
+.tx-sgnews-teaser-category {
+	padding: 2px 8px;
+	position: absolute;
+	right: 0;
+	top: 0;
+	background-color: $gray-darker;
+	color: $white-base;
+	font-size: 14px;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+}
+
 .tx-sgnews-teaser-description {
 	color: $gray-dark;
 }
@@ -91,25 +106,22 @@
 	}
 
 	.tx-sgnews-teaser-meta {
-		padding-top: 10px;
-		padding-bottom: 10px;
+		padding-top: 8px;
+		padding-bottom: 8px;
 		background: $gray-dark;
 		color: #FFF;
 		border-color: $gray-dark;
-		font-size: 14px;
+		display: flex;
+		justify-content: space-between;
 
 		span {
 			margin: 0 4px 0 0;
 			display: inline-block;
+			font-size: 14px;
+		}
 
-			&:before {
-				margin: 0 4px 0 0;
-				content: '|';
-			}
-
-			&:first-child:before {
-				display: none;
-			}
+		.likes .badge {
+			font-size: 12px;
 		}
 	}
 
@@ -145,7 +157,6 @@
 }
 
 @media (min-width: $screen-md-min) {
-
 	.tx-sgnews-single-header-image {
 		padding: 0 !important;