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>

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 5fc4dba44f..3c35f90ab9 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">