Issue #9 - Improving frontend.

README.md

@@ -22,6 +22,7 @@ Why it is an auth plugin?
 
 One of the graduated stages this plugin introduces is a 'tester only' mode which disables login for most normal users. This is conceptually similar to the maintenance mode but enables testers to login and confirm the state after an upgrade without needing full admin privileges. 
 
+![Screenshot as of 2016-09-06](docs/2016-09-06_screenshot.png?raw=true)
 
 Installation
 ------------

classes/outagelib.php

@@ -69,8 +69,10 @@ class outagelib {
             return;
         }
 
-        $PAGE->add_body_class('auth_outage_active');
-        $CFG->additionalhtmltopofbody .= self::get_renderer()->renderbar($active);
+        // FIXME Code below is raising error at http://moodle.test/my/ for example.
+        // $PAGE->add_body_class('auth_outage_active');
+        $CFG->additionalhtmltopofbody = self::get_renderer()->renderbar($active)
+            . $CFG->additionalhtmltopofbody;
     }
 
     /**

renderer.php

@@ -139,10 +139,16 @@ class auth_outage_renderer extends plugin_renderer_base {
             ['start' => $start, 'stop' => $stop]
         );
 
-        return html_writer::div(
-            html_writer::div($outage->title, 'auth_outage_warningbar_title')
-            . html_writer::div($message, 'auth_outage_warningbar_message'),
-            'auth_outage_warningbar'
-        );
+        return
+            html_writer::div(
+                html_writer::div(
+                    html_writer::div($outage->title, 'auth_outage_warningbar_box_title')
+                    . html_writer::div($message, 'auth_outage_warningbar_box_message'),
+                    'auth_outage_warningbar_box'
+                ),
+                'auth_outage_warningbar'
+            )
+            .
+            html_writer::div(' ', 'auth_outage_warningbar_spacer');
     }
 }

res/outage.css

@@ -1,7 +1,35 @@
 .auth_outage_warningbar {
-    background-color: red;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    height: 90px;
+    z-index: 9999;
+    width: 100%;
+    text-align: center;
+    background-color: white;
 }
 
-.auth_outage_warningbar_title {
-    font-size: 120%;
+.auth_outage_warningbar_box {
+    border-top: 2px dashed #a00000;
+    border-bottom: 2px dashed #a00000;
+    background-color: #ffcccc;
+    color: #a00000;
+}
+
+.auth_outage_warningbar_box_title {
+    font-size: 200%;
+    font-weight: bold;
+    margin: 10px 0;
+}
+
+.auth_outage_warningbar_box_message {
+    margin-bottom: 5px;
+}
+
+.navbar.navbar-fixed-top {
+    top: 90px;
+}
+
+.auth_outage_warningbar_spacer {
+    height: 80px;
 }