help3xsl/default.css | 106 ++++++++++++++++++++++----------
help3xsl/online_transform.xsl | 72 +++++++++++----------
source/text/shared/help/browserhelp.xhp | 2
3 files changed, 115 insertions(+), 65 deletions(-)
New commits:
commit eb2972e06b1ac3210f1de1a6e9ade2d049aaf976
Author: Ilmari Lauhakangas <ilmari.lauhakan...@libreoffice.org>
AuthorDate: Fri Mar 8 00:11:39 2019 +0200
Commit: Olivier Hallot <olivier.hal...@libreoffice.org>
CommitDate: Fri Mar 8 11:48:40 2019 +0100
Donation button and sticky header for Help
Task: https://redmine.documentfoundation.org/issues/2815
Header was made sticky on non-mobile by using position: sticky.
This was the only way to make it work with the grid without
carving magic numbers into stone. IE11 ignores it, but so what?
Donation text was made shorter.
The Google search and the donation button were wrapped in a
container to make it easy to haul them all over the place.
Lots of tweaks were made to the grid areas and the styles of
the bottom elements to make everything fit nicely in the new
markup order. The result was tested on IE11 to make sure it
degrades gracefully.
The Displayarea element had a fixed width (my old mistake),
which made the min-width: 960px layout look very uncool.
Change-Id: I131a1e82290bc3381c938acb4dc9dbc408fb2ba7
Reviewed-on: https://gerrit.libreoffice.org/68890
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hal...@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hal...@libreoffice.org>
diff --git a/help3xsl/default.css b/help3xsl/default.css
index 61d839401..75798d2db 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -293,14 +293,7 @@ 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 {
margin-top:15px;
margin-bottom: 15px;
@@ -320,7 +313,7 @@ h6 {
#DisplayArea {
background-color: #FCFCFC;
overflow: auto;
- padding: 10px;
+ padding: 10px 10px 40px 10px;
grid-area: main;
}
#DisplayArea > p {
@@ -351,6 +344,8 @@ h6 {
.embedded {}
.header-extrawurst {
grid-area: header;
+ position: sticky;
+ top: 0px;
}
header {
background-color: #18A303;
@@ -402,9 +397,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;
@@ -569,9 +564,39 @@ li.disabled a {
#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;
@@ -757,11 +782,15 @@ 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;
+ }
+ footer {
+ grid-area: footer;
}
.lang {
position: absolute;
@@ -776,10 +805,8 @@ li.disabled a {
border: none;
}
#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) {
@@ -800,24 +827,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/online_transform.xsl b/help3xsl/online_transform.xsl
index 6cb2c7888..02a669a56 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -212,42 +212,46 @@
</aside>
<div id="DisplayArea" itemprop="articleBody">
<xsl:apply-templates select="/helpdocument/body"/>
- <footer>
- <xsl:if test="$online">
- <div class="google-search">
- <script type="text/javascript">
- <![CDATA[
- (function() {]]>
- <xsl:call-template name="getToken"><xsl:with-param
name="lang" select="$lang"/></xsl:call-template>
- <![CDATA[
- var gcse = document.createElement('script');
- gcse.type = 'text/javascript';
- gcse.async = true;
- gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(gcse, s);
- })();
- ]]>
- </script>
- <xsl:text
disable-output-escaping="yes"><gcse:search></gcse:search></xsl:text>
- </div>
- <div class="donation">
- <p><a
href="https://www.libreoffice.org/donate/?pk_campaign=help"; target ="_blank">
- <xsl:value-of select="$ui_donate"/>
- </a></p>
- </div>
- <p><a href="https://www.libreoffice.org/imprint";
target="_blank">Impressum (Legal Info)</a> | <a
href="https://www.libreoffice.org/privacy"; target="_blank">Privacy Policy</a> |
<a href="https://www.documentfoundation.org/statutes.pdf";
target="_blank">Statutes (non-binding English translation)</a> - <a
href="https://www.documentfoundation.org/satzung.pdf"; target="_blank">Satzung
(binding German version)</a> | Copyright information: Unless otherwise
specified, all text and images on this website are licensed under the <a
href="https://www.libreoffice.org/download/license/"; target="_blank">Mozilla
Public License v2.0</a>. “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 <a href="https://wiki.documentfoundation.org/TradeMark_Poli
cy" target="_blank">trademark policy</a>. LibreOffice was based on
OpenOffice.org.</p>
- </xsl:if>
- <div id="DEBUG" class="debug">
- <h3 class="bug">Help content debug info:</h3>
- <p>This page is: <a
href="https://opengrok.libreoffice.org/xref/help/source{$filename}";
target="_blank"><xsl:value-of select="$filename"/></a></p>
- <p>Title is: <xsl:value-of select="$title"/></p>
- <p id="bm_module"></p>
- <p id="bm_system"></p>
- <p id="bm_HID"></p>
+ </div>
+ <div class="google-donation">
+ <xsl:if test="$online">
+ <div class="google-search">
+ <script type="text/javascript">
+ <![CDATA[
+ (function() {]]>
+ <xsl:call-template name="getToken"><xsl:with-param
name="lang" select="$lang"/></xsl:call-template>
+ <![CDATA[
+ var gcse = document.createElement('script');
+ gcse.type = 'text/javascript';
+ gcse.async = true;
+ gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(gcse, s);
+ })();
+ ]]>
+ </script>
+ <xsl:text
disable-output-escaping="yes"><gcse:search></gcse:search></xsl:text>
+ </div>
+ <div class="donation">
+ <p><a
href="https://www.libreoffice.org/donate/?pk_campaign=help"; target ="_blank">
+ <xsl:value-of select="$ui_donate"/>
+ </a></p>
</div>
- </footer>
+ </xsl:if>
</div>
+ <footer>
+ <xsl:if test="$online">
+ <p><a href="https://www.libreoffice.org/imprint";
target="_blank">Impressum (Legal Info)</a> | <a
href="https://www.libreoffice.org/privacy"; target="_blank">Privacy Policy</a> |
<a href="https://www.documentfoundation.org/statutes.pdf";
target="_blank">Statutes (non-binding English translation)</a> - <a
href="https://www.documentfoundation.org/satzung.pdf"; target="_blank">Satzung
(binding German version)</a> | Copyright information: Unless otherwise
specified, all text and images on this website are licensed under the <a
href="https://www.libreoffice.org/download/license/"; target="_blank">Mozilla
Public License v2.0</a>. “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 <a href="https://wiki.documentfoundation.org/TradeMark_Policy";
target="_blank">trademark policy</a>. LibreOffice was based on
OpenOffice.org.</p>
+ </xsl:if>
+ <div id="DEBUG" class="debug">
+ <h3 class="bug">Help content debug info:</h3>
+ <p>This page is: <a
href="https://opengrok.libreoffice.org/xref/help/source{$filename}";
target="_blank"><xsl:value-of select="$filename"/></a></p>
+ <p>Title is: <xsl:value-of select="$title"/></p>
+ <p id="bm_module"></p>
+ <p id="bm_system"></p>
+ <p id="bm_HID"></p>
+ </div>
+ </footer>
<script type="text/javascript" src="{$target}{$lang}/bookmarks.js"/>
<script type="text/javascript" src="{$target}{$lang}/contents.js"/>
<script type="text/javascript" src="{$target}help.js"/>
diff --git a/source/text/shared/help/browserhelp.xhp
b/source/text/shared/help/browserhelp.xhp
index a0e33d635..e4245d143 100644
--- a/source/text/shared/help/browserhelp.xhp
+++ b/source/text/shared/help/browserhelp.xhp
@@ -22,7 +22,7 @@
<paragraph role="paragraph" id="par_id601525734140935"
xml-lang="en-US"><variable id="index">Index</variable></paragraph>
<paragraph role="paragraph" id="par_id953832383493636"
xml-lang="en-US"><variable id="pholderall">Search in all
modules</variable></paragraph>
<paragraph role="paragraph" id="par_id335427459543352"
xml-lang="en-US"><variable id="pholderchosen">Search in chosen
module</variable></paragraph>
- <paragraph role="paragraph" id="par_id191525734190260"
xml-lang="en-US"><variable id="donate">If this page has been helpful, you can
support us!</variable></paragraph>
+ <paragraph role="paragraph" id="par_id191525734190260"
xml-lang="en-US"><variable id="donate">Please support us!</variable></paragraph>
<paragraph role="paragraph" id="par_id881525734289794"
xml-lang="en-US"><variable id="LibreOfficeHelp">%PRODUCTNAME %PRODUCTVERSION
Help</variable></paragraph>
<paragraph role="paragraph" id="par_id421525736799965"
xml-lang="en-US"><variable id="copyclip">Click on text to copy to
clipboard</variable></paragraph>
<paragraph role="paragraph" id="par_id31525734624833"
xml-lang="en-US"><variable id="selectmodule">Select
Module</variable></paragraph>
_______________________________________________
Libreoffice-commits mailing list
libreoffice-comm...@lists.freedesktop.org
https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
