[Libreoffice-commits] help.git: help3xsl/default.css help3xsl/help.js help3xsl/localized.xsl help3xsl/online_transform.xsl

Ilmari Lauhakangas ilmari.lauhakangas at libreoffice.org
Fri Dec 29 11:49:21 UTC 2017


 help3xsl/default.css          |  135 ++++++++++------
 help3xsl/help.js              |   16 -
 help3xsl/localized.xsl        |   41 ----
 help3xsl/online_transform.xsl |  349 +++++++++++++++++++++++++-----------------
 4 files changed, 304 insertions(+), 237 deletions(-)

New commits:
commit 50b850013374e0f711b5cded92739934d758bf1f
Author: Ilmari Lauhakangas <ilmari.lauhakangas at libreoffice.org>
Date:   Thu Dec 28 16:05:43 2017 +0200

    tdf#114709, tdf#112758, tdf#112757
    
    Lots of changes and tweaks.
    Header and footer now span 100% width even on desktop.
    Font sizes were increased and content area made narrower.
    We now have two separate language menus so the menu is
    always visible on mobile.
    Google search moved out of the accordion panel.
    Accordion panel colours made darker.
    On desktop, expanded accordion panels overlap content.
    
    Change-Id: I976a67b1ca0cb2d21f0569da8d1fefd2b589d7d3
    Reviewed-on: https://gerrit.libreoffice.org/47139
    Reviewed-by: Olivier Hallot <olivier.hallot at libreoffice.org>
    Tested-by: Olivier Hallot <olivier.hallot at libreoffice.org>

