[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 Jan 5 16:21:49 UTC 2018


 help3xsl/default.css          |  396 ++++++++++++++++++------------------------
 help3xsl/help.js              |   16 -
 help3xsl/localized.xsl        |   10 +
 help3xsl/online_transform.xsl |  207 +++++++--------------
 4 files changed, 254 insertions(+), 375 deletions(-)

New commits:
commit 382ba1bc41a04d2f7b444e4c4ca9460b66147717
Author: Ilmari Lauhakangas <ilmari.lauhakangas at libreoffice.org>
Date:   Thu Jan 4 22:45:57 2018 +0200

    Switched to a sidebar layout. Art direction by Andreas Kainz
    
    Markup and JS got simpler, layout got more robust.
    
    Change-Id: Ia74489038e7d11b632ea2b6ca6efe0d90dfe5181
    Reviewed-on: https://gerrit.libreoffice.org/47441
    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 268b1ac4d..0236011dc 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -22,6 +22,11 @@
 +                           WESTERN LANGUAGES                       +
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
+We use px as the unit for navigation elements and fonts because we do
+not want them to scale with browser-set font size.
+We use rem as the unit for article and footer contents because they
+do not break anything related to layout by scaling.
+
 */
 
 body,
@@ -42,6 +47,9 @@ body {
     margin: 0;
     line-height: normal;
 }
+a {
+    color: #18A303;
+}
 pre,
 .code,
 .codeintable,
@@ -52,15 +60,14 @@ pre,
 .path,
 .pathintable {
     font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
-    margin-top: 1pt;
-    margin-bottom: 1pt;
+    margin: 0.08rem 0;
 }
 .acronym {
     font-weight: bold;
 }
 .related {
     font-weight: bold;
-    margin-top: 20pt;
+    margin-top: 1.67rem;
     border-top: 1px solid black;
 }
 .emph,
@@ -87,30 +94,30 @@ h3,
 h4,
 h5,
 h6 {
-    margin-bottom: 8pt;
+    margin-bottom: 0.67rem;
     color: #18A303;
 }
 p,
 td {
-    font-size: 14pt;
+    font-size: 1.17rem;
     margin: 2px 2px 2px 2px;
 }
 h1 {
-    font-size: 22pt;
+    font-size: 1.83rem;
     font-weight: 300;
     border-bottom: 3px solid #18A303;
     padding-bottom: 6px;
 }
 h2 {
-    font-size: 18pt;
+    font-size: 1.5rem;
 }
 h3 {
-    font-size: 16pt;
+    font-size: 1.33rem;
 }
 h4,
 h5,
 h6 {
-    font-size: 14pt;
+    font-size: 1.17rem;
 }
 .avis {
     /*    background-color: #EEEEEE;*/
@@ -178,11 +185,11 @@ h6 {
 }
 .infopage {
     color: green;
-    font-size: 16pt;
+    font-size: 1.33rem;
     font-weight: bold;
 }
 .topmenu {
-    font-size: 12pt;
+    font-size: 1rem;
     font-weight: bold;
     padding: 1px;
     border: solid 1px #18A303;
@@ -201,20 +208,22 @@ h6 {
     background-color: green;
     font-family: Arial;
     font-weight: bold;
-    font-size: 24pt;
+    font-size: 2rem;
     border: 1px solid black;
     padding-bottom: 6px;
     margin-bottom: 6px;
 }
 .embedded {}
+.header-extrawurst {
+    grid-area: header;
+}
 header {
     background-color: #18A303;
     color: #fff;
-    height: 4em;
-    padding: .5em .5em .5em 1em;
-    grid-area: header;
+    height: 64px;
+    padding: 8px 8px 8px 16px;
 }
-.logo-menu-container {
+.logo-container {
     display: flex;
     justify-content: space-between;
 }
@@ -222,75 +231,19 @@ header {
     color: #fff;
     text-decoration: none;
     display: flex;
-    align-items: flex-end;
 }
 .logo p {
-    font-size: 1.5em;
+    font-size: 24px;
 }
 .logo .symbol {
     background-image: url(media/navigation/libo-symbol-white.svg);
     background-repeat: no-repeat;
     background-size: contain;
-    width: 3em;
-    height: 3.7em;
-    margin-right: .5em;
-}
-header nav {
-    margin-top: .7em;
-    padding: 0;
-    display: none;
-    border: 1px solid #333;
-    position: relative;
-}
-/* Create a style for the first level items */
-
-header nav a, .mobile-lang a {
-    color: #333;
-    background-color: #EEEEEE;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.2em 0.4em;
-    text-decoration: none;
-    font-weight: bold;
-    border-width: 0 1px 0 0;
-    border-style: solid;
-    border-color: #333;
-    font-size: 1.5em;
-    flex-shrink: 0;
-    z-index: 100;
-    white-space: nowrap;
-}
-
-header nav a:last-child, .mobile-lang a:last-child {
-    border-right-width: 0;
+    width: 52px;
+    height: 60px;
+    margin-right: 10px;
 }
-
-header label {
-    cursor: pointer;
-    font-size: 1.2em;
-    position: relative;
-    top: 2em;
-    float: right;
-    display: none;
-}
-header input[type="checkbox"]:checked ~ nav {
-    background: #f1f1f1;
-    color: #333;
-    z-index: 100;
-    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;
+.lang nav, .modules nav {
     z-index: 100;
     /* line them up horizontally */
     display: flex;
@@ -300,21 +253,28 @@ header input[type="checkbox"]:checked ~ nav {
     overflow-y: hidden;
     /* make it smooth on iOS */
     -webkit-overflow-scrolling: touch;
-    clear: both;
     text-align: center;
 }
-footer {
-    background: #18A303;
+.lang nav a, .modules nav a {
     color: #fff;
-    padding: .1em 3em;
-    text-align: center;
-    grid-area: footer;
+    background-color: #31363A;
+    display: block;
+    line-height: 1.5;
+    padding: 3px 6px;
+    text-decoration: none;
+    font-size: 24px;
+    flex-shrink: 0;
+    z-index: 100;
+    white-space: nowrap;
 }
-footer .headerfooter-center {
-    margin-top: 20px;
+footer {
+    color: #333;
+    border-top: 1px solid #18A303;
+    padding: 20px 0 0 0;
+    margin: 20px 0 0 0;
 }
-footer a {
-    color: #c2f6ba;
+footer p {
+    font-size: 1rem;
 }
 .breadcrumbs ul {
     list-style-type: none;
@@ -325,7 +285,7 @@ footer a {
 .breadcrumbs li {
     display: inline-block;
     position: relative;
-    padding-right: 2em;
+    padding-right: 24px;
     margin: 0;
 }
 .breadcrumbs li:after {
@@ -333,7 +293,7 @@ footer a {
     position: absolute;
     display: inline-block;
     right: 0;
-    width: 2em;
+    width: 24px;
     text-align: center;
 }
 .breadcrumbs li:last-child {
@@ -351,120 +311,93 @@ footer a {
 .breadcrumbs a:hover {
     text-decoration: underline;
 }
-.accordion {
-    margin: 0 auto;
-    width: 100%;
-    height: 100%;
-    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] {
+.modules input[type=checkbox], .lang input[type=checkbox],
+.contents-treeview input[type=checkbox], aside input[type=checkbox] {
     position: absolute;
     opacity: 0;
 }
-.accordion input[type=checkbox] {
-    display: none;
-}
-.acc-panel > label {
-    color: #333;
+label[for=accordion-1] {
+    text-decoration: underline;
+    color: #18A303;
     cursor: pointer;
     display: block;
-    font-size: 1em;
-    height: 2.5em;
-    line-height: 2.5em;
-    padding: 0 1.5em;
-    text-align: center;
-}
-.acc-panel:nth-of-type(2) > label {
-    background: #F0FDD2;
-}
-.acc-panel:nth-of-type(3) > label {
-    background: #CAF4F0;
+    padding: 10px 0 10px 20px;
+    font-size: 29px;
+    line-height: .6;
 }
-.acc-panel > label:hover {
-    color: #222;
+label[for=accordion-1]:after {
+    font-size: 44px;
+    content:"⌄";
 }
-.acc-panel:nth-of-type(2) > label:hover {
-    background: #D4F489;
-}
-.acc-panel:nth-of-type(3) > label:hover {
-    background: #6ABFB6;
+aside input[type=checkbox] ~ .contents-treeview {
+    display: none;
 }
-.accordion input[type=checkbox]:checked + label + div {
-    background: #f1f1f1;
+aside input[type=checkbox]:checked ~ .contents-treeview {
     color: #333;
     z-index: 6;
     display: block;
-    padding: 15px 0;
+    padding: 0 0 0 20px;
 }
-#Index div#SearchBox {
-    background-color: #c2f6ba;
-    line-height: 2em;
-    border: 1px solid #18A303;
-    vertical-align: center;
-    text-align: center;
-    top: 2px;
-    left: 2px;
+.index-label {
+    float: left;
+    font-size: 29px;
+    color: #18A303;
+    margin-right: 10px;
+}
+#SearchBox {
+    padding-left: 20px;
+    margin: 20px 0 20px 0;
+}
+#SearchBox p {
+    font-size: 29px;
+}
+#Index {
+    margin-top: 10px;
 }
 #Index ul {
-    padding-left:15px;
+    padding-left: 15px;
 }
 #Index ul li {
     list-style-type: none;
-    font-size: 14pt;
+    font-size: 16px;
+    margin-bottom: 5px;
 }
-#Index p {
-    font-size: 16pt;
+#Bookmarks p {
+    font-size: 22px;
     font-weight: bold;
+    color: #18A303;
 }
 #search-bar {
-    max-width: 90%;
+    margin-top: 10px;
 }
-.modules {
-    margin: 0;
-    padding: 1em;
-    overflow: hidden;
-    grid-area: modules;
+#Bookmarks {
+    padding: 0 20px;
 }
-.modules ul {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
+.google-search {
+    max-width: 300px;
+    margin: 0 auto;
 }
-.modules ul li {
-    float: left;
-    list-style-type: none;
+.modules {
+    border-bottom: 2px solid #f3f3f3;
 }
-/* Create a style for the first level items */
-
-.modules > ul > li > a {
-    color: #000;
-    display: block;
-    line-height: 1.5em;
-    padding: 0.5em 0.5em;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 14pt;
-    float: left;
+.modules label:after, .lang label:after {
+    font-size: 30px;
+    color: #fff;
+    content:"⌄";
 }
-.modules div {
+.lang label, .modules label {
+    display: none;
+}
+.modules nav div {
     background-repeat: no-repeat;
     background-size: contain;
     float: left;
+    display: none;
 }
 .calc,
 .chart,
@@ -510,7 +443,7 @@ header input[type=checkbox],
     padding: 0;
     margin: 0;
     list-style: none;
-    font-size: 14pt;
+    font-size: 16px;
 }
 .contents-treeview {
     -moz-user-select: none;
@@ -530,9 +463,8 @@ header input[type=checkbox],
     display: none;
 }
 .contents-treeview label,
-.contents-treeview label::before {
+.contents-treeview label:before {
     cursor: pointer;
-    background: url("media/icon-themes/res/folderop.png") no-repeat;
     color: #111;
 }
 .contents-treeview input:disabled + label {
@@ -552,10 +484,11 @@ header input[type=checkbox],
 .contents-treeview label {
     background-position: 18px 0;
 }
-.contents-treeview label::before {
-    content: "";
+.contents-treeview label:before {
+    content: "🖿";
+    color: #18A303;
     width: 16px;
-    margin: 0 22px 0 0;
+    margin: 0 5px 0 0;
     background-position: 0 -32px;
     display: inline-block;
 }
@@ -578,63 +511,89 @@ header input[type=checkbox],
     }
 }
 @media screen and (min-width: 960px) {
-    .content-center {
-        max-width: 1024px;
-        margin: 0 auto;
-        grid-area: content-center;
-    }
-    .mobile-lang {
+    .lang nav {
         display: none;
     }
-    .headerfooter-center {
-        max-width: 1024px;
-        margin: 0 auto;
-    }
-    header nav a {
-        font-size: 1em;
+    .lang nav a {
+        font-size: 19px;
         white-space: normal;
-        border-width: 0 0 1px 0;
     }
-    header nav a:last-child {
-        border-bottom-width: 0;
-    }
-    header label {
+    .lang label, .modules label {
         cursor: pointer;
-        font-size: 1.2em;
+        color: #fff;
+        font-size: 19px;
         position: relative;
-        top: 2em;
-        float: right;
+        top: 40px;
         display: block;
     }
-    /* change the language menu direction to stacked */
+    /* change the menu direction to stacked */
 
-    header input[type="checkbox"]:checked ~ nav {
+    .lang input[type="checkbox"]:checked ~ nav, .modules input[type="checkbox"]:checked ~ nav {
         display: flex;
         flex-direction: column;
-        max-width: 7.5em;
-        float: right;
+        max-width: 120px;
         overflow-y: auto;
-        max-height: 30em;
+        overflow-x: hidden;
+        max-height: 480px;
+        position: absolute;
+        top: 80px;
     }
-    .accordion {
-        display: flex;
-        width: 960px;
-        max-height: 50px;
+    .modules input[type="checkbox"]:checked ~ nav {
+        background-color: #31363A;
+        text-align: left;
     }
-    .accordion > div {
-        flex-basis: 320px;
+    .modules nav {
+        display: none;
     }
-    .acc-panel:nth-of-type(2) > label, #Contents {
-        margin-left: .25em;
+    .modules nav div {
+        display: block;
+    }
+    .modules nav a {
+        font-size: 19px;
+    }
+    aside {
+        border-right: 5px solid #19A303;
+        float: left;
+        width: 320px;
+        grid-area: sidebar;
+    }
+    .google-search {
+        margin: 0;
+        position: absolute;
+        top: 19px;
+        left: 860px;
+    }
+    .lang {
+        position: absolute;
+        top: 0;
+        left: 200px;
+    }
+    .modules {
+        width: 120px;
+        position: absolute;
+        top: 0;
+        left: 80px;
+        border: none;
+    }
+    label[for=accordion-1] {
+        background-color: transparent;
+        text-decoration: none;
     }
-    .acc-panel > label {
-        margin-right: .25em;
+     label[for=accordion-1]:hover {
+        background-color: transparent;
     }
-    .accordion input[type=checkbox]:checked + label + div {
-        max-width: 316px;
+     label[for=accordion-1]:after {
+        content: "";
     }
     #DisplayArea {
-        padding: 10px 150px;
+        padding: 10px 50px;
+        width: 800px;
+    }
+    #Contents {
+        color: #333;
+        z-index: 6;
+        display: block;
+        padding: 0 0 0 20px;
     }
     #search-bar {
         max-width: 290px;
@@ -647,16 +606,7 @@ header input[type=checkbox],
             grid-template-columns: 320px 1fr;
             grid-template-rows: 1fr minmax(1em, auto);
             grid-template-areas: "header header"
-                                 "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"
+                                 "sidebar main"
         }
     }
 }
diff --git a/help3xsl/help.js b/help3xsl/help.js
index 04b02e526..13861024f 100644
--- a/help3xsl/help.js
+++ b/help3xsl/help.js
@@ -7,7 +7,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-// Used to set Application in caseinline=APP
+// Used to set Apllication in caseinlie=APP
 function setModule(module){
     if (module == null){module="WRITER"}
     var itemspan = document.getElementsByTagName("span");
@@ -120,17 +120,7 @@ $(document).ready(function() {
         }, 200);
     });
 
-    //maintain only one panel open
-    $('input[name="accordion-menu"]').on('change', function(){
-        $('input[name="accordion-menu"]').not(this).prop('checked', false);
-    });
-    //focus index search input clicking on Index panel
-    $('#accordion-2').on('change', function(){
-        if($(this).is(':checked')){
-            $('#search-bar').focus();
-            //prevent all results to be shown
-            $("#Bookmarks").toggle($('#search-bar').val().length > 2);
-        }
-    });
+    //prevent all results to be shown
+    $("#Bookmarks").toggle($('#search-bar').val().length > 2);
 });
 /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */
diff --git a/help3xsl/localized.xsl b/help3xsl/localized.xsl
index 584d4bec4..094da0617 100644
--- a/help3xsl/localized.xsl
+++ b/help3xsl/localized.xsl
@@ -94,6 +94,16 @@ Stylesheet map language-dependent parameters and translation
 </xsl:choose>
 </xsl:template>
 
+<xsl:template name="getModules">
+    <xsl:param name="lang"/>
+    <xsl:choose>
+        <xsl:when test="$lang='en-US'"><xsl:text>Module</xsl:text></xsl:when>
+        <xsl:when test="$lang='en-GB'"><xsl:text>Module</xsl:text></xsl:when>
+        <xsl:when test="$lang='en-ZA'"><xsl:text>Module</xsl:text></xsl:when>
+        <xsl:otherwise><xsl:text>Module</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 446c5ed39..ab787411c 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -135,19 +135,33 @@
         <meta itemprop="datePublished" content="2017"/>
         <meta itemprop="headline" content="{$titleL10N}"/>
     </xsl:if>
-    <header>
-        <div class="headerfooter-center">
-            <input id="langs" name="language-menu" type="checkbox"/>
-            <div class="logo-menu-container">
+    <div class="header-extrawurst">
+        <header>
+            <div class="logo-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">
+        </header>
+        <div class="modules">
+            <input id="modules" name="modules" type="checkbox"/>
+            <label for="modules"><xsl:call-template name="getModules"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></label>
+            <nav>
+                <a href="{$productversion}/{$lang}/text/swriter/main0000.html?DbPAR=WRITER"><div class="writer"></div>Writer</a>
+                <a href="{$productversion}/{$lang}/text/scalc/main0000.html?DbPAR=CALC"><div class="calc"></div>Calc</a>
+                <a href="{$productversion}/{$lang}/text/simpress/main0000.html?DbPAR=IMPRESS"><div class="impress"></div>Impress</a>
+                <a href="{$productversion}/{$lang}/text/sdraw/main0000.html?DbPAR=DRAW"><div class="draw"></div>Draw</a>
+                <a href="{$productversion}/{$lang}/text/shared/explorer/database/main.html?DbPAR=BASE"><div class="base"></div>Base</a>
+                <a href="{$productversion}/{$lang}/text/smath/main0000.html?DbPAR=MATH"><div class="math"></div>Math</a>
+                <a href="{$productversion}/{$lang}/text/schart/main0000.html?DbPAR=CHART"><div class="chart"></div>Chart</a>
+                <a href="{$productversion}/{$lang}/text/sbasic/shared/main0601.html?DbPAR=BASIC"><div class="basic"></div>Basic</a>
+            </nav>
+        </div>
+        <xsl:if test="$online">
+            <div class="lang">
+                <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>
@@ -215,139 +229,54 @@
                     <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>
+            </div>
         </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-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>
+    <aside>
+        <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 id="Index">
+            <div id="SearchBox">
+                <div class="index-label"><xsl:call-template name="getIndex"><xsl:with-param name="lang" select="$lang"/></xsl:call-template></div>
+                <p>  &#x1f50e;  </p>
+                <input id="search-bar" type="text"/>
             </div>
-            <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 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 id="DisplayArea" itemprop="articleBody">
-            <xsl:apply-templates select="/helpdocument/body"/>
-        </div>
-    </div>
-    <footer>
-        <div class="headerfooter-center">
+    </aside>
+    <div id="DisplayArea" itemprop="articleBody">
+        <xsl:apply-templates select="/helpdocument/body"/>
+        <footer>
+            <xsl:if test="$online">
+                <div class="google-search">
+                    <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>
+            </xsl:if>
             <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>
@@ -356,8 +285,8 @@
                 <p id="bm_module"></p>
                 <p id="bm_system"></p>
             </div>
-        </div>
-    </footer>
+        </footer>
+    </div>
     <script type="text/javascript" src="{$productversion}/{$lang}/bookmarks.js"/>
     <script type="text/javascript" src="{$productversion}/{$lang}/contents.js"/>
     <xsl:choose>


More information about the Libreoffice-commits mailing list