Redesign Blazor reconnect dialog #250

TheAxelander · Dec 3, 2024 · 925bb3f · 925bb3f
1 parent 2f07127
commit 925bb3f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/OpenBudgeteer.Blazor/App.razor b/OpenBudgeteer.Blazor/App.razor
@@ -48,6 +48,27 @@
         <a href="" class="reload">Reload</a>
     </div>
 
+    <div id="components-reconnect-modal" class="toast mt-3 start-50 translate-middle-x" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <strong class="me-auto">Notification</strong>
+        </div>
+        <div class="toast-body reconnect">
+            <div>
+                Connection lost.<br>Attempting to reconnect to server:
+                <span id="components-reconnect-current-attempt"></span> /
+                <span id="components-reconnect-max-retries"></span>
+                <div class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <div class="toast-body reconnect-failed">
+            <div>
+                Unable to restore connection.<br>Try reloading the page.
+            </div>
+        </div>
+    </div>
+
     <script src="_framework/blazor.web.js"></script>
     <script src="js/bootstrap/bootstrap.bundle.min.js"></script>
     <script src="js/custom.js"></script>

diff --git a/OpenBudgeteer.Blazor/wwwroot/css/site.css b/OpenBudgeteer.Blazor/wwwroot/css/site.css
@@ -24,6 +24,38 @@ a, .btn-link {
     top: 0.5rem;
 }
 
+#components-reconnect-modal {
+    display: none;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    z-index: 10001;
+}
+
+#components-reconnect-modal.components-reconnect-show {
+    display: block;
+}
+#components-reconnect-modal.components-reconnect-show div.reconnect {
+    display: block;
+}
+div.reconnect {
+    display: none;
+}
+
+#components-reconnect-modal.components-reconnect-failed,
+#components-reconnect-modal.components-reconnect-rejected {
+    display: block;
+}
+#components-reconnect-modal.components-reconnect-failed div.reconnect-failed {
+    display: block;
+}
+#components-reconnect-modal.components-reconnect-rejected div.reconnect-failed {
+    display: block;
+}
+div.reconnect-failed {
+    display: none;
+}
+
 /* App specific styles
 -------------------------------------------------- */
 .app-header {