Merge pull request #8277 from michaelchadwick/improve-error-message-s…

…tyle Improve Ilios Loading Error div
ilios · Dec 19, 2024 · daa1d76 · daa1d76
2 parents bf55f08 + 8c397fa
commit daa1d76
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 22 deletions.
diff --git a/packages/frontend/lib/ilios-error/index.js b/packages/frontend/lib/ilios-error/index.js
@@ -39,11 +39,15 @@ module.exports = {
           link.type = "text/css";
           link.rel = "stylesheet";
           link.media = "screen";
-
           document.getElementsByTagName( "head" )[0].appendChild( link );
+
+          var dialogContainer = document.createElement('dialog');
+          dialogContainer.id = 'ilios-loading-error';
+          dialogContainer.setAttribute('role', 'banner');
+
           var errorContainer = document.createElement('div');
-          errorContainer.id = 'ilios-loading-error';
-          errorContainer.setAttribute('role', 'banner');
+          errorContainer.id = 'ilios-loading-error-content';
+
           errorContainer.innerHTML = '' +
             '<h1>' +
               'It is possible that your browser is not supported by Ilios. ' +
@@ -60,7 +64,9 @@ module.exports = {
               '<pre>' + event.lineno + '</pre>' +
             '</fieldset>'
           ;
-          document.body.appendChild(errorContainer);
+
+          dialogContainer.appendChild(errorContainer);
+          document.body.appendChild(dialogContainer);
         }
       });
     `;

diff --git a/packages/frontend/lib/ilios-error/public/style.css b/packages/frontend/lib/ilios-error/public/style.css
@@ -1,21 +1,52 @@
 #ilios-loading-error {
-  padding: 2em;
-}
-#ilios-loading-error h1,
-#ilios-loading-error h2 {
-  text-align: center;
-}
-#ilios-loading-error .supported-browsers {
-  border: 1px solid blue;
-  margin: 1rem 0;
-  padding: 1rem 2rem;
-}
-#ilios-loading-error ul {
+  align-items: center;
+  background-color: rgba(17, 17, 17, 0.47);
+  border: none;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  list-style-type: none;
-}
-#ilios-loading-error.hidden {
-  display: none;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 5;
+
+  #ilios-loading-error-content {
+    background-color: white;
+    bottom: 20%;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 90%;
+    padding: 1em;
+    position: sticky;
+    width: 100%;
+    z-index: 5;
+
+    h1,
+    h2 {
+      text-align: center;
+    }
+
+    .supported-browsers {
+      border: 1px solid blue;
+      margin: 1rem 0;
+      padding: 1rem 2rem;
+    }
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+      list-style-type: none;
+    }
+
+    fieldset {
+      pre {
+        white-space: break-spaces;
+      }
+    }
+
+    .hidden {
+      display: none;
+    }
+  }
 }