Improve web help header

Header with symbol, logo and navigation dropdowns now uses
grid layout when screen width is desktop.

Change-Id: I00612ebe04110b3608d9534c0ebdb23d5b788c54
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/95668
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

2 files changed, 58 insertions, 45 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 323f79e062..2d1b2cc4a1 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -134,7 +134,6 @@ pre,
     font-weight: bold;
 }
 .keycode {
-    /*font-weight: bold;*/
     font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
 }
 .widget{
@@ -334,32 +333,43 @@ h6 {
     grid-area: header;
     position: sticky;
     top: 0px;
-    z-index: 100;
-}
-header {
     color: #fff;
-    height: 64px;
-    padding: 8px 8px 8px 16px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
 }
-.logo-container {
+.dropdowns {
+    /* allow for scrolling */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* make it smooth on iOS */
+    -webkit-overflow-scrolling: touch;
+    grid-area: dropdowns;
     display: flex;
     justify-content: space-between;
+    flex-direction: column;
 }
-.logo {
+symbol, .logo {
     color: #fff;
     text-decoration: none;
-    display: flex;
+}
+.logo:hover {
+    text-decoration: none;
+    color: #fff;
 }
 .logo p {
     font-size: 24px;
 }
-.logo .symbol {
+.symbol {
+    grid-area: symbol;
+    padding: 8px 8px 8px 20px;
+}
+.symbol div {
     background-image: url(media/navigation/libo-symbol-white.svg);
     background-repeat: no-repeat;
     background-size: contain;
     width: 52px;
     height: 60px;
-    margin-right: 10px;
 }
 
 [data-a11y-toggle]:not([aria-controls]) {
@@ -740,6 +750,11 @@ li.disabled a {
     }
 }
 @media screen and (min-width: 960px) {
+    .dropdowns {
+        flex-direction: row;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
     #langs-nav, #modules-nav {
         display: none;
     }
@@ -752,13 +767,11 @@ li.disabled a {
         cursor: pointer;
         color: #fff;
         font-size: 19px;
-        position: relative;
-        top: 40px;
         display: block;
         background: transparent;
         border: none;
         text-transform: none;
-        padding:0;
+        padding: 0;
         line-height: normal;
     }
 
@@ -766,12 +779,11 @@ li.disabled a {
     #langs-nav:not([aria-hidden='true']), #modules-nav:not([aria-hidden='true']) {
         display: flex;
         flex-direction: column;
-        max-width: 120px;
         overflow-y: auto;
         overflow-x: hidden;
+        max-width: 120px;
         max-height: 480px;
         position: absolute;
-        top: 80px;
     }
     #modules-nav {
         background-color: #101820;
@@ -803,16 +815,9 @@ li.disabled a {
         grid-area: footer;
     }
     .lang {
-        position: absolute;
-        top: 0;
-        left: 200px;
         background-color: transparent;
     }
     .modules {
-        width: 120px;
-        position: absolute;
-        top: 0;
-        left: 80px;
         border: none;
         background-color: transparent;
     }
@@ -856,6 +861,14 @@ li.disabled a {
 /* Use @supports to sneak these rules past IE */
 @supports (grid-area: auto) {
     @media screen and (min-width: 960px) {
+        #TopLeftHeader {
+            display: grid;
+            align-items: end;
+            grid-template-columns: auto auto;
+            grid-template-rows: auto auto;
+            grid-template-areas: "symbol logo"
+                                "symbol dropdowns"
+        }
         #SearchFrame {
             grid-area: search;
             display: flex;
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 1f5d93467a..3a934dcb21 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -164,30 +164,30 @@
         <meta itemprop="datePublished" content="2017"/>
         <meta itemprop="headline" content="{$titleL10N}"/>
     </xsl:if>
-    <div id="TopLeftHeader">
-        <header>
-            <div class="logo-container">
-                <a class="logo" href="{$lang}/text/shared/05/new_help.html">
-                    <div class="symbol"></div>
-                    <p><xsl:value-of select="$ui_logo"/></p>
-                </a>
-            </div>
-        </header>
-        <div class="modules">
-            <button type="button" data-a11y-toggle="modules-nav" id="modules" onclick="setupModules('{$lang}');">
-                <xsl:value-of select="$ui_module"/>
-            </button>
-	    <nav id="modules-nav"/><!-- is filled in via setupModules() on demand -->
-        </div>
-        <xsl:if test="$online">
-            <div class="lang">
-                <button type="button" data-a11y-toggle="langs-nav" id="langs" onclick="setupLanguages('{$htmlpage}');">
-                    <xsl:value-of select="$ui_language"/>
+    <header id="TopLeftHeader">
+        <a class="symbol" href="{$lang}/text/shared/05/new_help.html">
+            <div></div>
+        </a>
+        <a class="logo" href="{$lang}/text/shared/05/new_help.html">
+            <p><xsl:value-of select="$ui_logo"/></p>
+        </a>
+        <div class="dropdowns">
+            <div class="modules">
+                <button type="button" data-a11y-toggle="modules-nav" id="modules" onclick="setupModules('{$lang}');">
+                    <xsl:value-of select="$ui_module"/>
                 </button>
-                <nav id="langs-nav"/><!-- is filled in via setupLanguages() on demand -->
+            <nav id="modules-nav"/><!-- is filled in via setupModules() on demand -->
             </div>
-        </xsl:if>
-    </div>
+            <xsl:if test="$online">
+                <div class="lang">
+                    <button type="button" data-a11y-toggle="langs-nav" id="langs" onclick="setupLanguages('{$htmlpage}');">
+                        <xsl:value-of select="$ui_language"/>
+                    </button>
+                    <nav id="langs-nav"/><!-- is filled in via setupLanguages() on demand -->
+                </div>
+            </xsl:if>
+        </div>
+    </header>
     <aside class="rightside">
         <input id="accordion-1" name="accordion-menu" type="checkbox"/>
         <label for="accordion-1"><xsl:value-of select="$ui_contents"/></label>