diff --git a/help3xsl/default.css b/help3xsl/default.css
index f4ee3273f..268b1ac4d 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -92,7 +92,7 @@ h6 {
 }
 p,
 td {
-    font-size: 11pt;
+    font-size: 14pt;
     margin: 2px 2px 2px 2px;
 }
 h1 {
@@ -102,15 +102,15 @@ h1 {
     padding-bottom: 6px;
 }
 h2 {
-    font-size: 14pt;
+    font-size: 18pt;
 }
 h3 {
-    font-size: 12pt;
+    font-size: 16pt;
 }
 h4,
 h5,
 h6 {
-    font-size: 11pt;
+    font-size: 14pt;
 }
 .avis {
     /*    background-color: #EEEEEE;*/
@@ -191,6 +191,7 @@ h6 {
     overflow: auto;
     padding: 10px;
     grid-area: main;
+    margin-bottom: 50px;
 }
 .mediabutton {
     background-color: cyan;
@@ -211,21 +212,20 @@ header {
     color: #fff;
     height: 4em;
     padding: .5em .5em .5em 1em;
-    flex-wrap: wrap;
-    justify-content: space-between;
     grid-area: header;
 }
+.logo-menu-container {
+    display: flex;
+    justify-content: space-between;
+}
 .logo {
-    flex-shrink: 0;
     color: #fff;
     text-decoration: none;
-    float: left;
-    width: 190px;
+    display: flex;
+    align-items: flex-end;
 }
 .logo p {
     font-size: 1.5em;
-    width: 130px;
-    float: left;
 }
 .logo .symbol {
     background-image: url(media/navigation/libo-symbol-white.svg);
@@ -233,20 +233,19 @@ header {
     background-size: contain;
     width: 3em;
     height: 3.7em;
-    float: left;
     margin-right: .5em;
 }
 header nav {
     margin-top: .7em;
     padding: 0;
     display: none;
-    border: 1px solid;
+    border: 1px solid #333;
     position: relative;
 }
 /* Create a style for the first level items */
 
-header nav a {
-    color: #333333;
+header nav a, .mobile-lang a {
+    color: #333;
     background-color: #EEEEEE;
     display: block;
     line-height: 1.5em;
@@ -255,14 +254,14 @@ header nav a {
     font-weight: bold;
     border-width: 0 1px 0 0;
     border-style: solid;
-    border-color: #333333;
+    border-color: #333;
     font-size: 1.5em;
     flex-shrink: 0;
     z-index: 100;
     white-space: nowrap;
 }
 
-header nav a:last-child {
+header nav a:last-child, .mobile-lang a:last-child {
     border-right-width: 0;
 }
 
@@ -272,21 +271,34 @@ header label {
     position: relative;
     top: 2em;
     float: right;
+    display: none;
 }
 header input[type="checkbox"]:checked ~ nav {
     background: #f1f1f1;
-    color: #444;
+    color: #333;
     z-index: 100;
-    /* line them up horizontally */
+    display: none;
+    /* allow for scrolling */
+
+    overflow-x: auto;
+    /* make it smooth on iOS */
 
+    -webkit-overflow-scrolling: touch;
+    clear: both;
+    text-align: center;
+}
+.mobile-lang {
+    background: #f1f1f1;
+    color: #333;
+    border: 1px solid #333;
+    z-index: 100;
+    /* line them up horizontally */
     display: flex;
     flex-direction: row;
     /* allow for scrolling */
-
     overflow-x: auto;
     overflow-y: hidden;
     /* make it smooth on iOS */
-
     -webkit-overflow-scrolling: touch;
     clear: both;
     text-align: center;
@@ -298,6 +310,9 @@ footer {
     text-align: center;
     grid-area: footer;
 }
+footer .headerfooter-center {
+    margin-top: 20px;
+}
 footer a {
     color: #c2f6ba;
 }
@@ -343,9 +358,17 @@ footer a {
     list-style-type: none;
     grid-area: accordion;
 }
+.acc-panel {
+    z-index: 10;
+}
 .acc-panel > div {
     display: none;
 }
+.gsc-control-cse {
+    border-color: transparent !important;
+    background-color: transparent !important;
+    padding: 3px 0 0 0 !important;
+}
 header input[type=checkbox],
 .contents-treeview input[type=checkbox] {
     position: absolute;
@@ -355,7 +378,7 @@ header input[type=checkbox],
     display: none;
 }
 .acc-panel > label {
-    color: #666;
+    color: #333;
     cursor: pointer;
     display: block;
     font-size: 1em;
@@ -364,32 +387,27 @@ header input[type=checkbox],
     padding: 0 1.5em;
     text-align: center;
 }
-.acc-panel:nth-of-type(1) > label {
-    background: #E7FDE4;
-}
 .acc-panel:nth-of-type(2) > label {
-    background: #F7FEE5;
+    background: #F0FDD2;
 }
 .acc-panel:nth-of-type(3) > label {
-    background: #E2FBF8;
+    background: #CAF4F0;
 }
 .acc-panel > label:hover {
     color: #222;
 }
-.acc-panel:nth-of-type(1) > label:hover {
-    background: #D5FACF;
-}
 .acc-panel:nth-of-type(2) > label:hover {
-    background: #F0FDD2;
+    background: #D4F489;
 }
 .acc-panel:nth-of-type(3) > label:hover {
-    background: #CAF4F0;
+    background: #6ABFB6;
 }
 .accordion input[type=checkbox]:checked + label + div {
     background: #f1f1f1;
-    color: #444;
+    color: #333;
     z-index: 6;
     display: block;
+    padding: 15px 0;
 }
 #Index div#SearchBox {
     background-color: #c2f6ba;
@@ -405,7 +423,7 @@ header input[type=checkbox],
 }
 #Index ul li {
     list-style-type: none;
-    font-size: 11pt;
+    font-size: 14pt;
 }
 #Index p {
     font-size: 16pt;
@@ -440,7 +458,7 @@ header input[type=checkbox],
     padding: 0.5em 0.5em;
     text-decoration: none;
     font-weight: bold;
-    font-size: 11pt;
+    font-size: 14pt;
     float: left;
 }
 .modules div {
@@ -459,7 +477,6 @@ header input[type=checkbox],
     width: 21.5px;
     height: 26px;
     position: relative;
-    top: -8px;
     margin-right: 5px;
 }
 .calc {
@@ -493,18 +510,14 @@ header input[type=checkbox],
     padding: 0;
     margin: 0;
     list-style: none;
-    font-size: 11pt;
+    font-size: 14pt;
 }
 .contents-treeview {
-    /*    font: normal 11px "Segoe UI", Arial, Sans-serif;*/
-
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
 }
 .contents-treeview a {
-    /*     color: #00f; */
-
     text-decoration: none;
 }
 .contents-treeview a:hover {
@@ -565,9 +578,17 @@ header input[type=checkbox],
     }
 }
 @media screen and (min-width: 960px) {
-    body {
+    .content-center {
+        max-width: 1024px;
+        margin: 0 auto;
+        grid-area: content-center;
+    }
+    .mobile-lang {
+        display: none;
+    }
+    .headerfooter-center {
         max-width: 1024px;
-        margin: auto;
+        margin: 0 auto;
     }
     header nav a {
         font-size: 1em;
@@ -577,9 +598,18 @@ header input[type=checkbox],
     header nav a:last-child {
         border-bottom-width: 0;
     }
+    header label {
+        cursor: pointer;
+        font-size: 1.2em;
+        position: relative;
+        top: 2em;
+        float: right;
+        display: block;
+    }
     /* change the language menu direction to stacked */
 
     header input[type="checkbox"]:checked ~ nav {
+        display: flex;
         flex-direction: column;
         max-width: 7.5em;
         float: right;
@@ -589,16 +619,23 @@ header input[type=checkbox],
     .accordion {
         display: flex;
         width: 960px;
+        max-height: 50px;
     }
-    .acc-panel {
+    .accordion > div {
         flex-basis: 320px;
     }
+    .acc-panel:nth-of-type(2) > label, #Contents {
+        margin-left: .25em;
+    }
     .acc-panel > label {
         margin-right: .25em;
     }
     .accordion input[type=checkbox]:checked + label + div {
         max-width: 316px;
     }
+    #DisplayArea {
+        padding: 10px 150px;
+    }
     #search-bar {
         max-width: 290px;
     }
@@ -610,10 +647,16 @@ header input[type=checkbox],
             grid-template-columns: 320px 1fr;
             grid-template-rows: 1fr minmax(1em, auto);
             grid-template-areas: "header header"
-                                 "modules modules"
+                                 "content-center content-center"
+                                 "footer footer"
+        }
+        content-center {
+            display: grid;
+            grid-template-columns: 320px 1fr;
+            grid-template-rows: 1fr minmax(1em, auto);
+            grid-template-areas: "modules modules"
                                  "accordion accordion"
                                  "main main"
-                                 "footer footer";
         }
     }
 }
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 09ebb34b8..552022070 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -74,19 +74,19 @@ function getParameterByName(name, url) {
     if (!url) {
         url = window.location.href;
     }
-    
+
     name = name.replace(/[\[\]]/g, "\\$&");
     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
     var results = regex.exec(url);
-    
+
     if (!results) {
         return null;
     }
-    
+
     if (!results[2]) {
         return '';
     }
-    
+
     return decodeURIComponent(results[2].replace(/\+/g, " "));
 }
 
@@ -124,14 +124,8 @@ $(document).ready(function() {
     $('input[name="accordion-menu"]').on('change', function(){
         $('input[name="accordion-menu"]').not(this).prop('checked', false);
     });
-    //focus Google Search input clicking on Find panel
-    $('#accordion-2').on('change', function(){
-        if($(this).is(':checked')){
-            $('#gsc-i-id1').focus();
-        }
-    });
     //focus index search input clicking on Index panel
-    $('#accordion-3').on('change', function(){
+    $('#accordion-2').on('change', function(){
         if($(this).is(':checked')){
             $('#search-bar').focus();
             //prevent all results to be shown
diff --git a/help3xsl/localized.xsl b/help3xsl/localized.xsl
index 124cfc9e7..584d4bec4 100644
--- a/help3xsl/localized.xsl
+++ b/help3xsl/localized.xsl
@@ -94,47 +94,6 @@ Stylesheet map language-dependent parameters and translation
 </xsl:choose>
 </xsl:template>
 
-<xsl:template name="getSearch">
-    <xsl:param name="lang"/>
-    <xsl:choose>
-        <xsl:when test="$lang='ast'"><xsl:text>Alcontrar</xsl:text></xsl:when>
-        <xsl:when test="$lang='be'"><xsl:text>Пошук</xsl:text></xsl:when>
-        <xsl:when test="$lang='bg'"><xsl:text>Търсене</xsl:text></xsl:when>
-        <xsl:when test="$lang='ca'"><xsl:text>Cerca</xsl:text></xsl:when>
-        <xsl:when test="$lang='ca-valencia'"><xsl:text>Cerca</xsl:text></xsl:when>
-        <xsl:when test="$lang='cs'"><xsl:text>Najít</xsl:text></xsl:when>
-        <xsl:when test="$lang='da'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='de'"><xsl:text>Suchen</xsl:text></xsl:when>
-        <xsl:when test="$lang='el'"><xsl:text>Εύρεση</xsl:text></xsl:when>
-        <xsl:when test="$lang='en-US'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='en-GB'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='en-ZA'"><xsl:text>Find</xsl:text></xsl:when>
-        <xsl:when test="$lang='eo'"><xsl:text>Serĉi</xsl:text></xsl:when>
-        <xsl:when test="$lang='es'"><xsl:text>Buscar</xsl:text></xsl:when>
-        <xsl:when test="$lang='fi'"><xsl:text>Etsi</xsl:text></xsl:when>
-        <xsl:when test="$lang='fr'"><xsl:text>Recherche</xsl:text></xsl:when>
-        <xsl:when test="$lang='gl'"><xsl:text>Buscar</xsl:text></xsl:when>
-        <xsl:when test="$lang='hr'"><xsl:text>Pronađi</xsl:text></xsl:when>
-        <xsl:when test="$lang='hu'"><xsl:text>Keresés</xsl:text></xsl:when>
-        <xsl:when test="$lang='is'"><xsl:text>Leita</xsl:text></xsl:when>
-        <xsl:when test="$lang='it'"><xsl:text>Cerca</xsl:text></xsl:when>
-        <xsl:when test="$lang='ja'"><xsl:text>検索</xsl:text></xsl:when>
-        <xsl:when test="$lang='lt'"><xsl:text>Paieška</xsl:text></xsl:when>
-        <xsl:when test="$lang='nb'"><xsl:text>Finn</xsl:text></xsl:when>
-        <xsl:when test="$lang='nl'"><xsl:text>Zoeken</xsl:text></xsl:when>
-        <xsl:when test="$lang='nn'"><xsl:text>Finn</xsl:text></xsl:when>
-        <xsl:when test="$lang='pt-BR'"><xsl:text>Pesquisar</xsl:text></xsl:when>
-        <xsl:when test="$lang='pt'"><xsl:text>Localizar</xsl:text></xsl:when>
-        <xsl:when test="$lang='ru'"><xsl:text>Искать</xsl:text></xsl:when>
-        <xsl:when test="$lang='sl'"><xsl:text>Najdi</xsl:text></xsl:when>
-        <xsl:when test="$lang='sq'"><xsl:text>Gjej</xsl:text></xsl:when>
-        <xsl:when test="$lang='tr'"><xsl:text>Bul</xsl:text></xsl:when>
-        <xsl:when test="$lang='zh-CN'"><xsl:text>搜索</xsl:text></xsl:when>
-        <xsl:when test="$lang='zh-TW'"><xsl:text>尋找</xsl:text></xsl:when>
-        <xsl:otherwise><xsl:text>Find</xsl:text></xsl:otherwise>
-</xsl:choose>
-</xsl:template>
-
 <xsl:template name="getLanguage">
     <xsl:param name="lang"/>
     <xsl:choose>
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 95a1269c0..446c5ed39 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -136,155 +136,226 @@
         <meta itemprop="headline" content="{$titleL10N}"/>
     </xsl:if>
     <header>
-        <a class="logo" href="https://helponline.libreoffice.org/">
-            <div class="symbol"></div>
-            <p>LibreOffice <xsl:value-of select="$productversion"/> Help</p>
-        </a>
-        <xsl:if test="$online">
+        <div class="headerfooter-center">
             <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>
-            <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">
-        <ul>
-            <li><a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</a></li>
-            <li><a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a></li>
-            <li><a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS"><div class="impress"></div>Impress</a></li>
-            <li><a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW"><div class="draw"></div>Draw</a></li>
-            <li><a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a></li>
-            <li><a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a></li>
-            <li><a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART"><div class="chart"></div>Chart</a></li>
-            <li><a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC"><div class="basic"></div>Basic</a></li>
-        </ul>
-    </nav>
-    <div class="accordion">
-        <div class="acc-panel">
-            <input id="accordion-1" name="accordion-menu" type="checkbox"/>
-            <label for="accordion-1"><xsl:call-template name="getContents"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
-            <div id="Contents" class="contents-treeview"></div>
+            <div class="logo-menu-container">
+                <a class="logo" href="https://helponline.libreoffice.org/">
+                    <div class="symbol"></div>
+                    <p>LibreOffice <xsl:value-of select="$productversion"/> Help</p>
+                </a>
+                <xsl:if test="$online">
+                    <label for="langs"><xsl:call-template name="getLanguage"><xsl:with-param name="lang" select="$lang"/></xsl:call-template> ▼</label>
+                </xsl:if>
+            </div>
+                <xsl:if test="$online">
+                <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>
         </div>
+    </header>
+    <div class="content-center">
         <xsl:if test="$online">
+        <nav class="mobile-lang">
+            <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>
+        <nav id="Modules" class="modules">
+            <ul>
+                <li><a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</a></li>
+                <li><a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a></li>
+                <li><a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS"><div class="impress"></div>Impress</a></li>
+                <li><a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW"><div class="draw"></div>Draw</a></li>
+                <li><a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a></li>
+                <li><a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a></li>
+                <li><a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART"><div class="chart"></div>Chart</a></li>
+                <li><a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC"><div class="basic"></div>Basic</a></li>
+            </ul>
+        </nav>
+        <div class="accordion">
+            <script type="text/javascript">
+                <![CDATA[
+                (function() {]]>
+                <xsl:call-template name="getToken"><xsl:with-param name="lang" select="$lang"/></xsl:call-template>
+                <![CDATA[
+                var gcse = document.createElement('script');
+                gcse.type = 'text/javascript';
+                gcse.async = true;
+                gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+                var s = document.getElementsByTagName('script')[0];
+                s.parentNode.insertBefore(gcse, s);
+                })();
+                ]]>
+            </script>
+            <xsl:text disable-output-escaping="yes"><gcse:search></gcse:search></xsl:text>
             <div class="acc-panel">
-                <input id="accordion-2" name="accordion-menu" type="checkbox"/>
-                <label for="accordion-2"><xsl:call-template name="getSearch"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
-                <div id="content-2">
-                    <script type="text/javascript">
-                        <![CDATA[
-                        (function() {]]>
-                        <xsl:call-template name="getToken"><xsl:with-param name="lang" select="$lang"/></xsl:call-template>
-                        <![CDATA[
-                        var gcse = document.createElement('script');
-                        gcse.type = 'text/javascript';
-                        gcse.async = true;
-                        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
-                        var s = document.getElementsByTagName('script')[0];
-                        s.parentNode.insertBefore(gcse, s);
-                        })();
-                        ]]>
-                    </script>
-                    <xsl:text disable-output-escaping="yes"><gcse:search></gcse:search></xsl:text>
-                </div>
+                <input id="accordion-1" name="accordion-menu" type="checkbox"/>
+                <label for="accordion-1"><xsl:call-template name="getContents"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
+                <div id="Contents" class="contents-treeview"></div>
             </div>
-        </xsl:if>
-        <div class="acc-panel">
-            <input id="accordion-3" name="accordion-menu" type="checkbox"/>
-            <label for="accordion-3"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
-            <div id="Index">
-                <div id="SearchBox">
-                    <p>  &#x1f50e;  <input id="search-bar" type="text"/></p>
-                </div>
-                <div id="Bookmarks">
-                    <p>WRITER</p><ul id="bookmarkWRITER"></ul>
-                    <p>CALC</p><ul id="bookmarkCALC"></ul>
-                    <p>IMPRESS</p><ul id="bookmarkIMPRESS"></ul>
-                    <p>DRAW</p><ul id="bookmarkDRAW" ></ul>
-                    <p>BASE</p><ul id="bookmarkBASE"></ul>
-                    <p>MATH</p><ul id="bookmarkMATH"></ul>
-                    <p>CHART</p><ul id="bookmarkCHART"></ul>
-                    <p>BASIC</p><ul id="bookmarkBASIC"></ul>
-                    <p>GLOBAL</p><ul id="bookmarkSHARED"></ul>
+            <div class="acc-panel">
+                <input id="accordion-2" name="accordion-menu" type="checkbox"/>
+                <label for="accordion-2"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
+                <div id="Index">
+                    <div id="SearchBox">
+                        <p>  &#x1f50e;  <input id="search-bar" type="text"/></p>
+                    </div>
+                    <div id="Bookmarks">
+                        <p>WRITER</p><ul id="bookmarkWRITER"></ul>
+                        <p>CALC</p><ul id="bookmarkCALC"></ul>
+                        <p>IMPRESS</p><ul id="bookmarkIMPRESS"></ul>
+                        <p>DRAW</p><ul id="bookmarkDRAW" ></ul>
+                        <p>BASE</p><ul id="bookmarkBASE"></ul>
+                        <p>MATH</p><ul id="bookmarkMATH"></ul>
+                        <p>CHART</p><ul id="bookmarkCHART"></ul>
+                        <p>BASIC</p><ul id="bookmarkBASIC"></ul>
+                        <p>GLOBAL</p><ul id="bookmarkSHARED"></ul>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div id="DisplayArea" itemprop="articleBody">
-        <xsl:apply-templates select="/helpdocument/body"/>
+        <div id="DisplayArea" itemprop="articleBody">
+            <xsl:apply-templates select="/helpdocument/body"/>
+        </div>
     </div>
     <footer>
-        <p><a href="http://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="http://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="http://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="http://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="http://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="http://wiki.documentfoundation.org/TradeMark_Policy" target="_b
 lank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
-        <div id="DEBUG" class="debug">
-            <h3 class="bug">Help content debug info:</h3>
-            <p>This page is: <a href="https://opengrok.libreoffice.org/xref/help/source{$filename}" target="_blank"><xsl:value-of select="$filename"/></a></p>
-            <p>Title is: <xsl:value-of select="$title"/></p>
-            <p id="bm_module"></p>
-            <p id="bm_system"></p>
+        <div class="headerfooter-center">
+            <p><a href="http://www.libreoffice.org/imprint" target="_blank">Impressum (Legal Info)</a> | <a href="http://www.libreoffice.org/privacy" target="_blank">Privacy Policy</a> | <a href="http://www.documentfoundation.org/statutes.pdf" target="_blank">Statutes (non-binding English translation)</a> - <a href="http://www.documentfoundation.org/satzung.pdf" target="_blank">Satzung (binding German version)</a> | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the <a href="http://www.libreoffice.org/download/license/" target="_blank">Mozilla Public License v2.0</a>. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our <a href="http://wiki.documentfoundation.org/TradeMark_Policy" target
 ="_blank">trademark policy</a>. LibreOffice was based on OpenOffice.org.</p>
+            <div id="DEBUG" class="debug">
+                <h3 class="bug">Help content debug info:</h3>
+                <p>This page is: <a href="https://opengrok.libreoffice.org/xref/help/source{$filename}" target="_blank"><xsl:value-of select="$filename"/></a></p>
+                <p>Title is: <xsl:value-of select="$title"/></p>
+                <p id="bm_module"></p>
+                <p id="bm_system"></p>
+            </div>
         </div>
     </footer>
     <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>


More information about the Libreoffice-commits mailing list