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 09e4259ea6ae495aad2d5aaba7c22f0e6584cee9..8a241fdb902f6edbf2c6302f9be44a2206d9ef80 100644 (file)
--- 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 64b504a853d78a1ec036ae16f6f0e7db4afe6a89..b51286d46b29c6df1bcbbd68ef371701fc628983 100644 (file)
--- 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 {