Merge pull request #3283 from AtlasOfLivingAustralia/feature/issue3264

Made banners fixed position #3264
AtlasOfLivingAustralia · Jul 29, 2024 · 7f69a52 · 7f69a52
2 parents dae1d9d + a4b6c93
commit 7f69a52
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/grails-app/assets/javascripts/base-bs4.js b/grails-app/assets/javascripts/base-bs4.js
@@ -20,18 +20,46 @@ function setupTimeoutWarning(options) {
         $.ajax(options.keepSessionAliveUrl).fail(function (xhr) {
             if (xhr.status == 0) {
                 // Network outage?
-                $networkWarningBanner.show();
+                showNetworkBanner();
             } else if (xhr.status == 401) {
-                $networkWarningBanner.hide();
+                hideNetworkBanner();
                 // Session timed out.
-                $logoutWarningBanner.show();
+                showTimeoutBanner();
             }
         }).done(function (xhr) {
-            $networkWarningBanner.hide();
-            $logoutWarningBanner.hide();
+            hideNetworkBanner();
+            hideTimeoutBanner();
         });
     }
 
+    function showBanner(banner) {
+        banner.show();
+        var height = banner.height();
+        $(document).css("margin-top", height);
+    }
+
+    function hideBanner(banner) {
+        banner.hide();
+        $(document).css("margin-top", "0");
+    }
+
+    function showTimeoutBanner() {
+        showBanner($logoutWarningBanner);
+    }
+
+    function hideTimeoutBanner() {
+        hideBanner($logoutWarningBanner);
+    }
+
+    function showNetworkBanner() {
+        showBanner($networkWarningBanner);
+        hideBanner($logoutWarningBanner)
+    }
+
+    function hideNetworkBanner() {
+        hideBanner($networkWarningBanner);
+    }
+
     setInterval(fireKeepAlive, intervalSeconds * 1000);
 
     if (!window.localStorage) {
@@ -63,4 +91,6 @@ function setupTimeoutWarning(options) {
     window.addEventListener('offline', function() {
         fireKeepAlive();
     });
+
+
 }
diff --git a/grails-app/assets/stylesheets/nrm/css/screen.css b/grails-app/assets/stylesheets/nrm/css/screen.css
@@ -2445,13 +2445,17 @@ div#announcement p {
 }
 
 div#logout-warning, div#network-warning {
+    position: fixed;
+    width: 100%;
+    top: 0;
     padding: 15px;
     font-size: 20px;
     font-weight: bold;
     text-align: center;
     color: white;
     background-color: red;
     border-bottom: 0px solid red;
+    z-index: 1000;
 }
 #logout-warning a, #network-warning a {
     color:white;

diff --git a/grails-app/views/layouts/nrm_bs4.gsp b/grails-app/views/layouts/nrm_bs4.gsp
@@ -209,8 +209,8 @@
                 keepSessionAliveUrl: "${g.createLink(controller: 'ajax', action:'keepSessionAlive')}",
                 logoutWarningBannerId: 'logout-warning',
                 networkWarningBannerId: 'network-warning',
-                logoutButtonSelector: 'a.btnLogin', // Not a typo, same class as login button.
-                loginButtonSelector: 'a.btnLogin'
+                logoutButtonSelector: 'a.btn-login', // Not a typo, same class as login button.
+                loginButtonSelector: 'a.btn-login'
             };
             var loggedIn = false;
             <auth:ifLoggedIn>