From ecb2173f99641280b2c1f64760aced0825232b9e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 22 Mar 2019 10:54:29 +0100
Subject: [PATCH] Improved the visuals on smaller screen sizes

---
 .../templates/articleListItems.tpl            |  4 ++--
 .../install/files/style/ui/contentItem.scss   | 23 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index 67fd5b2d55..410070a423 100644
--- a/com.woltlab.wcf/templates/articleListItems.tpl
+++ b/com.woltlab.wcf/templates/articleListItems.tpl
@@ -1,8 +1,8 @@
 <div class="contentItemList">
 	{foreach from=$objects item='article'}
-		<article class="contentItem">
+		<article class="contentItem contentItemMultiColumn">
 			<a href="{$article->getLink()}" class="contentItemLink">
-				<div class="contentItemImage" style="background-image: url({if $article->getImage()}{$article->getImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if})">
+				<div class="contentItemImage contentItemImageLarge" style="background-image: url({if $article->getImage()}{$article->getImage()->getThumbnailLink('medium')}{else}{$__wcf->getStyleHandler()->getStyle()->getCoverPhotoURL()}{/if})">
 					{hascontent}
 						<div class="contentItemBadges">
 							{content}
diff --git a/wcfsetup/install/files/style/ui/contentItem.scss b/wcfsetup/install/files/style/ui/contentItem.scss
index 3315a679e8..ada677ecd7 100644
--- a/wcfsetup/install/files/style/ui/contentItem.scss
+++ b/wcfsetup/install/files/style/ui/contentItem.scss
@@ -1,8 +1,7 @@
 .contentItemList {
 	display: flex;
 	flex-wrap: wrap;
-	margin-bottom: -20px;
-	justify-content: space-between;
+	margin: 0 0 -20px -20px;
 }
 
 .contentItem {
@@ -11,7 +10,7 @@
 	box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 	display: flex;
 	flex-direction: column;
-	margin-bottom: 20px;
+	margin: 0 0 20px 20px;
 	position: relative;
 	overflow: hidden;
 }
@@ -21,8 +20,8 @@
 }
 
 .contentItemMultiColumn {
-	flex: 0 0 calc(50% - 10px);
-	max-width: calc(50% - 10px); /* IE 11 */
+	flex: 0 0 calc(50% - 20px);
+	max-width: calc(50% - 20px); /* IE 11 */
 }
 
 .contentItemLink {
@@ -180,18 +179,18 @@
 @include screen-lg {
 	/* There are no sidebars, use a three column layout. */
 	.content:first-child:last-child {
-		.contentItem {
-			flex: 0 0 calc(100% / 3 - 15px);
-			max-width: calc(100% / 3 - 15px); /* IE 11 */
+		.contentItemMultiColumn {
+			flex: 0 0 calc(100% / 3 - 20px);
+			max-width: calc(100% / 3 - 20px); /* IE 11 */
 		}
 	}
 }
 
 @include screen-md {
 	/* The sidebar, if any, is not adjacent to the content, use a three column layout. */
-	.contentItem {
-		flex: 0 0 calc(100% / 3 - 15px);
-		max-width: calc(100% / 3 - 15px); /* IE 11 */
+	.contentItemMultiColumn {
+		flex: 0 0 calc(100% / 3 - 20px);
+		max-width: calc(100% / 3 - 20px); /* IE 11 */
 	}
 }
 
@@ -201,7 +200,7 @@
 		display: block;
 	}
 	
-	.contentItem {
+	.contentItemMultiColumn {
 		max-width: none;
 	}
 }
-- 
2.20.1