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

[Ilmari Lauhakangas]

 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 
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 
Tested-by: Olivier Hallot 

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: #EE;*/
@@ -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: #EE;
-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: 

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

[Ilmari Lauhakangas]

 help3xsl/default.css  |  135 ++--
 help3xsl/help.js  |   16 -
 help3xsl/localized.xsl|   41 
 help3xsl/online_transform.xsl |  349 +-
 4 files changed, 304 insertions(+), 237 deletions(-)

New commits:
commit 50b850013374e0f711b5cded92739934d758bf1f
Author: Ilmari Lauhakangas 
Date:   Thu Dec 28 16:05:43 2017 +0200

tdf#114709, tdf#112758, tdf#112757

Lots of changes and tweaks.
Header and footer now span 100% width even on desktop.
Font sizes were increased and content area made narrower.
We now have two separate language menus so the menu is
always visible on mobile.
Google search moved out of the accordion panel.
Accordion panel colours made darker.
On desktop, expanded accordion panels overlap content.

Change-Id: I976a67b1ca0cb2d21f0569da8d1fefd2b589d7d3
Reviewed-on: https://gerrit.libreoffice.org/47139
Reviewed-by: Olivier Hallot 
Tested-by: Olivier Hallot 

diff --git a/help3xsl/default.css b/help3xsl/default.css
index f4ee3273f..268b1ac4d 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -92,7 +92,7 @@ h6 {
 }
 p,
 td {
-font-size: 11pt;
+font-size: 14pt;
 margin: 2px 2px 2px 2px;
 }
 h1 {
@@ -102,15 +102,15 @@ h1 {
 padding-bottom: 6px;
 }
 h2 {
-font-size: 14pt;
+font-size: 18pt;
 }
 h3 {
-font-size: 12pt;
+font-size: 16pt;
 }
 h4,
 h5,
 h6 {
-font-size: 11pt;
+font-size: 14pt;
 }
 .avis {
 /*background-color: #EE;*/
@@ -191,6 +191,7 @@ h6 {
 overflow: auto;
 padding: 10px;
 grid-area: main;
+margin-bottom: 50px;
 }
 .mediabutton {
 background-color: cyan;
@@ -211,21 +212,20 @@ header {
 color: #fff;
 height: 4em;
 padding: .5em .5em .5em 1em;
-flex-wrap: wrap;
-justify-content: space-between;
 grid-area: header;
 }
+.logo-menu-container {
+display: flex;
+justify-content: space-between;
+}
 .logo {
-flex-shrink: 0;
 color: #fff;
 text-decoration: none;
-float: left;
-width: 190px;
+display: flex;
+align-items: flex-end;
 }
 .logo p {
 font-size: 1.5em;
-width: 130px;
-float: left;
 }
 .logo .symbol {
 background-image: url(media/navigation/libo-symbol-white.svg);
@@ -233,20 +233,19 @@ header {
 background-size: contain;
 width: 3em;
 height: 3.7em;
-float: left;
 margin-right: .5em;
 }
 header nav {
 margin-top: .7em;
 padding: 0;
 display: none;
-border: 1px solid;
+border: 1px solid #333;
 position: relative;
 }
 /* Create a style for the first level items */
 
-header nav a {
-color: #33;
+header nav a, .mobile-lang a {
+color: #333;
 background-color: #EE;
 display: block;
 line-height: 1.5em;
@@ -255,14 +254,14 @@ header nav a {
 font-weight: bold;
 border-width: 0 1px 0 0;
 border-style: solid;
-border-color: #33;
+border-color: #333;
 font-size: 1.5em;
 flex-shrink: 0;
 z-index: 100;
 white-space: nowrap;
 }
 
-header nav a:last-child {
+header nav a:last-child, .mobile-lang a:last-child {
 border-right-width: 0;
 }
 
@@ -272,21 +271,34 @@ header label {
 position: relative;
 top: 2em;
 float: right;
+display: none;
 }
 header input[type="checkbox"]:checked ~ nav {
 background: #f1f1f1;
-color: #444;
+color: #333;
 z-index: 100;
-/* line them up horizontally */
+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;
+z-index: 100;
+/* line them up horizontally */
 display: flex;
 flex-direction: row;
 /* allow for scrolling */
-
 overflow-x: auto;
 overflow-y: hidden;
 /* make it smooth on iOS */
-
 -webkit-overflow-scrolling: touch;
 clear: both;
 text-align: center;
@@ -298,6 +310,9 @@ footer {
 text-align: center;
 grid-area: footer;
 }
+footer .headerfooter-center {
+margin-top: 20px;
+}
 footer a {
 color: #c2f6ba;
 }
@@ -343,9 +358,17 @@ footer a {
 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] {
 position: absolute;
@@ -355,7 +378,7 @@ header input[type=checkbox],
 display: none;
 }
 .acc-panel > label {
-color: #666;
+color: #333;
 cursor: pointer;
 display: block;
 font-size: 1em;
@@ -364,32 +387,27 @@ header