From 7f87a5f65fe80d0262a96b43ee14edae33a09948 Mon Sep 17 00:00:00 2001 From: Buovjaga Date: Sat, 22 Jul 2017 14:08:09 -0300 Subject: tdf#97745 Use system browser to display help pages Some improvements (WIP) * Use CSS grids * Better language selector * Better svg icons * reorder some scripts, clean code * favicon * fix index Change-Id: Idd55f41724cc3972c8b461ede5f1e975716c5290 Signed-off-by: Olivier Hallot Reviewed-on: https://gerrit.libreoffice.org/40316 Reviewed-by: Olivier Hallot Tested-by: Olivier Hallot --- help3xsl/default.css | 732 +++++++++++++++----------- help3xsl/online_transform.xsl | 299 +++++------ source/media/navigation/favicon.ico | Bin 0 -> 5430 bytes source/media/navigation/libo-base.svg | 1 + source/media/navigation/libo-basic.svg | 1 + source/media/navigation/libo-calc.svg | 1 + source/media/navigation/libo-chart.svg | 1 + source/media/navigation/libo-draw.svg | 1 + source/media/navigation/libo-impress.svg | 1 + source/media/navigation/libo-math.svg | 1 + source/media/navigation/libo-symbol-white.svg | 1 + source/media/navigation/libo-writer.svg | 1 + 12 files changed, 573 insertions(+), 467 deletions(-) create mode 100644 source/media/navigation/favicon.ico create mode 100644 source/media/navigation/libo-base.svg create mode 100644 source/media/navigation/libo-basic.svg create mode 100644 source/media/navigation/libo-calc.svg create mode 100644 source/media/navigation/libo-chart.svg create mode 100644 source/media/navigation/libo-draw.svg create mode 100644 source/media/navigation/libo-impress.svg create mode 100644 source/media/navigation/libo-math.svg create mode 100644 source/media/navigation/libo-symbol-white.svg create mode 100644 source/media/navigation/libo-writer.svg diff --git a/help3xsl/default.css b/help3xsl/default.css index d0ac1d303e..8ec98944f9 100644 --- a/help3xsl/default.css +++ b/help3xsl/default.css @@ -25,204 +25,12 @@ */ -/* Document Structure */ -html{ - background: #FFFFFF; -} -body { - padding: 0px; - background: #fff; - color: #333; - margin: 0 auto; - max-width: 900px; -} - -/* Document Header */ - -header { - background: #00a500; - padding: .5em 2em; - color: #fff; - line-height: 1; -} - -header h1{ - margin-bottom: 0; - color:white; -} - -header nav{ - float: right; -/* display:inline-block;*/ -} - -header nav select{ - font-size: .8em; -} - - -header nav div{ - font-size: .8em; -} - -header nav div a { - font-weight: 300; - padding: .3em .5em -} -header nav a{ - color: #fff; - display: inline-block; - padding: .3em .8em -} - -header nav a:hover, header nav a:focus{ - color: rgba(255,255,255,.6) -} - - -[role=main]{ - padding:1.5em 3em; -} - -/* Document Article */ - -article{ - padding: 1em 0; -} - -/* Document Footer */ - -footer{ - background: #00a500; - color: #fff; - padding: .1em 3em; - text-align: center; -} - -footer a{ - color:#c2f6ba; +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; } -/* tree view */ - -.contents-treeview ul, -.contents-treeview li -{ - padding: 0; +body { margin: 0; - list-style: none; -} - -.contents-treeview input -{ - position: absolute; - opacity: 0; -} - -.contents-treeview -{ - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} - -.contents-treeview a -{ - text-decoration: none; -} - -.contents-treeview a:hover -{ - text-decoration: underline; -} - -.contents-treeview input + label + ul -{ - margin: 0 0 0 22px; -} - -.contents-treeview input ~ ul -{ - display: none; -} - -.contents-treeview label, -.contents-treeview label::before -{ - cursor: pointer; -} - -.contents-treeview input:disabled + label -{ - cursor: default; - opacity: .6; -} - -.contents-treeview input:checked:not(:disabled) ~ ul -{ - display: block; -} - -.contents-treeview label, -.contents-treeview label::before -{ - background: url("media/icon-themes/res/folderop.png") no-repeat; -} - -.contents-treeview label, -.contents-treeview a, -.contents-treeview label::before -{ - display: inline-block; - height: 16px; - line-height: 16px; - vertical-align: middle; -} - -.contents-treeview label -{ - background-position: 18px 0; -} - -.contents-treeview label::before -{ - content: ""; - width: 16px; - margin: 0 22px 0 0; - vertical-align: middle; - background-position: 0 -32px; -} - -.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 - { - -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; - } - - @-webkit-keyframes webkit-adjacent-element-selector-bugfix - { - from - { - padding: 0; - } - to - { - padding: 0; - } - } -} - - -/* default from old LibreOffice help system */ -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; } pre, .code, .codeintable, .example, .exampleintable, .literal, .literalintable, .path, .pathintable { @@ -289,6 +97,7 @@ h4, h5, h6 { } .avis { +/* background-color: #EEEEEE;*/ } .relatedtopics { @@ -321,15 +130,15 @@ h4, h5, h6 { .bug { color: red; - border: 1px solid red; } .debug { border: 1px solid black; padding: 3px; display: show; - background-color:black; - text-align: left; + background-color:#222; + color:red; + text-align:left; } /* Basic code syntax highlight */ @@ -363,167 +172,486 @@ h4, h5, h6 { 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; } -a:hover, a:focus{ - color: #000; +.mediabutton { + background-color: cyan; } -a:active{ - position: relative; - top:1px; + +.embedded { +} + +header { + background-color: #18A303; + color: #fff; + height: 4em; + padding: .5em .5em .5em 1em; + flex-wrap: wrap; + justify-content: space-between; + grid-area: header; } -/* Document Tabs */ +.logo { + flex-shrink: 0; + color: #fff; + text-decoration: none; + float: left; +} -.js-on #tabs article -{ - display:none +.logo p { + font-size: 1.5em; } -#tabs, #tabs nav a.active{ -background: #f8f8f8; -color: #111; +.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; + width: 3em; + height: 3.7em; + float: left; + margin-right: .5em; } -#tabs nav -{ +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; + display: block; + line-height: 1.5em; + padding: 0.2em 0.4em; + text-decoration: none; + font-weight: bold; + border:1px solid; + border-color:#333333; + font-size: 1.5em; +} + +header ul li { + /* make sure the width is honored */ + flex-shrink: 0; + list-style-type: none; + z-index: 100; +} + + +header label { + cursor: pointer; + font-size: 1.2em; position: relative; - overflow: hidden; - display: table; - background: #bbb; + top: 2em; + float: right; } -#tabs nav a -{ - width:200px; - display:table-cell; - padding:1em; - text-align:center; - color: #333; +header input[type="checkbox"]:checked ~ ul { + 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; + text-align: center; } -#tabs nav a:hover,#tabs nav a:focus -{ - background:#eee +footer{ + background: #18A303; + color: #fff; + padding: .1em 3em; + text-align: center; + grid-area: footer; } -#tabs article -{ - padding:2em; +footer a{ + color:#c2f6ba; } -.js-on #tabs article.active -{ +.breadcrumbs ul { + list-style-type: none; + margin: 0; + padding: 0; + color: #333; +} + +.breadcrumbs li { + display: inline-block; + position: relative; + padding-right: 2em; + margin: 0; +} + +.breadcrumbs li:after { + content: '>'; + position: absolute; + display: inline-block; + right: 0; + width: 2em; + text-align: center; +} + +.breadcrumbs li:last-child { + font-weight: bold; +} + +.breadcrumbs li:last-child:after { + content: ''; +} + +.breadcrumbs a { + text-decoration: none; + display: inline-block; + color: #333; + white-space: nowrap; +} + +.breadcrumbs a:hover { + text-decoration: underline; +} + +.accordion { + margin: 0 auto; + width: 100%; + height: 100%; + list-style-type: none; + grid-area: accordion; +} + +.accordion > div { + display:none; +} + +.accordion input[type=checkbox], header 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 > label:nth-of-type(1) { + background: #E7FDE4; +} + +.accordion > label:nth-of-type(2) { + background: #F7FEE5; +} + +.accordion > label:nth-of-type(3) { + background: #E2FBF8; +} + +.accordion > label:hover { + color: #222; +} + +.accordion > label:nth-of-type(1):hover { + background: #D5FACF; +} + +.accordion > label:nth-of-type(2):hover { + background: #F0FDD2; +} + +.accordion > label:nth-of-type(3):hover { + background: #CAF4F0; +} + +.accordion input[type=checkbox]:checked + label + div { + background: #f1f1f1; + color: #444; + z-index: 6; display:block; } -#tabs #mobiles{ -display:none; -border-radius: 0; + +#Index div#SearchBox { + background-color: #c2f6ba; + line-height:2em; + border: 1px solid #18A303; + vertical-align: center; + text-align: center; + top:2px; + left:2px; +} +#Index ul li { + list-style-type: none; +} +#Index p { + font-size: 16pt; + font-weight: bold; } -#tabs #mobiles a, #tabs #mobiles a:first-child, #tabs #mobiles a:last-child{ -width:300px; -border-radius: 0; +#search-bar { + max-width: 300px; } -#DisplayArea { +.modules { + margin: 0; + padding: 1em; + overflow: hidden; + grid-area: modules; +} +.modules ul{ + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} +.modules ul li { + float: left; + list-style-type: none; } -#Index { - overflow: auto; +/* Create a style for the first level items */ +.modules > ul > li > a { + color: #000; + display: block; + line-height: 1.5em; + padding: 0.5em 0.5em; + text-decoration: none; + font-weight: bold; + font-size: 11pt; + float:left; } -#Index ul{ - list-style-type: none; +.modules div { + /*mask: url(libo-symbol-white.svg) no-repeat center; + mask-size: contain;*/ + background-repeat: no-repeat; + background-size: contain; + float: left; } -#SearchBox{ -background-color:#c2f6ba; -border-color:green; -border:solid 1px; +/* 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 { + width: 21.5px; + + height: 26px; + + position: relative; + top: -8px; + margin-right: 5px; } -#TopRight { +.calc { + /*background-color: #179e03;*/ + background-image: url(media/navigation/libo-calc.svg); } -#TopLeft { - left: 1px; - position: fixed; - top: 35px; +.writer { + /*background-color: #03669e;*/ + background-image: url(media/navigation/libo-writer.svg); } -#TopLang { - left: 1px; - position: fixed; - top: 1px; - right:30% +.impress { + /*background-color: #9e3c03;*/ + background-image: url(media/navigation/libo-impress.svg); } -.mediabutton { - background-color: cyan; +.draw { + /*background-color: #c49800;*/ + background-image: url(media/navigation/libo-draw.svg); } -.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; +.math { + /*background-color: #626262;*/ + background-image: url(media/navigation/libo-math.svg); } -.embedded { +.base { + /*background-color: #89039e;*/ + background-image: url(media/navigation/libo-base.svg); +} + +.chart { + background-image: url(media/navigation/libo-chart.svg); + width: 25.14px; + height: 25.4px; + position: relative; + top: -6.5px; + margin-right: 5px; +} + +.basic { + background-image: url(media/navigation/libo-basic.svg); + width: 25.4px; + height: 25.4px; + position: relative; + top: -8.7px; + margin-right: 5px; +} + +/* tree view */ + +.contents-treeview ul, +.contents-treeview li +{ + padding: 0; + margin: 0; + list-style: none; +} + +.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; */ + text-decoration: none; +} + +.contents-treeview a:hover +{ + text-decoration: underline; } -/* Media queries */ -@media screen and (min-width:900px) +.contents-treeview input + label + ul { - body{font-size: 1.1em;} + margin: 0 0 0 22px; } -@media screen and (max-width:600px) +.contents-treeview input ~ ul { - #tabs nav{ display: none; - position: relative; - } - #tabs #mobiles{ - display:block; - } - #tabs article { - display:block; - } } -@media screen and (max-width:480px) + +.contents-treeview label, +.contents-treeview label::before +{ + cursor: pointer; + background: url("media/icon-themes/res/folderop.png") no-repeat; + color: #111; +} + +.contents-treeview input:disabled + label +{ + cursor: default; + opacity: .6; +} + +.contents-treeview input:checked:not(:disabled) ~ ul +{ + display: block; +} + +.contents-treeview label, +.contents-treeview a, +.contents-treeview label::before +{ + height: 16px; + line-height: 16px; + vertical-align: middle; +} + +.contents-treeview label +{ + background-position: 18px 0; +} + +.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 +{ + background-position: 0 -16px; +} + +/* webkit adjacent element selector bugfix */ +@media screen and (-webkit-min-device-pixel-ratio:0) { - blockquote{ - float: none; + .contents-treeview + { + -webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s; + } + + @-webkit-keyframes webkit-adjacent-element-selector-bugfix + { + from + { + padding: 0; + } + to + { + padding: 0; + } } +} - header nav a{ - padding:.7em .8em +@media screen and (min-width:960px) { + body { + max-width: 960px; + margin: auto; } - header nav{ - float: none; - margin: -.5em -3em 0; - background: #000; - overflow: hidden; - text-align: left + header > ul > li > a { + font-size: 1em; } - header nav a{ - border-right: 1px solid #222 + /* force a break after the language button so menu will go below */ + header label { + page-break-after: always; + break-after: always; } - [role=main]{ - padding:1.5em 2em; + /* change the language menu direction to stacked */ + header input[type="checkbox"]:checked ~ ul { + flex-direction: column; + max-width: 7.5em; + float: right; + overflow-y: auto; + max-height: 30em; } - header nav div{ - display: none; +} + +@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"; } } +} diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl index 354195a848..eef2cb9826 100644 --- a/help3xsl/online_transform.xsl +++ b/help3xsl/online_transform.xsl @@ -129,27 +129,11 @@ - <xsl:value-of select="$titleL10N"/> + <xsl:value-of select="$titleL10N"/> + - - - @@ -158,125 +142,120 @@
-
+ + +
+ + +
+ + +
- -

