From fd94097c164abdf82ca990047aa8467f11ea2115 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Mon, 27 Jun 2016 13:35:31 +0200 Subject: [PATCH] Improved box layout * Improved margins/paddings * Improved box images * Fixed some mobile issues --- .../js/WoltLab/WCF/Ui/Page/Header/Fixed.js | 4 +- wcfsetup/install/files/style/layout/box.scss | 319 +++++++++++++----- .../install/files/style/layout/layout.scss | 14 +- .../files/style/layout/pageFooter.scss | 1 - .../files/style/layout/pageHeader.scss | 4 + .../files/style/layout/pageHeaderSticky.scss | 12 +- 6 files changed, 261 insertions(+), 93 deletions(-) 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 8f7fd79ddd..43144662b3 100644 --- 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 fd29aa2b20..7736bee57e 100644 --- a/wcfsetup/install/files/style/layout/box.scss +++ b/wcfsetup/install/files/style/layout/box.scss @@ -43,9 +43,28 @@ /* styling for boxes in 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 / 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 / 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 2708c78f4e..2c0f911d6c 100644 --- 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 { */ -@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 25b60bd3f9..f4667005ed 100644 --- 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 af58f0bd08..c5bcdc155f 100644 --- 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 a9bff6662b..8246038756 100644 --- 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; + } } -- 2.20.1