tdf#97745 Enhance help page layout

* Horizontal (stackable) navigation
* Work in progress

Change-Id: I16a9816b2465e995dd63e36fda0f0d89ea6053e4
Signed-off-by: Olivier Hallot <olivier.hallot@libreoffice.org>
Reviewed-on: https://gerrit.libreoffice.org/40421
Reviewed-by: Olivier Hallot <olivier.hallot@edx.srv.br>
Tested-by: Olivier Hallot <olivier.hallot@edx.srv.br>

1 files changed, 256 insertions, 308 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 8ec98944f9..19d4ff53d5 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -15,7 +15,6 @@
  *   except in compliance with the License. You may obtain a copy of
  *   the License at http://www.apache.org/licenses/LICENSE-2.0 .
  */
-
 /*
 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 +                     LIBREOFFICE HELP IN BROWSER                   +
@@ -25,168 +24,182 @@
 
 */
 
-body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable {
-  font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
+body,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.listitem,
+.listitemintable,
+.tablecontent,
+.tablecontentintable {
+    font-family: "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Sans Unicode", "Helvetica Neue", Helvetica, Tahoma, sans-serif;
 }
-
 body {
     margin: 0;
 }
-
-pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable, .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;
+pre,
+.code,
+.codeintable,
+.example,
+.exampleintable,
+.literal,
+.literalintable,
+.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;
 }
-
 .acronym {
-  font-weight: bold;
+    font-weight: bold;
 }
-
 .related {
-  font-weight: bold;
-  margin-top: 20pt;
-  border-top: 1px solid black;
+    font-weight: bold;
+    margin-top: 20pt;
+    border-top: 1px solid black;
 }
