Issue #29 - UI improvements such as warning bar styling and texts.

lang/en/auth_outage.php

@@ -24,7 +24,7 @@
  */
 
 $string['auth_outagedescription'] = 'Auxiliary plugin that warns users about a future outage and prevents them from logging in once the outage starts.';
-$string['datetimeformat'] = '%d %h %Y at %I:%M%P';
+$string['datetimeformat'] = '%a %d %h %Y at %I:%M%P %Z';
 $string['defaultlayoutcss'] = 'Layout CSS';
 $string['defaultlayoutcssdescription'] = 'This CSS code will be used to display the Outage Warning Bar.';
 $string['defaultoutageduration'] = 'Outage Duration';
@@ -39,7 +39,7 @@ $string['defaultwarningdescriptiondescription'] = 'Default warning message for o
 $string['defaultwarningdescriptionvalue'] = 'There is an scheduled maintenance from {{start}} to {{stop}} and our system will not be available during that time.';
 $string['description'] = 'Public Description';
 $string['description_help'] = 'A full description of the outage, publicly visible by all users.';
-$string['info1minutebefore'] = '1 minute before';
+$string['info15secondsbefore'] = '15 seconds before';
 $string['infoendofoutage'] = 'end of outage';
 $string['infofrom'] = 'From:';
 $string['infountil'] = 'Until:';
@@ -47,8 +47,8 @@ $string['infostart'] = 'start';
 $string['infostartofwarning'] = 'start of warning';
 $string['menudefaults'] = 'Default Settings';
 $string['menumanage'] = 'Manage';
-$string['messageoutageongoing'] = 'Our system will be under maintenance until {$a->stop}.';
-$string['messageoutagewarning'] = 'Shutting down in {{countdown}} ...';
+$string['messageoutageongoing'] = 'Back online at {$a->stop}.';
+$string['messageoutagewarning'] = 'Shutting down in {{countdown}}';
 $string['notfound'] = 'No outages found.';
 $string['outageedit'] = 'Edit Outage';
 $string['outagecreate'] = 'Create Outage';
@@ -60,7 +60,6 @@ $string['outageduration_help'] = 'How long the outage lasts after it starts.';
 $string['outageslistfuture'] = 'Planned outages';
 $string['outageslistpast'] = 'Outage history';
 $string['pluginname'] = 'Outage manager';
-$string['readmore'] = 'Read More';
 $string['starttime'] = 'Start date and time';
 $string['starttime_help'] = 'At which date and time the outage starts, preventing general access to the system.';
 $string['tableheaderstarttime'] = 'Starts on';

renderer.php

