Tweak the language menu

Simplified the markup and tweaked the look a bit.

Change-Id: Ifc296a82b17215e7bcfbfc17432aacddb922664b
Reviewed-on: https://gerrit.libreoffice.org/43345
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>

2 files changed, 88 insertions, 78 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index d686169b17..4feb3ae04a 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -231,14 +231,16 @@ header {
     float: left;
     margin-right: .5em;
 }
-header ul {
+header nav {
     margin-top: .7em;
     padding: 0;
     display: none;
+    border: 1px solid;
+    position: relative;
 }
 /* Create a style for the first level items */
 
-header > ul > li > a {
+header nav a {
     color: #333333;
     background-color: #EEEEEE;
     display: block;
@@ -246,17 +248,19 @@ header > ul > li > a {
     padding: 0.2em 0.4em;
     text-decoration: none;
     font-weight: bold;
-    border: 1px solid;
+    border-width: 0 1px 0 0;
+    border-style: solid;
     border-color: #333333;
     font-size: 1.5em;
-}
-header ul li {
-    /* make sure the width is honored */
-    
     flex-shrink: 0;
-    list-style-type: none;
     z-index: 100;
+    white-space: nowrap;
+}
+
+header nav a:last-child {
+    border-right-width: 0;
 }
+
 header label {
     cursor: pointer;
     font-size: 1.2em;
@@ -264,7 +268,7 @@ header label {
     top: 2em;
     float: right;
 }
-header input[type="checkbox"]:checked ~ ul {
+header input[type="checkbox"]:checked ~ nav {
     background: #f1f1f1;
     color: #444;
     z-index: 100;
@@ -275,6 +279,7 @@ header input[type="checkbox"]:checked ~ ul {
     /* allow for scrolling */
     
     overflow-x: auto;
+    overflow-y: hidden;
     /* make it smooth on iOS */
     
     -webkit-overflow-scrolling: touch;
@@ -559,12 +564,17 @@ header input[type=checkbox],
         max-width: 1024px;
         margin: auto;
     }
-    header > ul > li > a {
+    header nav a {
         font-size: 1em;
+        white-space: normal;
+        border-width: 0 0 1px 0;
+    }
+    header nav a:last-child {
+        border-bottom-width: 0;
     }
     /* change the language menu direction to stacked */
     
-    header input[type="checkbox"]:checked ~ ul {
+    header input[type="checkbox"]:checked ~ nav {
         flex-direction: column;
         max-width: 7.5em;
         float: right;
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index f3ddebee4a..1d036fdb7a 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -144,73 +144,73 @@
         <xsl:if test="$online">
             <input id="langs" name="language-menu" type="checkbox"/>
             <label for="langs"><xsl:call-template name="getLanguage"><xsl:with-param name="lang" select="$lang"/></xsl:call-template> ▼</label>
-            <ul>
-                <li><a href="{$productversion}/en-US{$htmlpage}">English (USA)</a></li>
-                <li><a href="{$productversion}/am{$htmlpage}">አማርኛ</a></li>
-                <li><a href="{$productversion}/ar{$htmlpage}">العربية</a></li>
-                <li><a href="{$productversion}/ast{$htmlpage}">Asturianu</a></li>
-                <li><a href="{$productversion}/bg{$htmlpage}">Български</a></li>
-                <li><a href="{$productversion}/bn{$htmlpage}">বাংলা</a></li>
-                <li><a href="{$productversion}/bn-IN{$htmlpage}">বাংলা</a></li>
-                <li><a href="{$productversion}/bo{$htmlpage}">བོད་ཡིག / Bod skad</a></li>
-                <li><a href="{$productversion}/bs{$htmlpage}">Bosanski</a></li>
-                <li><a href="{$productversion}/ca{$htmlpage}">Català</a></li>
-                <li><a href="{$productversion}/ca-valencia{$htmlpage}">Català-Valencia</a></li>
-                <li><a href="{$productversion}/cs{$htmlpage}">Česky</a></li>
-                <li><a href="{$productversion}/da{$htmlpage}">Dansk</a></li>
-                <li><a href="{$productversion}/de{$htmlpage}">Deutsch</a></li>
-                <li><a href="{$productversion}/dz{$htmlpage}"> ཇོང་ཁ</a></li>
-                <li><a href="{$productversion}/el{$htmlpage}">Ελληνικά</a></li>
-                <li><a href="{$productversion}/en-GB{$htmlpage}">English (GB)</a></li>
-                <li><a href="{$productversion}/en-ZA{$htmlpage}">English (ZA)</a></li>
-                <li><a href="{$productversion}/eo{$htmlpage}">Esperanto</a></li>
-                <li><a href="{$productversion}/es{$htmlpage}">Español</a></li>
-                <li><a href="{$productversion}/et{$htmlpage}">Eesti</a></li>
-                <li><a href="{$productversion}/eu{$htmlpage}">Euskara</a></li>
-                <li><a href="{$productversion}/fi{$htmlpage}">Suomi</a></li>
-                <li><a href="{$productversion}/fr{$htmlpage}">Français</a></li>
-                <li><a href="{$productversion}/gl{$htmlpage}">Galego</a></li>
-                <li><a href="{$productversion}/gu{$htmlpage}">ગુજરાતી</a></li>
-                <li><a href="{$productversion}/he{$htmlpage}">עברית</a></li>
-                <li><a href="{$productversion}/hi{$htmlpage}">हिन्दी</a></li>
-                <li><a href="{$productversion}/hr{$htmlpage}">Hrvatski</a></li>
-                <li><a href="{$productversion}/hu{$htmlpage}">Magyar</a></li>
-                <li><a href="{$productversion}/id{$htmlpage}">Bahasa Indonesia</a></li>
-                <li><a href="{$productversion}/is{$htmlpage}">Íslenska</a></li>
-                <li><a href="{$productversion}/it{$htmlpage}">Italiano</a></li>
-                <li><a href="{$productversion}/ja{$htmlpage}">日本語</a></li>
-                <li><a href="{$productversion}/ka{$htmlpage}">ქართული</a></li>
-                <li><a href="{$productversion}/km{$htmlpage}">ភាសាខ្មែរ</a></li>
-                <li><a href="{$productversion}/ko{$htmlpage}">한국어</a></li>
-                <li><a href="{$productversion}/lo{$htmlpage}">ລາວ</a></li>
-                <li><a href="{$productversion}/lt{$htmlpage}">Lietuvių</a></li>
-                <li><a href="{$productversion}/lv{$htmlpage}">Latviešu</a></li>
-                <li><a href="{$productversion}/mk{$htmlpage}">Македонски</a></li>
-                <li><a href="{$productversion}/nb{$htmlpage}">Norsk (bokmål / riksmål)</a></li>
-                <li><a href="{$productversion}/ne{$htmlpage}">नेपाली</a></li>
-                <li><a href="{$productversion}/nl{$htmlpage}">Nederlands</a></li>
-                <li><a href="{$productversion}/nn{$htmlpage}">Norsk (nynorsk)</a></li>
-                <li><a href="{$productversion}/om{$htmlpage}">Oromoo</a></li>
-                <li><a href="{$productversion}/pl{$htmlpage}">Polski</a></li>
-                <li><a href="{$productversion}/pt{$htmlpage}">Português</a></li>
-                <li><a href="{$productversion}/pt-BR{$htmlpage}">Português do Brasil</a></li>
-                <li><a href="{$productversion}/ro{$htmlpage}">Română</a></li>
-                <li><a href="{$productversion}/ru{$htmlpage}">Русский</a></li>
-                <li><a href="{$productversion}/si{$htmlpage}">සිංහල</a></li>
-                <li><a href="{$productversion}/sid{$htmlpage}">Sidámo 'Afó</a></li>
-                <li><a href="{$productversion}/sk{$htmlpage}">Slovenčina</a></li>
-                <li><a href="{$productversion}/sl{$htmlpage}">Slovenščina</a></li>
-                <li><a href="{$productversion}/sq{$htmlpage}">Shqip</a></li>
-                <li><a href="{$productversion}/sv{$htmlpage}">Svenska</a></li>
-                <li><a href="{$productversion}/ta{$htmlpage}">தமிழ்</a></li>
-                <li><a href="{$productversion}/tg{$htmlpage}">Тоҷикӣ</a></li>
-                <li><a href="{$productversion}/tr{$htmlpage}">Türkçe</a></li>
-                <li><a href="{$productversion}/ug{$htmlpage}">ئۇيغۇرچە</a></li>
-                <li><a href="{$productversion}/uk{$htmlpage}">Українська</a></li>
-                <li><a href="{$productversion}/vi{$htmlpage}">Tiếng Việt</a></li>
-                <li><a href="{$productversion}/zh-CN{$htmlpage}">中文 (简体字)</a></li>
-                <li><a href="{$productversion}/zh-TW{$htmlpage}">中文 (正體字)‬</a></li>
-            </ul>
+            <nav>
+                <a href="{$productversion}/en-US{$htmlpage}">English (USA)</a>
+                <a href="{$productversion}/am{$htmlpage}">አማርኛ</a>
+                <a href="{$productversion}/ar{$htmlpage}">العربية</a>
+                <a href="{$productversion}/ast{$htmlpage}">Asturianu</a>
+                <a href="{$productversion}/bg{$htmlpage}">Български</a>
+                <a href="{$productversion}/bn{$htmlpage}">বাংলা</a>
+                <a href="{$productversion}/bn-IN{$htmlpage}">বাংলা</a>
+                <a href="{$productversion}/bo{$htmlpage}">བོད་ཡིག / Bod skad</a>
+                <a href="{$productversion}/bs{$htmlpage}">Bosanski</a>
+                <a href="{$productversion}/ca{$htmlpage}">Català</a>
+                <a href="{$productversion}/ca-valencia{$htmlpage}">Català-Valencia</a>
+                <a href="{$productversion}/cs{$htmlpage}">Česky</a>
+                <a href="{$productversion}/da{$htmlpage}">Dansk</a>
+                <a href="{$productversion}/de{$htmlpage}">Deutsch</a>
+                <a href="{$productversion}/dz{$htmlpage}"> ཇོང་ཁ</a>
+                <a href="{$productversion}/el{$htmlpage}">Ελληνικά</a>
+                <a href="{$productversion}/en-GB{$htmlpage}">English (GB)</a>
+                <a href="{$productversion}/en-ZA{$htmlpage}">English (ZA)</a>
+                <a href="{$productversion}/eo{$htmlpage}">Esperanto</a>
+                <a href="{$productversion}/es{$htmlpage}">Español</a>
+                <a href="{$productversion}/et{$htmlpage}">Eesti</a>
+                <a href="{$productversion}/eu{$htmlpage}">Euskara</a>
+                <a href="{$productversion}/fi{$htmlpage}">Suomi</a>
+                <a href="{$productversion}/fr{$htmlpage}">Français</a>
+                <a href="{$productversion}/gl{$htmlpage}">Galego</a>
+                <a href="{$productversion}/gu{$htmlpage}">ગુજરાતી</a>
+                <a href="{$productversion}/he{$htmlpage}">עברית</a>
+                <a href="{$productversion}/hi{$htmlpage}">हिन्दी</a>
+                <a href="{$productversion}/hr{$htmlpage}">Hrvatski</a>
+                <a href="{$productversion}/hu{$htmlpage}">Magyar</a>
+                <a href="{$productversion}/id{$htmlpage}">Bahasa Indonesia</a>
+                <a href="{$productversion}/is{$htmlpage}">Íslenska</a>
+                <a href="{$productversion}/it{$htmlpage}">Italiano</a>
+                <a href="{$productversion}/ja{$htmlpage}">日本語</a>
+                <a href="{$productversion}/ka{$htmlpage}">ქართული</a>
+                <a href="{$productversion}/km{$htmlpage}">ភាសាខ្មែរ</a>
+                <a href="{$productversion}/ko{$htmlpage}">한국어</a>
+                <a href="{$productversion}/lo{$htmlpage}">ລາວ</a>
+                <a href="{$productversion}/lt{$htmlpage}">Lietuvių</a>
+                <a href="{$productversion}/lv{$htmlpage}">Latviešu</a>
+                <a href="{$productversion}/mk{$htmlpage}">Македонски</a>
+                <a href="{$productversion}/nb{$htmlpage}">Norsk (bokmål / riksmål)</a>
+                <a href="{$productversion}/ne{$htmlpage}">नेपाली</a>
+                <a href="{$productversion}/nl{$htmlpage}">Nederlands</a>
+                <a href="{$productversion}/nn{$htmlpage}">Norsk (nynorsk)</a>
+                <a href="{$productversion}/om{$htmlpage}">Oromoo</a>
+                <a href="{$productversion}/pl{$htmlpage}">Polski</a>
+                <a href="{$productversion}/pt{$htmlpage}">Português</a>
+                <a href="{$productversion}/pt-BR{$htmlpage}">Português do Brasil</a>
+                <a href="{$productversion}/ro{$htmlpage}">Română</a>
+                <a href="{$productversion}/ru{$htmlpage}">Русский</a>
+                <a href="{$productversion}/si{$htmlpage}">සිංහල</a>
+                <a href="{$productversion}/sid{$htmlpage}">Sidámo 'Afó</a>
+                <a href="{$productversion}/sk{$htmlpage}">Slovenčina</a>
+                <a href="{$productversion}/sl{$htmlpage}">Slovenščina</a>
+                <a href="{$productversion}/sq{$htmlpage}">Shqip</a>
+                <a href="{$productversion}/sv{$htmlpage}">Svenska</a>
+                <a href="{$productversion}/ta{$htmlpage}">தமிழ்</a>
+                <a href="{$productversion}/tg{$htmlpage}">Тоҷикӣ</a>
+                <a href="{$productversion}/tr{$htmlpage}">Türkçe</a>
+                <a href="{$productversion}/ug{$htmlpage}">ئۇيغۇرچە</a>
+                <a href="{$productversion}/uk{$htmlpage}">Українська</a>
+                <a href="{$productversion}/vi{$htmlpage}">Tiếng Việt</a>
+                <a href="{$productversion}/zh-CN{$htmlpage}">中文 (简体字)</a>
+                <a href="{$productversion}/zh-TW{$htmlpage}">中文 (正體字)‬</a>
+            </nav>
         </xsl:if>
     </header>
     <nav id="Modules" class="modules">