Bug 1498436 - Move site-wide message to global header

4 files changed, 91 insertions, 41 deletions

diff --git a/docs/en/rst/administering/parameters.rst b/docs/en/rst/administering/parameters.rst
index 0492e0070..1b657ff3c 100644
--- a/docs/en/rst/administering/parameters.rst
+++ b/docs/en/rst/administering/parameters.rst
@@ -29,12 +29,10 @@ utf8
               you must re-run :file:`checksetup.pl` immediately afterward.
 
 announcehtml
-    Any text in this field will be displayed at the top of every HTML
-    page in this Bugzilla installation. The text is not wrapped in any
-    tags. For best results, wrap the text in a ``<div>``
-    tag. Any style attributes from the CSS can be applied. For example,
-    to make the text green inside of a red box, add ``id=message``
-    to the ``<div>`` tag.
+    Any text in this field will be displayed at the top of every HTML page in
+    this Bugzilla installation. The text is not wrapped in any tags. For best
+    results, wrap the text in a ``<p>`` tag. Any style attributes from the CSS
+    can be applied. ``<p class="warning">`` makes the text red.
 
 upgrade_notification
     Enable or disable a notification on the homepage of this Bugzilla
diff --git a/skins/standard/global.css b/skins/standard/global.css
index adea088a0..3ccf6e8fb 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -79,6 +79,52 @@
     }
 /* fixed global header (end) */
 
+/* global message (begin) */
+    #message-container {
+        text-align: center;
+        line-height: 1.5;
+    }
+
+    #message-container .inner {
+        box-sizing: border-box;
+        margin: 0 auto;
+        padding: 8px;
+        width: 1024px;
+    }
+
+    #message-container p {
+        margin: 0;
+    }
+
+    #message-container .noscript {
+        color: #EEE;
+        background-color: #333;
+    }
+
+    #message-container .warning {
+        color: #EEE;
+        background-color: #C00;
+    }
+
+    #message-container .announcement {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+        color: #555;
+        background-color: lightyellow;
+    }
+
+    #message-container .announcement p.warning {
+        color: red;
+    }
+
+    /* Reset legacy style */
+    #message-container .announcement #message {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        color: #555;
+    }
+/* global message (end) */
+
 /* header (begin) */
     #header {
         flex: none;
@@ -404,6 +450,7 @@
 
 /* narrower global header (begin) */
     @media screen and (max-width: 1024px) {
+        #message-container .inner,
         #header .inner {
             width: 800px;
         }
@@ -1183,14 +1230,6 @@ hr {
     display: none;
 }
 
-#mfa-warning {
-    flex: none;
-    margin: 0 -15px;
-    padding: 10px 15px;
-    color: #FFF;
-    background-color: #FF5300;
-}
-
 #bugzilla-body {
     flex: auto;
     position: relative;
diff --git a/template/en/default/admin/params/general.html.tmpl b/template/en/default/admin/params/general.html.tmpl
index 05e8f09a2..248d818a9 100644
--- a/template/en/default/admin/params/general.html.tmpl
+++ b/template/en/default/admin/params/general.html.tmpl
@@ -49,16 +49,12 @@
     _ " afterward.</p>",
 
   announcehtml =>
-    "If this field is non-empty, then $terms.Bugzilla will"
-    _ " display whatever is in this field at the top of every"
-    _ " HTML page. The HTML you put in this field is not wrapped or"
-    _ " enclosed in anything. You might want to wrap it inside a"
-    _ "<tt>&lt;div&gt;</tt>. Give the div <em>id=\"message\"</em> to get"
-    _ " green text inside a red box, or <em>class=\"bz_private\"</em> for"
-    _ " dark red on a red background.  Anything defined in "
-    _ " <tt>skins/standard/global.css</tt>"
-    _ " will work.  To get centered text, use <em>style=\"text-align: "
-    _  " center;\"</em>.",
+    "If this field is non-empty, then $terms.Bugzilla will display whatever is"
+    _ " in this field at the top of every HTML page. The HTML you put in this"
+    _ " field is not wrapped or enclosed in anything. You might want to wrap it"
+    _ " inside a <code>&lt;p&gt;</code> tag. Give it"
+    _ " <code>class=\"warning\"</code> to make the text red. Anything defined"
+    _ " in <code>skins/standard/global.css</code> will work.",
 
   upgrade_notification =>
     "$terms.Bugzilla can inform you when a new release is available."
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index c7d73fe85..5db263981 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -245,6 +245,40 @@
   #%]
 
 <div id="wrapper">
+
+<aside id="message-container" role="complementary">
+  <noscript>
+    <div class="noscript">
+      <div class="inner">
+        <p>Please enable JavaScript in your browser to use all the features on this site.</p>
+      </div>
+    </div>
+  </noscript>
+  [% IF Bugzilla.request_cache.mfa_warning
+        AND user.mfa_required_date
+        AND NOT Bugzilla.request_cache.on_mfa_page %]
+    <div class="warning">
+      <div class="inner">
+        <p>
+          Please <a href="userprefs.cgi?tab=mfa">enable two-factor authentication</a>
+          [% IF Param('mfa_group_grace_period') %]
+            before <i>[% user.mfa_required_date FILTER time %]</i>.
+          [% ELSE %]
+            now.
+          [% END %]
+        </p>
+      </div>
+    </div>
+  [% END %]
+  [% IF Param('announcehtml') %]
+    <div class="announcement">
+      <div class="inner">
+        [% Param('announcehtml') FILTER none %]
+      </div>
+    </div>
+  [% END %]
+</aside>
+
 <header id="header" role="banner">
   <div class="inner">
     <h1 id="header-title" class="title"><a href="./" title="Go to home page">[% terms.Bugzilla %]</a></h1>
@@ -370,19 +404,6 @@
   </div>
 </header> [%# header %]
 
-[% IF Bugzilla.request_cache.mfa_warning
-      AND user.mfa_required_date
-      AND NOT Bugzilla.request_cache.on_mfa_page %]
-  <aside id="mfa-warning">
-    Please <a href="userprefs.cgi?tab=mfa">enable two-factor authentication</a>
-    [% IF Param('mfa_group_grace_period') %]
-      before <i>[% user.mfa_required_date FILTER time %]</i>.
-    [% ELSE %]
-      now.
-    [% END %]
-  </aside>
-[% END %]
-
 <main id="bugzilla-body" tabindex="-1">
 <div id="main-inner">
 
@@ -393,10 +414,6 @@
   <h2>[% header FILTER none %]</h2>
 [% END %]
 
-[% IF Param('announcehtml') %]
-[% Param('announcehtml') FILTER none %]
-[% END %]
-
 [% IF message %]
   <div id="message">[% message %]</div>
 [% END %]