Improved the visuals on smaller screen sizes

diff --git a/com.woltlab.wcf/templates/articleListItems.tpl b/com.woltlab.wcf/templates/articleListItems.tpl
index 67fd5b2d55983a5c1d27f34a7d4aaf0a2c789528..410070a4233124ad1712f3a440cbc8af56a24cb2 100644 (file)
--- 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 3315a679e86dd377585c6d15f31e4308076180c5..ada677ecd708e6e623e144ac8c880f025c94e7ac 100644 (file)
--- 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;
        }
 }