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@libreoffice.org>
(cherry picked from commit 581213f4b1f0589367529434af22c41ddc4c1a29)
Reviewed-on: https://gerrit.libreoffice.org/57251
Reviewed-by: Ilmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>

2 files changed, 41 insertions, 18 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 03eaf34cab..2104d01d4a 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;
+    }
+}
+@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 8bfd5d31ba..889982fda3 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"/> &#32;&#x1f50e;&#xfe0e;&#32;</div>
             <div id="Bookmarks">