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

[Ilmari Lauhakangas]

 help3xsl/default.css          |   55 +++++++++++++++++++++++++++++-------------
 help3xsl/online_transform.xsl |    4 ++-
 2 files changed, 41 insertions(+), 18 deletions(-)

New commits:
commit 581213f4b1f0589367529434af22c41ddc4c1a29
Author: Ilmari Lauhakangas <ilmari.lauhakangas at libreoffice.org>
Date:   Sat Jul 7 15:09:33 2018 +0300

    tdf#118430 Three column layout with 1440px width
    
    Contents will now stay collapsed until 1440px width, when
    it will move to the right side of the screen.
    Removed useless and harmful float:left from .index-label.
    
    Change-Id: I504e8c4be3a5e777dc7bafbd6a6105b163e4a5f3
    Reviewed-on: https://gerrit.libreoffice.org/57129
    Tested-by: Jenkins
    Reviewed-by: Olivier Hallot <olivier.hallot at libreoffice.org>

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 03eaf34ca..2104d01d4 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -457,7 +457,6 @@ aside input[type=checkbox]:checked ~ .contents-treeview {
     padding: 0 0 0 20px;
 }
 .index-label {
-    float: left;
     font-size: 22px;
     color: #148603;
     padding-left: 20px;
@@ -756,8 +755,13 @@ li.disabled a {
         background-color: #F4F7F7;
         border-right: 1px solid rgba(0,0,0,0.04);
         float: left;
-        width: 320px;
-        grid-area: sidebar;
+        width: 320px;        
+    }
+    .leftside {
+        grid-area: leftside;
+    }
+    .rightside {
+        grid-area: rightside;
     }
     .google-search {
         margin: 0;
@@ -777,28 +781,30 @@ li.disabled a {
         left: 80px;
         border: none;
     }
-    label[for=accordion-1] {
-        background-color: transparent;
-        text-decoration: none;
-    }
-     label[for=accordion-1]:hover {
-        background-color: transparent;
-    }
-     label[for=accordion-1]:after {
-        content: "";
-    }
     #DisplayArea {
         padding: 10px 50px;
         width: 800px;
     }
+    #search-bar {
+        max-width: 290px;
+    }
+}
+ at media screen and (min-width: 1440px) {
     #Contents {
         color: #333;
         z-index: 6;
         display: block;
         padding: 0 0 0 20px;
     }
-    #search-bar {
-        max-width: 290px;
+    label[for=accordion-1] {
+        background-color: transparent;
+        text-decoration: none;
+    }
+     label[for=accordion-1]:hover {
+        background-color: transparent;
+    }
+     label[for=accordion-1]:after {
+        content: "";
     }
 }
 @supports (grid-area: auto) {
@@ -806,9 +812,24 @@ li.disabled a {
         body {
             display: grid;
             grid-template-columns: 320px 1fr;
-            grid-template-rows: 1fr minmax(1em, auto);
+            grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr;
             grid-template-areas: "header header"
-                                 "sidebar main"
+                                 "rightside main"
+                                 "leftside main"
+        }
+    }
+    @media screen and (min-width: 1440px) {
+        body {
+            display: grid;
+            grid-template-columns: 320px 900px 1fr;
+            grid-template-rows: 1fr minmax(1em, auto);
+            grid-template-areas: "header header header"
+                                 "leftside main rightside"
+        }
+        .rightside {
+            width: auto;
+            border-right: none;
+            border-left: 1px solid rgba(0,0,0,0.04);
         }
     }
 }
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 8bfd5d31b..889982fda 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -200,10 +200,12 @@
             </div>
         </xsl:if>
     </div>
-    <aside>
+    <aside class="rightside">
         <input id="accordion-1" name="accordion-menu" type="checkbox"/>
         <label for="accordion-1"><xsl:value-of select="$ui_contents"/></label>
         <div id="Contents" class="contents-treeview"></div>
+    </aside>
+    <aside class="leftside">
         <div id="Index">
         <div class="index-label"><xsl:value-of select="$ui_index"/>  &#x1f50e;&#xfe0e; </div>
             <div id="Bookmarks">