From 5b904688321728a653f7c6a42bd3a5f906443e3a Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Fri, 21 Apr 2017 14:43:56 +0200
Subject: [PATCH] SPR-950: optimate Headerstyling in Mobile

---
 css/area_header.less        | 37 +++++++++++++++++++++++++++++--------
 css/area_nav-usertools.less | 16 ++++++++++++++++
 css/base.less               |  3 +++
 3 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/css/area_header.less b/css/area_header.less
index 0225a71..651edd7 100755
--- a/css/area_header.less
+++ b/css/area_header.less
@@ -8,14 +8,13 @@
 #dokuwiki__header {
     @header-font-opacity: 1;
 
+    @media @screen_max-xxs {
+        min-height: 120px;
+    }
+
+
 /* + + +  wiki logo  + + + */
     @media @screen_min-md {
-        div.claim {
-            display: table-cell;
-            height: 100%;
-            vertical-align: middle;
-        }
-
         .logo {
             padding: 1rem 0 .3rem;
 
@@ -48,7 +47,7 @@
     }
 
 
-/* + + +  wiki title + claim  + + + */
+/* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
     .main-title.desktop-only {
         @media @screen_min-md {
             display: table-cell;
@@ -70,14 +69,24 @@
                 display: block;
                 padding-bottom: 1rem;
             }
+
+            @media @screen_max-xxs {
+                padding-right: (@toggle-size + @headericons-margin-xxs);
+            }
         }
     }
 
+
+/* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
     .main-title:not([class*="desktop-only"]) {
         @media @screen_max-md {
             display: table-cell;
             vertical-align: middle;
         }
+
+        @media @screen_max-xxs {
+            padding-right: (@toggle-size + @headericons-margin-xxs);
+        }
     }
 
 
@@ -101,6 +110,16 @@
     }
 
 
+/* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
+    @media @screen_min-md {
+        div.claim {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+
+
 /* + + +  wiki claim  + + + */
     p.claim {
         opacity: @header-font-opacity;
@@ -116,7 +135,9 @@
 
 /* + + +  mobile nav togglelink  + + + */
     .menu-togglelink {
-        margin: .45rem -(@very-small-spacing) 0 0;
+        position: relative;
+        z-index: 1;
+        margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;
 
         a {
             .fontello();
diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less
index 70d07c2..224c235 100755
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@@ -25,6 +25,12 @@
             float: right;
             min-height: 28px;
 
+            @media @screen_max-xxs {
+                display: block;
+                float: none;
+                margin-bottom: @headericons-margin-xxs;
+            }
+
             > strong,
             > a {
                 display: block;
@@ -80,6 +86,16 @@
                     padding-top: @space-max-md;
                 }
 
+                @media @screen_max-xxs {
+                    position: absolute;
+                    top: @headericons-margin-xxs;
+                    right: (@toggle-size + @headericons-margin-xxs);
+                    max-width: 225px;
+                    overflow-x: hidden;
+                    white-space: nowrap;
+                    margin: -1px 0 0;
+                }
+
                 > a {
                     .display-flex();
                     .align-items();
diff --git a/css/base.less b/css/base.less
index 4b8c3b9..d6361c1 100755
--- a/css/base.less
+++ b/css/base.less
@@ -44,6 +44,8 @@
 
 @toggle-showsidebar_width: 3.07rem;       // shown sidebar after toggle
 
+@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
+
 @page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
 @page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
 @meta-box_height:          (@page-header_height - @page_padding-top);
@@ -61,6 +63,7 @@
 @wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
 
 
+
 /* navigation left */
 @menu-margin-lg: 1.3rem;