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>

2 files changed, 114 insertions, 64 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 61d8394011..75798d2db0 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 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"/>