From 21fe888862ba30d6ecd921df26aace665d93b0dd Mon Sep 17 00:00:00 2001
From: Matt Dawson <8229423+meepster-nz@users.noreply.github.com>
Date: Wed, 7 Dec 2022 08:58:30 +1100
Subject: [PATCH] ISSUE304 - css change for warning box header and title (#305)

* ISSUE304 - css change for warning box header and title

* Issue304-css to hopefully override existing theme hacks

* Issue#304 - updated README file with additional scss and css code to fix issues with custom themes

Co-authored-by: Matt Dawson <mattd@catalyst-au.net>
---
 README.md                       | 42 +++++++++++++++++++++++++++++++++
 views/warningbar/warningbar.css | 24 +++++++++++++------
 2 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index f39107c..3ac8e97 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,48 @@ This can be found at:
 
 
 
+Custom Theme Additional SCSS
+-------------------
+
+Custom themes generally do not have the same `$navbar-height` variable set to 80px (MOODLE), therefore custom themes will not calculate the change in navbar height with page elements that calculate the navbar total height. 
+
+Add the following SCSS For Moodle 3.11+
+
+```
+body.auth_outage {
+    #page-wrapper {
+        #nav-drawer {
+            top: $navbar-height + 100px;
+            height: calc(100% - (#{$navbar-height} + 100px));
+        }
+        #page {
+            margin-top: $navbar-height + 100px;
+        }
+    }
+    [data-region=right-hand-drawer].drawer {
+        top: $navbar-height + 100px;
+        height: calc(100% - (#{$navbar-height} + 100px));
+    } 
+}
+```
+
+Totara is a little different with version 13+ and no variables are used to set the `totaraNav` height 
+
+Add the following CSS For Totara 13+
+
+```
+.totaraNav {
+    margin-top: 100px;
+}
+.local_envbar .totaraNav {
+    margin-top: 50px;
+}
+body.auth_outage #page {
+    margin-top: 0;
+}
+```
+
+
 
 How to use
 ----------
diff --git a/views/warningbar/warningbar.css b/views/warningbar/warningbar.css
index e24a8d4..17759f1 100644
--- a/views/warningbar/warningbar.css
+++ b/views/warningbar/warningbar.css
@@ -12,12 +12,21 @@ If you need to make changes here, remember to update your settings inside Moodle
     padding: 0;
     position: fixed;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     top: 0;
     transition: background 3s ease-out;
     width: 100%;
     z-index: 9999;
 }
 
+#auth_outage_warningbar_box .auth_outage_warningbar_center {
+    /* fix to prevent existing theme hacks to fix issue */
+    margin-top: 0;
+    position: static;
+}
+
 #auth_outage_warningbar_box.auth_outage_warning_period {
     background:
         repeating-linear-gradient(
@@ -66,16 +75,10 @@ If you need to make changes here, remember to update your settings inside Moodle
     background-color: #090;
 }
 
-.auth_outage_warningbar_center {
-    margin-top: -35px;
-    position: relative;
-    top: 50%;
-}
-
 #auth_outage_warningbar_message {
     font-size: 200%;
     font-weight: bold;
-    margin: 10px 0;
+    margin: 0;
 }
 
 a.auth_outage_warningbar_box_title {
@@ -87,6 +90,7 @@ a.auth_outage_warningbar_box_finish {
     border: 1px solid black;
     border-radius: 5px;
     color: darkgray;
+    white-space: nowrap;
     font-weight: bold;
     margin-left: 10px;
     padding-left: 5px;
@@ -126,3 +130,9 @@ body.auth_outage .layout.fullscreen {
 body.auth_outage .modal-dialog {
     margin: calc(150px + 1.75rem) auto;
 }
+
+@media (max-width: 767px) {
+    #auth_outage_warningbar_message {
+        font-size: 120%;
+    }
+}