Improved box layout

* Improved margins/paddings
* Improved box images
* Fixed some mobile issues

diff --git a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js
index 8f7fd79ddd63714496238ee429cc411d3da35b29..43144662b315846fcbcffb4b30f3fe5eae30f614 100644 (file)
--- a/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js
+++ b/wcfsetup/install/files/js/WoltLab/WCF/Ui/Page/Header/Fixed.js
@@ -40,7 +40,9 @@ define(['Core', 'EventHandler', 'Ui/Alignment', 'Ui/CloseOverlay', 'Ui/Screen',
                 * @protected
                 */
                _initStickyPageHeader: function() {
-                       _pageHeader.style.setProperty('min-height', _pageHeader.clientHeight + 'px');
+                       if (_pageHeader.clientHeight) {
+                               _pageHeader.style.setProperty('min-height', _pageHeader.clientHeight + 'px');
+                       }
                        
                        _triggerHeight = _pageHeader.clientHeight - elBySel('.mainMenu', _pageHeader).clientHeight;
                        

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index fd29aa2b2086bc2facf9664013408d6af3cddee5..7736bee57e2fd0063fdbeda80add0d5636f4095f 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -43,9 +43,28 @@
 
 /* styling for boxes in <hero> position */
 .boxesHero {
+       .boxContainer {
+               @include screen-md-down {
+                       padding: 40px 0;
+               }
+               
+               @include screen-lg {
+                       padding: 60px 0;
+               }
+       }
+       
        .box {
-               padding: 40px;
                text-align: center;
+               
+               &:not(:last-child) {
+                       @include screen-md-down {
+                               margin-bottom: 40px;
+                       }
+                       
+                       @include screen-lg {
+                               margin-bottom: 60px;
+                       }
+               }       
        }
        
        .boxTitle {
@@ -63,8 +82,20 @@
                }
                
                .boxImage {
+                       align-items: center;
+                       display: flex;
+                       justify-content: center;
+                       max-height: 750px;
                        order: 3;
-                       margin-top: 40px;
+                       overflow: hidden;
+                       
+                       @include screen-md-down {
+                               margin-top: 20px;
+                       }
+                       
+                       @include screen-lg {
+                               margin-top: 30px;
+                       }
                }
        }
 }
@@ -87,35 +118,51 @@
        }
        
        .boxContainer {
-               margin-left: -10px;
-               margin-right: -10px;
-               
-               @include screen-sm-down {
-                       padding: 20px 0;
-               }
+               margin-left: -15px;
+               margin-right: -15px;
                
-               @include screen-md-up {
+               @include screen-sm-up {
                        display: flex;
                        flex-wrap: wrap;
-                       margin-bottom: -20px;
+               }
+               
+               @include screen-md-down {
                        padding: 40px 0;
+                       margin-bottom: -40px;
+               }
+               
+               @include screen-lg {
+                       padding: 60px 0;
+                       margin-bottom: -60px;
                }
        }
        
        .box {
                overflow: hidden;
-               padding-left: 10px;
-               padding-right: 10px;
+               padding-left: 15px;
+               padding-right: 15px;
+               text-align: center;
                
-               @include screen-sm-down {
-                       & + .box {
-                               margin-top: 20px;
+               @include screen-md-down {
+                       margin-bottom: 40px;
+               }
+               
+               @include screen-sm-md {
+                       flex: 0 0 50%;
+                       
+                       &.boxFullWidth {
+                               flex-basis: 100%;
+                       }
+                       
+                       /* one item */
+                       &:first-child:nth-last-child(1) {
+                               flex-basis: 100%;
                        }
                }
                
-               @include screen-md-up {
+               @include screen-lg {
                        flex: 0 0 25%;
-                       margin-bottom: 20px;
+                       margin-bottom: 60px;
                        
                        &.boxFullWidth {
                                flex-basis: 100%;
@@ -141,19 +188,28 @@
        }
        
        .boxImage {
-               margin-bottom: 10px;
-               text-align: center;
+               align-items: center;
+               display: flex;
+               justify-content: center;
+               margin-bottom: 20px;
+               max-height: 100px;
+               overflow: hidden;
        }
 }
 
 /* styling for boxes in <top>/<bottom> position */
 .boxesTop,
 .boxesBottom {
-       flex: 0 0 auto;
-       
        .box {
-               margin-bottom: 40px;
-               margin-top: 40px;
+               @include screen-md-down {
+                       margin-bottom: 40px;
+                       margin-top: 40px;
+               }
+               
+               @include screen-lg {
+                       margin-bottom: 60px;
+                       margin-top: 60px;
+               }
        }
        
        .boxTitle {
@@ -170,19 +226,60 @@
                }
        }
        
-       .boxWithImage {
-               @include clearfix;
-               
-               .boxTitle,
-               .boxContent {
-                       margin-left: calc(20% + 30px);
+       @include screen-xs {
+               .boxImage {
+                       align-items: center;
+                       display: flex;
+                       justify-content: center;
+                       margin-bottom: 20px;
+                       max-height: 100px;
+                       overflow: hidden;
                }
        }
        
-       .boxImage {
-               float: left;
-               width: 20%;
-       }
+       @include screen-sm-up {
+               .boxImage {
+                       width: 30%;
+               }
+               
+               .boxWithImage {
+                       @include clearfix;
+                       
+                       &:nth-child(odd) {
+                               .boxImage {
+                                       float: left;
+                               }
+                               
+                               .boxTitle,
+                               .boxContent {
+                                       @include screen-md-down {
+                                               margin-left: calc(30% + 15px);
+                                       }
+                                       
+                                       @include screen-lg {
+                                               margin-left: calc(30% + 30px);
+                                       }
+                               }
+                       }
+                       
+                       &:nth-child(even) {
+                               .boxImage {
+                                       float: right;
+                               }
+                               
+                               .boxTitle,
+                               .boxContent {
+                                       @include screen-md-down {
+                                               margin-right: calc(30% + 15px);
+                                       }
+                                       
+                                       @include screen-lg {
+                                               margin-right: calc(30% + 30px);
+                                       }
+                               }
+                       }
+               }
+       }       
 }
 
 .boxesTop {
@@ -308,19 +405,43 @@
                }
        }
        
-       .boxWithImage {
-               @include clearfix;
-               
-               .boxTitle,
-               .boxContent {
-                       margin-left: calc(20% + 10px);
+       @include screen-xs {
+               .boxImage {
+                       align-items: center;
+                       display: flex;
+                       justify-content: center;
+                       margin-bottom: 20px;
+                       max-height: 100px;
+                       overflow: hidden;
                }
        }
        
-       .boxImage {
-               float: left;
-               width: 20%;
+       @include screen-sm-md {
+               .boxWithImage {
+                       @include clearfix;
+                       
+                       .boxTitle,
+                       .boxContent {
+                               margin-left: calc(30% + 15px);
+                       }
+               }
+               
+               .boxImage {
+                       float: left;
+                       width: 30%;
+               }
        }
+       
+       @include screen-lg {
+               .boxImage {
+                       align-items: center;
+                       display: flex;
+                       justify-content: center;
+                       margin-bottom: 20px;
+                       max-height: 100px;
+                       overflow: hidden;
+               }
+       }       
 }
 
 /* styling for boxes in <contentTop>/<contentBottom> position */
@@ -332,20 +453,11 @@
                }
        }
        
-       .boxWithImage {
-               @include clearfix;
-               
-               .boxTitle,
-               .boxContent {
-                       margin-left: calc(20% + 20px);
-               }
-       }
-       
        .boxTitle {
                color: $wcfContentHeadlineText;
                
                @include wcfFontSection;
-                               
+               
                a {
                        color: $wcfContentHeadlineLink;
                        
@@ -355,10 +467,38 @@
                }
        }
        
-       .boxImage {
-               float: left;
-               width: 20%;
+       @include screen-xs {
+               .boxImage {
+                       align-items: center;
+                       display: flex;
+                       justify-content: center;
+                       margin-bottom: 20px;
+                       max-height: 100px;
+                       overflow: hidden;
+               }
        }
+       
+       @include screen-sm-up {
+               .boxWithImage {
+                       @include clearfix;
+                       
+                       .boxTitle,
+                       .boxContent {
+                               @include screen-md-down {
+                                       margin-left: calc(30% + 15px);
+                               }
+                               
+                               @include screen-lg {
+                                       margin-left: calc(30% + 30px);
+                               }
+                       }
+               }
+               
+               .boxImage {
+                       float: left;
+                       width: 30%;
+               }
+       }       
 }
 
 .boxesContentTop:not(:first-child) {
@@ -373,7 +513,6 @@
 .boxesFooterBoxes {
        background-color: $wcfFooterBoxBackground;
        color: $wcfFooterBoxText;
-       flex: 0 0 auto;
        
        a {
                color: $wcfFooterBoxLink;
@@ -388,35 +527,35 @@
        }
        
        .boxContainer {
-               margin-left: -10px;
-               margin-right: -10px;
+               margin-left: -15px;
+               margin-right: -15px;
                
                @include screen-sm-down {
-                       padding: 20px 0;
+                       padding: 40px 0;
                }
                
                @include screen-md-up {
                        display: flex;
                        flex-wrap: wrap;
-                       margin-bottom: -40px;
-                       padding: 40px 0;
+                       margin-bottom: -60px;
+                       padding: 60px 0;
                }
        }
        
        .box {
                overflow: hidden;
-               padding-left: 10px;
-               padding-right: 10px;
+               padding-left: 15px;
+               padding-right: 15px;
                
                @include screen-sm-down {
-                       & + .box {
-                               margin-top: 40px;
-                       }
+                       &:not(:last-child) {
+                               margin-bottom: 40px;
+                       }       
                }
                
                @include screen-md-up {
                        flex: 0 0 50%;
-                       margin-bottom: 40px;
+                       margin-bottom: 60px;
                        
                        &.boxFullWidth {
                                flex-basis: 100%;
@@ -437,8 +576,12 @@
        }
        
        .boxImage {
-               margin-bottom: 10px;
-               text-align: center;
+               align-items: center;
+               display: flex;
+               justify-content: center;
+               margin-bottom: 20px;
+               max-height: 100px;
+               overflow: hidden;
        }
 }
 
@@ -446,7 +589,6 @@
 .boxesFooter {
        background-color: $wcfFooterBackground;
        color: $wcfFooterText;
-       flex: 0 0 auto;
        padding: 20px 0;
        
        .icon {
@@ -467,18 +609,37 @@
                }
        }
        
-       .boxWithImage {
-               @include clearfix;
-               
-               .boxTitle,
-               .boxContent {
-                       margin-left: calc(20% + 30px);
+       @include screen-xs {
+               .boxImage {
+                       align-items: center;
+                       display: flex;
+                       justify-content: center;
+                       margin-bottom: 20px;
+                       max-height: 100px;
+                       overflow: hidden;
                }
        }
        
-       .boxImage {
-               float: left;
-               width: 20%;
+       @include screen-sm-up {
+               .boxWithImage {
+                       @include clearfix;
+                       
+                       .boxTitle,
+                       .boxContent {
+                               @include screen-md-down {
+                                       margin-left: calc(30% + 15px);
+                               }
+                               
+                               @include screen-lg {
+                                       margin-left: calc(30% + 30px);
+                               }
+                       }
+               }
+               
+               .boxImage {
+                       float: left;
+                       width: 30%;
+               }
        }
        
        .boxMenu {

diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index 2708c78f4e0098bc62fcc2658963904c4c38c159..2c0f911d6c82f9f4f3e3a2bfc3c04ae316b0e49d 100644 (file)
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -44,7 +44,13 @@ a {
 }
 
 /* COLUMN LAYOUT */
-.pageHeaderContainer {
+.pageHeaderContainer,
+.boxesHeaderBoxes,
+.pageNavigation,
+.pageFooter,
+.boxesTop,
+.boxesBottom,
+.boxesFooterBoxes {
        flex: 0 0 auto;
 }
 
@@ -52,7 +58,7 @@ a {
        flex: 1 0 auto;
        
        @include screen-md-down {
-               padding: 30px 0;
+               padding: 40px 0;
                width: 100%;
        }
        
@@ -62,7 +68,7 @@ a {
 }
 
 /* use flex-box to enforce a proper side-by-side layout on desktop */
-@include screen-md-up {
+@include screen-lg {
        .main > div {
                display: flex;
        }
@@ -112,7 +118,7 @@ a {
    <content>
    <rightSidebar>
 */
-@include screen-sm-down {
+@include screen-md-down {
        .sidebar {
                margin: 0 -10px;
        }

diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
index 25b60bd3f9cb004865d5bceadc09e4d616f7086b..f4667005edb3a02a13d544b36ceb50a636224f5a 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter.scss
@@ -1,7 +1,6 @@
 .pageFooterCopyright {
        background-color: $wcfFooterCopyrightBackground;
        color: $wcfFooterCopyrightText;
-       flex: 0 0 auto;
        text-align: center;
        
        @include screen-md-up {

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index af58f0bd08045ba64b1b39702be92803331e5dd8..c5bcdc155f40592907d38210f3f13f515bdbfc92 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -16,6 +16,10 @@
        }
 }
 
+.pageHeader {
+       min-height: 52px;
+}
+
 .pageHeader .layoutBoundary {
        display: flex;
        

diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
index a9bff6662bd6217b87fe41eb732dd54baf0159a3..824603875656cdda76eb3d04bbd3096a5c2c4cb3 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
+++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss
@@ -140,19 +140,11 @@
        }
 }
 
-@include screen-xs {
-       .pageHeaderContainer {
-               height: 50px;
-               z-index: 300;
-       }
-}
-
 // force sticky header on tablets, there is no difference when scrolled
 // all the way up and it might flicker when scrolling due to the inconsistent
 // scroll event being fired
 @include screen-sm-md {
        .pageHeaderContainer {
-               height: 50px;
                z-index: 300;
                
                // touch browser allow to scroll past the page top before they bounce back,
@@ -174,4 +166,8 @@
                        z-index: 301;
                }
        }
+       
+       .boxesHero {
+               background-color: $wcfHeaderBackground;
+       }
 }