From 6543664118f1ddaa7ec4ecfec7a42889fa8f76a9 Mon Sep 17 00:00:00 2001 From: Olivier Hallot Date: Thu, 21 Mar 2019 10:38:34 -0300 Subject: Backport of Help online donnation button Change-Id: I600ca4327385d36d00fe042bbdb36b906d199f75 Reviewed-on: https://gerrit.libreoffice.org/69511 Tested-by: Jenkins Reviewed-by: Adolfo Jayme Barrientos --- help3xsl/default.css | 281 ++++++++++++++----------- help3xsl/help2.js | 56 ++++- help3xsl/online_transform.xsl | 468 +++++++++++++++++++++--------------------- 3 files changed, 451 insertions(+), 354 deletions(-) diff --git a/help3xsl/default.css b/help3xsl/default.css index e6a59ad8b8..391403e724 100644 --- a/help3xsl/default.css +++ b/help3xsl/default.css @@ -39,14 +39,15 @@ h5, h6, .listitem, .listitemintable, -.tablecontent, -.input { +.tablecontent { font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom; } .input { + background-color: rgba(0,0,0,0.04); transition-property: background-color; transition-duration: 150ms; border-bottom: 1px dashed rgba(0,0,0,0.1); + font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace; } [data-tooltip]{ position:relative; @@ -85,7 +86,7 @@ h6, pointer-events: auto; } body { - background-color: #F4F7F7; + background-color: #F7F8F7; margin: 0; line-height: normal; } @@ -94,11 +95,11 @@ body { } a { text-decoration: none; - color: #0369AE; + color: #0379BC; } a:hover { text-decoration: underline; - color: #1C99E0; + color: #0499EE; } pre, .code, @@ -115,6 +116,11 @@ pre, padding: 1px 3px; font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace; } +.smathcode { + border-radius: 2px; + padding: 1px 3px; + font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace; +} .acronym { font-weight: bold; } @@ -124,10 +130,23 @@ pre, border-top: 1px solid black; } .emph, -.menuitem, -.keycode { +.menuitem { font-weight: bold; } +.keycode { + /*font-weight: bold;*/ + font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace; +} +.widget{ + padding: 1px 10px; + background: #f0f0f0; + background: linear-gradient(to bottom,#f0f0f0,#fcfcfc); + border-radius: 3px; + color: #303030; + border: 1px solid #a0a0a0; + border-bottom-width: 2px; + white-space: nowrap; +} /* div's for warning, tip and note */ .note, .tip, @@ -140,25 +159,18 @@ pre, margin-top: 15px; } .note { - border-left: 4px solid #FFDE09; - background-color: #FFF4D0; + border-left: 4px solid #61897C; + background-color: #D9E7E2; } .tip { - border-left: 4px solid #38618C; - background-color: #DAE2EA; + border-left: 4px solid #4866AD; + background-color: #CDD5E8; } .warning { - border-left: 4px solid #FF5964; - background-color: #FFE0E2; -} -.noteicon { - padding:0.3em; - transition: transform .2s; /* Animation */ + border-left: 4px solid #D5B177; + background-color: #F9EEDC; } -.noteicon:hover { - transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ -} -.notetext { +.noteicon, .notetext { padding:0.3em; } @@ -177,17 +189,13 @@ pre, .iconcell { padding:0.3em; } -.imageicon { - transition: transform .2s; /* Animation */ -} -.imageicon:hover{ - transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ -} table { - box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px; + background: #FEFEFE; + box-shadow: rgba(0,0,0,0.08) 0 1px 5px 0; border-collapse: collapse; - background: #fefefe; + margin-left: auto; + margin-right: auto; } table, th, td { border-top: 0; @@ -220,13 +228,13 @@ p, ol, td { font-size: 1.17rem; - margin: 2px 2px 2px 2px; + margin: 2px 0 2px 0; } h1 { font-size: 1.83rem; font-weight: 300; border-bottom: 2px solid #148603; - padding-bottom: 6px; + margin-bottom: 1.67rem; } h1 a { text-decoration: none; @@ -242,20 +250,12 @@ h5, h6 { font-size: 1.17rem; } -.avis { - /* background-color: #EEEEEE;*/ -} .relatedtopics { font-weight: normal; } -.relatedbody { - margin-top: 2px; - margin-bottom: 2px; - margin-left: 5px; -} .howtoget { - background: #CCF4C6; - border-left: 4px solid #148603; + background: #EBE7E9; + border-left: 4px solid #4E4B55; border-radius: 0 4px 4px 0; box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2); padding: 0.3em; @@ -268,9 +268,10 @@ h6 { box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2); display: inline-block; font-weight: bold; - padding: 0.3em; + padding: 0.1em 0.3em; } .howtogetbody { + padding: 0 0.3em; } .samplefilesection{ } @@ -292,46 +293,12 @@ h6 { color: red; text-align: left; } -.donation { - padding: 0 0 10px 0; - margin-bottom: 1em; - border-bottom: 1px dashed rgba(0,0,0,0.1); -} -.donation p{ - font-size:1.2rem; -} + .bascode { - background-color: #fafafa; - margin-left: 30px; - margin-right: 30px; -} -.bascodepar { - font-family: monospace; + margin-top:15px; + margin-bottom: 15px; } -/* Basic code syntax highlight */ - -.identifier, -.unknown { - color: green; -} -.keyword { - color: blue; -} -.comment { - color: gray; -} -.number, -.string { - color: red; -} -.operator, -.parameter { - color: black; -} -.hotlink { - color: blue; -} .infopage { color: green; font-size: 1.33rem; @@ -346,7 +313,7 @@ h6 { #DisplayArea { background-color: #FCFCFC; overflow: auto; - padding: 10px; + padding: 10px 10px 40px 10px; grid-area: main; } #DisplayArea > p { @@ -377,9 +344,12 @@ h6 { .embedded {} .header-extrawurst { grid-area: header; -} -header { + position: sticky; + top: 0px; background-color: #18A303; + z-index: 1000; +} +header { color: #fff; height: 64px; padding: 8px 8px 8px 16px; @@ -414,7 +384,6 @@ header { overflow-y: hidden; /* make it smooth on iOS */ -webkit-overflow-scrolling: touch; - text-align: center; } .lang nav a, .modules nav a { color: #fff; @@ -429,9 +398,9 @@ header { white-space: nowrap; } footer { - border-top: 2px solid #148603; - padding: 15px 10px 0 10px; - margin: 40px 0; + padding: 40px 10px 40px 10px; + background-color: #FCFCFC; + box-shadow: 0 2px 8px 0 rgba(0,0,0,.05); } footer p { font-size: 0.98rem; @@ -480,7 +449,6 @@ aside input[type=checkbox]:checked ~ .contents-treeview { } .index a { font-size: 16px; - margin-bottom: 5px; } #Bookmarks { padding: 0 20px; @@ -553,12 +521,13 @@ aside input[type=checkbox]:checked ~ .contents-treeview { font-weight: bold; color: #148603; } -.pagination { - padding: 0; +.pagination-container { + text-align: center; + margin-left: -40px; /* The normalizer fails to account for this */ } .pagination li { display: inline-block; - padding: 4px; + padding: 0 5px; } .pagination a { text-decoration: none; @@ -570,34 +539,78 @@ aside input[type=checkbox]:checked ~ .contents-treeview { display: none; } li.active { - background-color: #0369A3; + background-color: #0379BC; } li.active a { color: #fff; } li.disabled a { - color: #90C0E6; + opacity: 0.4; + pointer-events: none; } #search-bar { + border: 1px solid #CCC; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.1); + box-sizing: border-box; + line-height: 1.5em; margin-top: 10px; + outline: none; + padding: 0 .25em; + transition: all 0.30s ease-in-out; width: 100%; - caret-color: #148603; +} +#search-bar:focus { + border: 1px solid #0EA5FB; } #search-bar::placeholder { font-style: italic; } +.google-donation { + border-top: 2px solid #148603; + background-color: #FCFCFC; + box-shadow: 0 2px 8px 0 rgba(0,0,0,.05); +} +.donation { + background: #0379BC; + background-image: linear-gradient(to bottom, #3498db, #2980b9); + border-radius: 8px; + padding: 5px 10px 5px 10px; + margin: 20px auto 0 auto; + max-width: 200px; + color: #ffffff; + text-decoration: none; +} +.donation a { + color: white; +} +.donation a:hover { + color: white; + text-decoration: none; +} +.donation:hover{ + background: #0379BC; + background-image: linear-gradient(to bottom, #3cb0fd, #3498db); +} +.donation p { + font-size:1.2rem; + text-align: center; +} .google-search { max-width: 300px; - margin: 0 auto; + margin: 40px auto 0 auto; } .modules { border-bottom: 2px solid #f3f3f3; + background-color: #233336; } .modules label:after, .lang label:after { font-size: 30px; color: #fff; content:"⌄"; } +.lang { + background-color: #233336; +} .lang label, .modules label { display: none; } @@ -660,9 +673,12 @@ li.disabled a { } .contents-treeview a, .index a { text-decoration: none; + line-height: 1.4; } .contents-treeview a:hover, .index a:hover { - text-decoration: underline; + border-left: 2px solid rgba(0,0,0,0.05); + margin-left: -12px; + padding-left: 10px; } .contents-treeview input + label + ul { margin: 0 0 0 22px; @@ -685,8 +701,7 @@ li.disabled a { .contents-treeview label, .contents-treeview a, .contents-treeview label::before { - height: 16px; - line-height: 16px; + display: block; vertical-align: middle; } .contents-treeview label:before { @@ -700,12 +715,11 @@ li.disabled a { content: "⊟"; } .contents-current { - background-color: #0369A3; - color: #FFF; - padding-right: 1px; -} -.contents-current:hover { - color: #FFF; + background: rgba(0,0,0,0.05); + border-left: 2px solid #0379BC; + font-weight: 600; + margin-left: -12px; + padding-left: 10px; } /* webkit adjacent element selector bugfix */ @@ -764,7 +778,6 @@ li.disabled a { font-size: 19px; } aside { - background-color: #F4F7F7; float: left; width: 320px; } @@ -774,16 +787,24 @@ li.disabled a { .rightside { grid-area: rightside; } - .google-search { - margin: 0; - position: absolute; - top: 19px; - left: 860px; + .google-donation { + grid-area: google; + position: sticky; + top: 0px; + background-color: #FCFCFC; + box-shadow: none; + } + .donation { + max-width: 400px; + } + footer { + grid-area: footer; } .lang { position: absolute; top: 0; left: 200px; + background-color: transparent; } .modules { width: 120px; @@ -791,12 +812,11 @@ li.disabled a { top: 0; left: 80px; border: none; + background-color: transparent; } #DisplayArea { - background-color: #FCFCFC; box-shadow: 0 2px 8px 0 rgba(0,0,0,.05); - padding: 10px 50px; - width: 800px; + padding: 10px 50px 40px 50px; } } @media screen and (min-width: 1440px) { @@ -817,24 +837,43 @@ li.disabled a { content: ""; } } +/* Use @supports to sneak these rules past IE */ @supports (grid-area: auto) { @media screen and (min-width: 960px) { + .google-donation { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #18A303; + border-top: none; + } + .google-search { + margin: 0; + } + .donation { + margin: 0 auto; + } + footer { + border-top: 2px solid #148603; + } body { display: grid; - grid-template-columns: 320px 1fr; - grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr; - grid-template-areas: "header header" - "rightside main" - "leftside main" + grid-template-columns: 320px 80px 1fr; + grid-template-rows: minmax(1em, auto) minmax(1em, auto) 1fr minmax(1em, auto); + grid-template-areas: "header header google" + "rightside main main" + "leftside main main" + ". footer footer" } } @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" + grid-template-columns: 320px 450px 450px 1fr; + grid-template-rows: 1fr minmax(1em, auto) minmax(1em, auto); + grid-template-areas: "header header google google" + "leftside main main rightside" + ". footer footer ." } .rightside { width: auto; diff --git a/help3xsl/help2.js b/help3xsl/help2.js index 505dcaf8ec..0003b72d82 100644 --- a/help3xsl/help2.js +++ b/help3xsl/help2.js @@ -65,6 +65,20 @@ function setSystemSpan(spanID) { } } } +// Find spans that need the switch treatment and give it to them +var spans = document.querySelectorAll("[class^=switch]"); +var n = spans.length; +for (z = 0; z < n; z++) { + var id = spans[z].getAttribute("id"); + if (id === null) { + continue; + } + else if (id.startsWith("swlnsys")) { + setSystemSpan(id); + } else { + setApplSpan(id); + } +} /* add &DbPAR= and &System= to the links in DisplayArea div */ /* skip for object files */ function fixURL(module, system) { @@ -75,7 +89,7 @@ function fixURL(module, system) { for (var i = 0; i < n; i++) { if (itemlink[i].getAttribute("class") != "objectfiles"){ setURLParam(itemlink[i], pSystem, pAppl); - }; + } } } //Set the params inside URL @@ -159,11 +173,49 @@ function setupLanguages(target, page) { var langNav = document.getElementById('langs-nav'); if (!langNav.classList.contains('loaded')) { var html = ''; - languagesSet.forEach(lang => { + languagesSet.forEach(function(lang) { html += '' + ((lang in languageNames)? languageNames[lang]: lang) + ''; }); langNav.innerHTML = html; langNav.classList.add('loaded'); } } + +// Test, if we are online +if (document.body.getElementsByTagName('meta')) { + var _paq = _paq || []; + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(['disableCookies']); + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']); + (function() { + var u="//piwik.documentfoundation.org/"; + _paq.push(['setTrackerUrl', u+'piwik.php']); + _paq.push(['setSiteId', '68']); + var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; + g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s); + })(); + var system = getParameterByName("System"); +} else { + var system = getSystem(); +} + +var module = getParameterByName("DbPAR"); +var helpID = getParameterByName("HID"); +fixURL(module,system); +var dbg = getParameterByName("Debug"); +if (dbg == null) { dbg=0; } +document.getElementById("DEBUG").style.display = (dbg == 0) ? "none":"block"; +document.getElementById("bm_module").innerHTML ="Module is: "+module; +document.getElementById("bm_system").innerHTML ="System is: "+system; +document.getElementById("bm_HID").innerHTML ="HID is: "+helpID; + +// Mobile devices need the modules and langs on page load +if (Math.max(document.documentElement.clientWidth, window.innerWidth || 0) < 960) { + var e = new Event('change'); + var modules = document.getElementById('modules'); + var langs = document.getElementById('langs'); + modules.dispatchEvent(e); + langs.dispatchEvent(e); +} /* vim:set shiftwidth=4 softtabstop=4 expandtab cinoptions=b1,g0,N-s cinkeys+=0=break: */ diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl index 95892bdd4c..f3b71bac9c 100644 --- a/help3xsl/online_transform.xsl +++ b/help3xsl/online_transform.xsl @@ -68,11 +68,6 @@ - - - - - @@ -99,9 +94,10 @@ - - - + + + + @@ -149,18 +145,24 @@ <xsl:value-of select="$titleL10N"/> - - - - - - - - + + + + + - <gcse:search></gcse:search> - - - -
-

