From e519a59318ee036d033ed349f9586b56bd1576d7 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 19 Mar 2019 11:55:01 +0100
Subject: [PATCH] Dedicated teaser above the image, improved visuals of the
 image

---
 com.woltlab.wcf/templates/article.tpl        | 14 +++++++++-----
 wcfsetup/install/files/style/ui/article.scss | 18 ++++++++++++------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index e0ad68e213..9f1c05b944 100644
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -114,8 +114,16 @@
 {include file='header'}
 
 <div class="section">
+	{if $articleContent->teaser}
+		<div class="section articleTeaserContainer">
+			<div class="htmlContent">
+				<p class="articleTeaser">{@$articleContent->getFormattedTeaser()}</p>
+			</div>
+		</div>
+	{/if}
+	
 	{if $articleContent->getImage() && $articleContent->getImage()->hasThumbnail('large')}
-		<div class="section" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
+		<div class="section articleImageContainer" itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
 			<figure class="articleImage">
 				<div class="articleImageWrapper">{@$articleContent->getImage()->getThumbnailTag('large')}</div>
 				{if $articleContent->getImage()->caption}
@@ -132,10 +140,6 @@
 	
 	<div class="section articleContent" {@$__wcf->getReactionHandler()->getDataAttributes('com.woltlab.wcf.likeableArticle', $article->articleID)}>
 		<div class="htmlContent">
-			{if $articleContent->teaser}
-				<p class="articleTeaser">{@$articleContent->getFormattedTeaser()}</p>
-			{/if}
-		
 			{@$articleContent->getFormattedContent()}
 			
 			{event name='htmlArticleContent'}
diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index 461452c5a0..77fd840a77 100644
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -1,3 +1,12 @@
+.articleTeaser {
+	@include wcfFontBold;
+}
+
+.articleTeaserContainer + .section,
+.articleImageContainer + .section {
+	margin-top: 20px !important;
+}
+
 .articleImage {
 	/* work-around for IE 11 to properly align the image if overflowing */
 	display: flex;
@@ -5,9 +14,12 @@
 	
 	.articleImageWrapper {
 		align-items: center;
+		border-radius: 3px;
+		box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 		display: flex;
 		max-height: 300px;
 		overflow: hidden;
+		width: 100%;
 		
 		img {
 			height: auto !important;
@@ -26,12 +38,6 @@
 }
 
 .articleContent {
-	.articleTeaser {
-		@include wcfFontBold;
-		
-		margin-bottom: 20px;
-	}
-	
 	.articleTagList {
 		margin-top: 20px;
 	}
-- 
2.20.1