From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 22 Apr 2016 12:23:17 +0000 (+0200)
Subject: Force non-sticky page header on small devices
X-Git-Tag: 3.0.0_Beta_1~1839
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a5d9294edf539ba793ced71425bfbe0e6c4d8093;p=GitHub%2FWoltLab%2FWCF.git

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%.
---

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 {