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.hallot@libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot@libreoffice.org>

1 files changed, 38 insertions, 34 deletions

diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 6cb2c78885..02a669a56f 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">&lt;gcse:search&gt;&lt;/gcse:search&gt;</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_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>
+    <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">&lt;gcse:search&gt;&lt;/gcse:search&gt;</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"/>