Dedicated teaser above the image, improved visuals of the image

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index e0ad68e213a98a44ede4c1140544a47942c6ab4c..9f1c05b944950aed8c0a546998a1151e4e29ef93 100644 (file)
--- 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 461452c5a07a1748b2d1655e9c296795661f0eb4..77fd840a77c21f68f1beb1556796e1ef613e8411 100644 (file)
--- 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;
        }