From a5d9294edf539ba793ced71425bfbe0e6c4d8093 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 22 Apr 2016 14:23:17 +0200 Subject: [PATCH] Force non-sticky page header on small devices All though quite nice to have the menu always at hand, it takes up way too much space on small devices such as smartphones. For example an iPhone 4 in landscape has a height of 320px, having a sticky page header with 50px reduces the effective height by ~16%. --- .../install/files/style/layout/pageHeader.scss | 6 ------ .../files/style/layout/pageHeaderSticky.scss | 15 +++++++++++++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss index 09e4259ea6..8a241fdb90 100644 --- a/wcfsetup/install/files/style/layout/pageHeader.scss +++ b/wcfsetup/install/files/style/layout/pageHeader.scss @@ -333,12 +333,6 @@ } @include screen-md-down { - .pageHeaderContainer { - // touch browser allow to scroll past the page top before they bounce back, - // but in that case the original background color is visible - background-color: transparent; - } - .pageHeader > div > div { padding-bottom: 10px; padding-top: 10px; diff --git a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss index 64b504a853..b51286d46b 100644 --- a/wcfsetup/install/files/style/layout/pageHeaderSticky.scss +++ b/wcfsetup/install/files/style/layout/pageHeaderSticky.scss @@ -145,13 +145,24 @@ } } -// force sticky header on handheld devices, there is no difference when scrolled +@include screen-xs { + .pageHeaderContainer { + height: 50px; + z-index: 300; + } +} + +// force sticky header on tabkets, 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-md-down { +@include screen-sm-md { .pageHeaderContainer { height: 50px; z-index: 300; + + // touch browser allow to scroll past the page top before they bounce back, + // but in that case the original background color is visible + background-color: transparent; } .pageHeader { -- 2.20.1