-
-.emph, .menuitem, .keycode {
-  font-weight: bold;
+.emph,
+.menuitem,
+.keycode {
+    font-weight: bold;
 }
-
-.tablehead, .tableheadintable {
-  font-weight: bold;
-  margin-top: 0px;
-  background: #CCF4C6;
-  text-align: center;
+.tablehead,
+.tableheadintable {
+    font-weight: bold;
+    margin-top: 0px;
+    background: #CCF4C6;
+    text-align: center;
 }
-
 .howtogetheader {
-  font-weight: bold;
-  border: 1px solid #999999;
-  background: #FFFFFF;
-  padding: 3px;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-bottom: 5pt;
-  color: #18A303;
-}
-
-p, td {
-  font-size: 11pt;
-  margin: 2px 2px 2px 2px;
+    font-weight: bold;
+    border: 1px solid #999999;
+    background: #FFFFFF;
+    padding: 3px;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-bottom: 5pt;
+    color: #18A303;
+}
+p,
+td {
+    font-size: 11pt;
+    margin: 2px 2px 2px 2px;
 }
-
 h1 {
-  font-size: 18pt;
-  border-bottom: 5px solid #18A303;
-  padding-bottom: 6px;
-  margin-bottom: 6px;
+    font-size: 18pt;
+    border-bottom: 5px solid #18A303;
+    padding-bottom: 6px;
+    margin-bottom: 6px;
 }
-
 h2 {
-  font-size: 14pt;
+    font-size: 14pt;
 }
-
 h3 {
-  font-size: 12pt;
+    font-size: 12pt;
 }
-
-h4, h5, h6 {
-  font-size: 11pt;
+h4,
+h5,
+h6 {
+    font-size: 11pt;
 }
-
 .avis {
-/*    background-color: #EEEEEE;*/
+    /*    background-color: #EEEEEE;*/
 }
-
 .relatedtopics {
-  font-weight: normal;
+    font-weight: normal;
 }
-
 .relatedbody {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  margin-left: 5px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    margin-left: 5px;
 }
-
 .howtoget {
-  background: #CCF4C6;
+    background: #CCF4C6;
 }
-
 .howtogetbody {
-  background: #CCF4C6;
-  margin: 0px;
+    background: #CCF4C6;
+    margin: 0px;
 }
-
 .wide {
-  width: 100%;
+    width: 100%;
 }
-
 .topalign {
-  vertical-align: top;
-  border: 1px;
+    vertical-align: top;
+    border: 1px;
 }
-
 .bug {
-  color: red;
+    color: red;
 }
-
 .debug {
-  border: 1px solid black;
-  padding: 3px;
-  display: show;
-  background-color:#222;
-  color:red;
-  text-align:left;
+    border: 1px solid black;
+    padding: 3px;
+    display: show;
+    background-color: #222;
+    color: red;
+    text-align: left;
 }
-
 /* Basic code syntax highlight */
-.identifier, .unknown {
-  color: green;
-}
 
+.identifier,
+.unknown {
+    color: green;
+}
 .keyword {
-  color: blue;
+    color: blue;
 }
-
 .comment {
-  color: gray;
+    color: gray;
 }
-
-.number, .string {
-  color: red;
+.number,
+.string {
+    color: red;
 }
-
-.operator, .parameter {
-  color: black;
+.operator,
+.parameter {
+    color: black;
 }
-
 .hotlink {
-  color: blue;
+    color: blue;
 }
-
 .infopage {
-  color: green;
-  font-size: 16pt;
-  font-weight: bold;
+    color: green;
+    font-size: 16pt;
+    font-weight: bold;
+}
+.topmenu {
+    font-size: 12pt;
+    font-weight: bold;
+    padding: 1px;
+    border: solid 1px #18A303;
 }
-
-
 #DisplayArea {
-  overflow: auto;
-/*   border: solid 1px; */
-  padding: 10px;
-  grid-area: main;
+    overflow: auto;
+    padding: 10px;
+    grid-area: main;
 }
-
 .mediabutton {
-  background-color: cyan;
+    background-color: cyan;
 }
-
-.embedded {
+.tintro {
+    color: white;
+    background-color: green;
+    font-family: Arial;
+    font-weight: bold;
+    font-size: 24pt;
+    border: 1px solid black;
+    padding-bottom: 6px;
+    margin-bottom: 6px;
 }
-
+.embedded {}
 header {
     background-color: #18A303;
     color: #fff;
@@ -196,22 +209,19 @@ header {
     justify-content: space-between;
     grid-area: header;
 }
-
 .logo {
     flex-shrink: 0;
     color: #fff;
     text-decoration: none;
     float: left;
+    width: 190px;
 }
-
 .logo p {
     font-size: 1.5em;
+    width: 130px;
+    float: left;
 }
-
 .logo .symbol {
-    /*mask: url(libo-symbol.svg) no-repeat center;
-    mask-size: contain;
-    background-color: #fff;*/
     background-image: url(media/navigation/libo-symbol-white.svg);
     background-repeat: no-repeat;
     background-size: contain;
@@ -220,35 +230,32 @@ header {
     float: left;
     margin-right: .5em;
 }
-
 header ul {
     margin-top: .7em;
     padding: 0;
     display: none;
 }
-
 /* Create a style for the first level items */
+
 header > ul > li > a {
     color: #333333;
-    background-color:#EEEEEE;
+    background-color: #EEEEEE;
     display: block;
     line-height: 1.5em;
     padding: 0.2em 0.4em;
     text-decoration: none;
     font-weight: bold;
-    border:1px solid;
-    border-color:#333333;
+    border: 1px solid;
+    border-color: #333333;
     font-size: 1.5em;
 }
-
 header ul li {
-  /* make sure the width is honored */
+    /* make sure the width is honored */
+    
     flex-shrink: 0;
     list-style-type: none;
     z-index: 100;
 }
-
-
 header label {
     cursor: pointer;
     font-size: 1.2em;
@@ -256,48 +263,45 @@ header label {
     top: 2em;
     float: right;
 }
-
 header input[type="checkbox"]:checked ~ ul {
-	background: #f1f1f1;
-	color: #444;
-	z-index: 100;
+    background: #f1f1f1;
+    color: #444;
+    z-index: 100;
     /* line them up horizontally */
+    
     display: flex;
     flex-direction: row;
     /* allow for scrolling */
+    
     overflow-x: auto;
     /* make it smooth on iOS */
+    
     -webkit-overflow-scrolling: touch;
-    clear: both;    
+    clear: both;
     text-align: center;
 }
-
-footer{
+footer {
     background: #18A303;
     color: #fff;
     padding: .1em 3em;
     text-align: center;
     grid-area: footer;
 }
-
-footer a{
-    color:#c2f6ba;
+footer a {
+    color: #c2f6ba;
 }
-
 .breadcrumbs ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  color: #333;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    color: #333;
 }
-
 .breadcrumbs li {
-  display: inline-block;
-  position: relative;
-  padding-right: 2em;
-  margin: 0;
+    display: inline-block;
+    position: relative;
+    padding-right: 2em;
+    margin: 0;
 }
-
 .breadcrumbs li:after {
     content: '>';
     position: absolute;
@@ -306,26 +310,21 @@ footer a{
     width: 2em;
     text-align: center;
 }
-
 .breadcrumbs li:last-child {
-  font-weight: bold;
+    font-weight: bold;
 }
-
 .breadcrumbs li:last-child:after {
     content: '';
 }
-
 .breadcrumbs a {
-  text-decoration: none;
-  display: inline-block;
-  color: #333;
-  white-space: nowrap;
+    text-decoration: none;
+    display: inline-block;
+    color: #333;
+    white-space: nowrap;
 }
-
 .breadcrumbs a:hover {
     text-decoration: underline;
 }
-
 .accordion {
     margin: 0 auto;
     width: 100%;
@@ -333,90 +332,80 @@ footer a{
     list-style-type: none;
     grid-area: accordion;
 }
-
-.accordion > div {
-    display:none;
+.acc-panel > div {
+    display: none;
 }
-
-.accordion input[type=checkbox], header input[type=checkbox] {
-	position: absolute;
-	opacity: 0;
+header input[type=checkbox],
+.contents-treeview input[type=checkbox] {
+    position: absolute;
+    opacity: 0;
 }
-
-.accordion > label {
-	color: #666;
-	cursor: pointer;
-	display: block;
-	font-size: 1em;
-	height: 2.5em;
-	line-height: 2.5em;
-	margin-right: .25em;
-	padding: 0 1.5em;
-	text-align: center;
+.accordion input[type=checkbox] {
+    display: none;
 }
-
-.accordion > label:nth-of-type(1) {
+.acc-panel > label {
+    color: #666;
+    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(1) > label {
     background: #E7FDE4;
 }
-
-.accordion > label:nth-of-type(2) {
+.acc-panel:nth-of-type(2) > label {
     background: #F7FEE5;
 }
-
-.accordion > label:nth-of-type(3) {
+.acc-panel:nth-of-type(3) > label {
     background: #E2FBF8;
 }
-
-.accordion > label:hover {
-	color: #222;
+.acc-panel > label:hover {
+    color: #222;
 }
-
-.accordion > label:nth-of-type(1):hover {
-	background: #D5FACF;
+.acc-panel:nth-of-type(1) > label:hover {
+    background: #D5FACF;
 }
-
-.accordion > label:nth-of-type(2):hover {
-	background: #F0FDD2;
+.acc-panel:nth-of-type(2) > label:hover {
+    background: #F0FDD2;
 }
-
-.accordion > label:nth-of-type(3):hover {
-	background: #CAF4F0;
+.acc-panel:nth-of-type(3) > label:hover {
+    background: #CAF4F0;
 }
-
 .accordion input[type=checkbox]:checked + label + div {
-	background: #f1f1f1;
-	color: #444;
-	z-index: 6;
-    display:block;
+    background: #f1f1f1;
+    color: #444;
+    z-index: 6;
+    display: block;
 }
-
 #Index div#SearchBox {
-	background-color: #c2f6ba;
-	line-height:2em;
-	border: 1px solid #18A303;
+    background-color: #c2f6ba;
+    line-height: 2em;
+    border: 1px solid #18A303;
     vertical-align: center;
     text-align: center;
-    top:2px;
-    left:2px;
+    top: 2px;
+    left: 2px;
 }
 #Index ul li {
     list-style-type: none;
 }
 #Index p {
-	font-size: 16pt;
-	font-weight: bold;
+    font-size: 16pt;
+    font-weight: bold;
 }
 #search-bar {
-    max-width: 300px;
+    max-width: 90%;
 }
-
 .modules {
     margin: 0;
     padding: 1em;
     overflow: hidden;
     grid-area: modules;
 }
-.modules ul{
+.modules ul {
     margin: 0;
     padding: 0;
     display: flex;
@@ -427,8 +416,8 @@ footer a{
     float: left;
     list-style-type: none;
 }
-
 /* Create a style for the first level items */
+
 .modules > ul > li > a {
     color: #000;
     display: block;
@@ -437,61 +426,43 @@ footer a{
     text-decoration: none;
     font-weight: bold;
     font-size: 11pt;
-    float:left;
+    float: left;
 }
-
 .modules div {
-    /*mask: url(libo-symbol-white.svg) no-repeat center;
-    mask-size: contain;*/    
     background-repeat: no-repeat;
     background-size: contain;
     float: left;
 }
-
-/* We have to use SVG sprites for now, but CSS mask would be
-   the superior solution (commented out). It can be used,
-   when browser support improves and bugs are fixed. */
-
-.calc, .writer, .impress, .draw, .math, .base {
+.calc,
+.writer,
+.impress,
+.draw,
+.math,
+.base {
     width: 21.5px;
-
     height: 26px;
-
     position: relative;
     top: -8px;
     margin-right: 5px;
 }
-
 .calc {
-    /*background-color: #179e03;*/
     background-image: url(media/navigation/libo-calc.svg);
 }
-
 .writer {
-    /*background-color: #03669e;*/
     background-image: url(media/navigation/libo-writer.svg);
 }
-
 .impress {
-    /*background-color: #9e3c03;*/
     background-image: url(media/navigation/libo-impress.svg);
 }
-
 .draw {
-    /*background-color: #c49800;*/
     background-image: url(media/navigation/libo-draw.svg);
 }
-
 .math {
-    /*background-color: #626262;*/
     background-image: url(media/navigation/libo-math.svg);
 }
-
 .base {
-    /*background-color: #89039e;*/
     background-image: url(media/navigation/libo-base.svg);
 }
-
 .chart {
     background-image: url(media/navigation/libo-chart.svg);
     width: 25.14px;
@@ -500,7 +471,6 @@ footer a{
     top: -6.5px;
     margin-right: 5px;
 }
-
 .basic {
     background-image: url(media/navigation/libo-basic.svg);
     width: 25.4px;
@@ -509,128 +479,93 @@ footer a{
     top: -8.7px;
     margin-right: 5px;
 }
-
 /* tree view */
 
 .contents-treeview ul,
-.contents-treeview li
-{
+.contents-treeview li {
     padding: 0;
     margin: 0;
     list-style: none;
 }
-
-.contents-treeview
-{
-/*    font: normal 11px "Segoe UI", Arial, Sans-serif;*/
+.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; */
+.contents-treeview a {
+    /*     color: #00f; */
+    
     text-decoration: none;
 }
-
-.contents-treeview a:hover
-{
+.contents-treeview a:hover {
     text-decoration: underline;
 }
-
-.contents-treeview input + label + ul
-{
+.contents-treeview input + label + ul {
     margin: 0 0 0 22px;
 }
-
-.contents-treeview input ~ ul
-{
+.contents-treeview input ~ ul {
     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
-{
+.contents-treeview input:disabled + label {
     cursor: default;
     opacity: .6;
 }
-
-.contents-treeview input:checked:not(:disabled) ~ ul
-{
+.contents-treeview input:checked:not(:disabled) ~ ul {
     display: block;
 }
-
 .contents-treeview label,
 .contents-treeview a,
-.contents-treeview label::before
-{
+.contents-treeview label::before {
     height: 16px;
     line-height: 16px;
     vertical-align: middle;
 }
-
-.contents-treeview label
-{
+.contents-treeview label {
     background-position: 18px 0;
 }
-
-.contents-treeview label::before
-{
+.contents-treeview label::before {
     content: "";
     width: 16px;
     margin: 0 22px 0 0;
     background-position: 0 -32px;
     display: inline-block;
 }
-
-.contents-treeview input:checked + label::before
-{
+.contents-treeview input:checked + label::before {
     background-position: 0 -16px;
 }
-
 /* webkit adjacent element selector bugfix */
-@media screen and (-webkit-min-device-pixel-ratio:0)
-{
-    .contents-treeview
-    {
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+    .contents-treeview {
         -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
     }
-
-    @-webkit-keyframes webkit-adjacent-element-selector-bugfix
-    {
-        from
-        {
+    @-webkit-keyframes webkit-adjacent-element-selector-bugfix {
+        from {
             padding: 0;
         }
-        to
-        {
+        to {
             padding: 0;
         }
     }
 }
-
-@media screen and (min-width:960px) {
+@media screen and (min-width: 960px) {
     body {
-        max-width: 960px;
+        max-width: 1280px;
         margin: auto;
     }
     header > ul > li > a {
         font-size: 1em;
     }
-    /* force a break after the language button so menu will go below */
-    header label {
-        page-break-after: always;
-        break-after: always;
-    }
     /* change the language menu direction to stacked */
+    
     header input[type="checkbox"]:checked ~ ul {
         flex-direction: column;
         max-width: 7.5em;
@@ -638,20 +573,33 @@ footer a{
         overflow-y: auto;
         max-height: 30em;
     }
+    .accordion {
+        display: flex;
+    }
+    .acc-panel {
+        flex-basis: 320px;
+    }
+    .acc-panel > label {
+        margin-right: .25em;
+    }
+    .accordion input[type=checkbox]:checked + label + div {
+        max-width: 316px;
+    }
+    #search-bar {
+        max-width: 290px;
+    }
 }
-
 @supports (grid-area: auto) {
-    @media screen and (min-width:960px) {
-    body {
-        max-width: 1280px;
-        margin: auto;
-        display: grid;
-        grid-template-columns: 320px 1fr;
-        grid-template-rows: 1fr minmax(1em, auto);
-        grid-template-areas: "header header"
-                             "accordion modules"
-                             "accordion main"
-                             "footer footer";
+    @media screen and (min-width: 960px) {
+        body {
+            display: grid;
+            grid-template-columns: 320px 1fr;
+            grid-template-rows: 1fr minmax(1em, auto);
+            grid-template-areas: "header header"
+                                 "modules modules"
+                                 "accordion accordion"
+                                 "main main"
+                                 "footer footer";
+        }
     }
-}
-}
+}
\ No newline at end of file