LibreOffice
Help Online

- -
-
-
- + <gcse:search></gcse:search> +
+ + +
+ -
-
-
@@ -288,33 +267,13 @@
    -
    -
    -
    - - <gcse:search></gcse:search> -
    -
    -
    -
    -
    -
    +
    +
    +
    + +
    -

    Help content debug info:

    This page is:

    @@ -323,6 +282,8 @@

    + - - + diff --git a/source/media/navigation/favicon.ico b/source/media/navigation/favicon.ico new file mode 100644 index 0000000000..b890a56a8b Binary files /dev/null and b/source/media/navigation/favicon.ico differ diff --git a/source/media/navigation/libo-base.svg b/source/media/navigation/libo-base.svg new file mode 100644 index 0000000000..1a35912cd2 --- /dev/null +++ b/source/media/navigation/libo-base.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-basic.svg b/source/media/navigation/libo-basic.svg new file mode 100644 index 0000000000..d47c9681d9 --- /dev/null +++ b/source/media/navigation/libo-basic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-calc.svg b/source/media/navigation/libo-calc.svg new file mode 100644 index 0000000000..d7f82f649e --- /dev/null +++ b/source/media/navigation/libo-calc.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-chart.svg b/source/media/navigation/libo-chart.svg new file mode 100644 index 0000000000..7263bc4217 --- /dev/null +++ b/source/media/navigation/libo-chart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-draw.svg b/source/media/navigation/libo-draw.svg new file mode 100644 index 0000000000..904798cc78 --- /dev/null +++ b/source/media/navigation/libo-draw.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-impress.svg b/source/media/navigation/libo-impress.svg new file mode 100644 index 0000000000..19f24d6f45 --- /dev/null +++ b/source/media/navigation/libo-impress.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-math.svg b/source/media/navigation/libo-math.svg new file mode 100644 index 0000000000..0e8c02919f --- /dev/null +++ b/source/media/navigation/libo-math.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/media/navigation/libo-symbol-white.svg b/source/media/navigation/libo-symbol-white.svg new file mode 100644 index 0000000000..bdb8d1647f --- /dev/null +++ b/source/media/navigation/libo-symbol-white.svg @@ -0,0 +1 @@ + diff --git a/source/media/navigation/libo-writer.svg b/source/media/navigation/libo-writer.svg new file mode 100644 index 0000000000..61433193ab --- /dev/null +++ b/source/media/navigation/libo-writer.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.3