@@ -157,7 +157,7 @@ class auth_outage_renderer extends plugin_renderer_base {
         $adminlinks = [];
         foreach ([
                      'startofwarning' => -$outage->get_warning_duration(),
-                     '1minutebefore' => -60,
+                     '15secondsbefore' => -15,
                      'start' => 0,
                      'endofoutage' => $outage->get_duration(),
                  ] as $title => $delta) {
@@ -191,6 +191,7 @@ class auth_outage_renderer extends plugin_renderer_base {
      * @param outage $outage The outage to show in the warning bar.
      * @param int|null $time Timestamp to send to the outage bar in order to render the outage. Null for current time.
      * @return string HTML of the warning bar.
+     * @SuppressWarnings("unused") because $countdown is used inside require(...)
      */
     public function renderoutagebar(outage $outage, $time = null) {
         global $CFG;
@@ -211,7 +212,6 @@ class auth_outage_renderer extends plugin_renderer_base {
             ['start' => $start, 'stop' => $stop]
         );
 
-
         ob_start();
         require($CFG->dirroot . '/auth/outage/views/warningbar.php');
         $html = ob_get_contents();

views/warningbar.css

@@ -1,35 +1,39 @@
 /*
 This file is used as default value for the 'auth_outage_css' settings.
-If you need to make chances here, remember to update your settings inside Moodle.
+If you need to make changes here, remember to update your settings inside Moodle.
 */
 
-.auth_outage_warningbar {
-    background-color: white;
+#auth_outage_warningbar_box {
+    background-color: red;
     box-sizing: content-box;
+    color: white;
     height: 90px;
     left: 0;
+    padding: 0;
     position: fixed;
     text-align: center;
     top: 0;
+    transition: height 10s linear;
     width: 100%;
     z-index: 9999;
 }
-
-.auth_outage_warningbar_box {
-    background-color: #ffcccc;
-    border-bottom: 2px dashed #a00000;
-    border-top: 2px dashed #a00000;
-    color: #a00000;
+#auth_outage_warningbar_box.imminent {
+    background: purple;
+}
+.auth_outage_warningbar_center {
+    position: relative;
+    top: 50%;
+    margin-top: -45px;
 }
 
-.auth_outage_warningbar_box_countdown {
+#auth_outage_warningbar_countdown {
     font-size: 200%;
     font-weight: bold;
     margin: 10px 0;
 }
 
-.auth_outage_warningbar_box_message {
-    margin-bottom: 5px;
+.auth_outage_warningbar_box_message A {
+    color: white;
 }
 
 .navbar.navbar-fixed-top {

views/warningbar.js

@@ -0,0 +1,50 @@
+var auth_outage_countdown = {
+    timer: null,
+    clienttime: Date.now(),
+    siteadmin: false,
+    init: function (countdown, siteadmin) {
+        this.countdown = countdown;
+        this.siteadmin = siteadmin;
+        this.divtext = document.getElementById('auth_outage_warningbar_countdown');
+        this.divblock = document.getElementById('auth_outage_warningbar_box');
+        this.text = this.divtext.innerHTML;
+        var $this = this;
+        this.timer = setInterval(function () {
+            $this.tick();
+        }, 1000);
+        this.tick();
+    },
+    tick: function () {
+        var elapsed = Math.round((Date.now() - this.clienttime) / 1000);
+        var missing = this.countdown - elapsed;
+        if (!this.siteadmin && (missing == 10)) {
+            this.divblock.className += ' imminent';
+            this.divblock.style.height = window.innerHeight + 'px';
+        }
+        if (missing <= 0) {
+            missing = 0;
+            clearInterval(this.timer);
+            if (!this.siteadmin) {
+                location = '/auth/outage/info.php';
+            }
+        }
+        this.divtext.innerHTML = this.text.replace('{{countdown}}', this.seconds2hms(missing));
+    },
+    seconds2hms: function (seconds) {
+        var minutes = Math.floor(seconds / 60);
+        var hours = Math.floor(minutes / 60);
+        seconds %= 60;
+        minutes %= 60;
+        // Cross-browser simple solution for padding zeroes.
+        if (minutes < 10) {
+            minutes = "0" + minutes;
+        }
+        if (seconds < 10) {
+            seconds = "0" + seconds;
+        }
+        return hours + ':' + minutes + ':' + seconds;
+    }
+};
+
+// auth_outage_countdown is used outside this js file.
+/* jshint unused:false */

views/warningbar.php

@@ -27,84 +27,30 @@ if (!defined('MOODLE_INTERNAL')) {
     die('Direct access to this script is forbidden.'); // It must be included from a Moodle page.
 }
 
-// If debugging include directly from file, otherwise use plugin settings.
-echo html_writer::tag('style',
-    debugging() ? file_get_contents($CFG->dirroot . '/auth/outage/views/warningbar.css') : get_config('auth_outage', 'css')
-);
-
+echo html_writer::tag('style', get_config('auth_outage', 'css'));
 ?>
 
-<div class="auth_outage_warningbar">
-    <div class="auth_outage_warningbar_box">
-        <div class="auth_outage_warningbar_box_countdown"
-             id="auth_outage_warningbar_countdown"><?php echo $countdown; ?></div>
+<div id="auth_outage_warningbar_box">
+    <div class="auth_outage_warningbar_center">
+        <div id="auth_outage_warningbar_countdown"><?php echo $countdown; ?></div>
         <div class="auth_outage_warningbar_box_message">
-            <?php echo $outage->get_title(); ?>
-            <small>
-                [<?php echo html_writer::link(
-                    new moodle_url('/auth/outage/info.php', ['id' => $outage->id]),
-                    get_string('readmore', 'auth_outage'),
-                    ['target' => 'outage']
-                ); ?>]
-            </small>
+            <?php echo html_writer::link(
+                new moodle_url('/auth/outage/info.php', ['id' => $outage->id]),
+                $outage->get_title(),
+                ['target' => 'outage']
+            ); ?>
         </div>
     </div>
 </div>
 
-<script>
-    // Internet Explorer 8 fix.
-    if (!Date.now) {
-        Date.now = function () {
-            return new Date().getTime();
-        }
-    }
-
-    // Define outage object.
-    var auth_outage_countdown = {
-        timer: null
-        , countdown: <?php echo($outage->starttime - $time); ?>
-        , clienttime: Date.now()
-        , init: function () {
-            this.span = document.getElementById('auth_outage_warningbar_countdown');
-            this.text = this.span.innerHTML;
-            var $this = this;
-            this.timer = setInterval(function () {
-                $this.tick();
-            }, 1000);
-            this.tick();
-        }
-        , tick: function () {
-            var elapsed = Math.round((Date.now() - this.clienttime) / 1000);
-            var missing = this.countdown - elapsed;
-            if (missing <= 0) {
-                clearInterval(this.timer);
-                missing = 0;
-                <?php
-                if (!is_siteadmin()) {
-                    echo 'location.href = "' . (new \moodle_url('/auth/outage/info.php')) . '";';
-                }
-                ?>
-            }
-            else {
-                this.span.innerHTML = this.text.replace('{{countdown}}', this.seconds2hms(missing));
-            }
-        }
-        , seconds2hms: function (seconds) {
-            var minutes = Math.floor(seconds / 60);
-            var hours = Math.floor(minutes / 60);
-            seconds %= 60;
-            minutes %= 60;
-            // Cross-browser simple solution for padding zeroes.
-            if (minutes < 10) {
-                minutes = "0" + minutes;
-            }
-            if (seconds < 10) {
-                seconds = "0" + seconds;
-            }
-            return hours + ':' + minutes + ':' + seconds;
-        }
-    };
-    auth_outage_countdown.init();
-</script>
+<?php if (!$outage->is_ongoing($time)): ?>
+    <script>
+        <?php require($CFG->dirroot . '/auth/outage/views/warningbar.js'); ?>
+        auth_outage_countdown.init(
+            <?php echo ($outage->starttime - $time); ?>,
+            <?php echo (is_siteadmin() ? 'true' : 'false'); ?>
+        );
+    </script>
+<?php endif; ?>
 
 <div class="auth_outage_warningbar_spacer">&nbsp;</div>