- -

-
-

Impressum (Legal Info) | Privacy Policy | Statutes (non-binding English translation) - Satzung (binding German version) | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the Mozilla Public License v2.0. “LibreOffice” and “The Document Foundation” are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our trademark policy. LibreOffice was based on OpenOffice.org.

- -
-

Help content debug info:

-

This page is:

-

Title is:

-

-

-

+
+
+ +
+ + <gcse:search></gcse:search> +
+
+

+ +

- +
- - - - - - - - - - - + @@ -476,35 +423,35 @@ - - -
    - - - - -
- - -
- - + + +
    + + + + +
+ + +
+ + - - -
    - - - - -
- - -
- - + + +
    + + + + +
+ + +
+ + @@ -522,12 +469,12 @@ - + - + @@ -541,7 +488,7 @@ - + @@ -551,8 +498,12 @@ - - + + + + + +

@@ -582,7 +533,7 @@ - + @@ -592,6 +543,17 @@ + + + + + +

+ + + + + @@ -654,94 +616,82 @@ - - - - - - - - + + + + - - - + + + + + - - - + + + +

Unsupported switch condition.

+ + - - - - + + + + - - - - - - - - - - - + + + + + + + + + +

Unsupported switch condition.

+ + - - - - + + + + - - - + + + + + - - - - - - - + + + +

Unsupported switch condition.

+ + - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + +

Unsupported switch condition.

+ + @@ -800,6 +750,65 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
{local-name()}
+

+
+
+ + + + + + + + + +
+
{local-name()}
+

+
+
+ + @@ -866,7 +875,6 @@ - @@ -883,15 +891,17 @@ -
+
-
+
- - -

+ +
+ + +
@@ -964,7 +974,7 @@
-
{$alt}
+
{$alt}


@@ -996,10 +1006,10 @@ - + - + @@ -1125,11 +1135,7 @@ - {$alt} - - - - + {$alt} -- cgit