add a custom reconnect dialog (#305)

* add a custom reconnect dialog * I'M OLD
7 years ago · e08721e779
1 changed files with 67 additions and 37 deletions
--- a/src/Microsoft.Tye.Hosting/Dashboard/Pages/_Host.cshtml
+++ b/src/Microsoft.Tye.Hosting/Dashboard/Pages/_Host.cshtml
@ -1,37 +1,67 @@
-@page "/"
-
-@namespace Microsoft.Tye.Hosting.Dashboard.Pages
-@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
-@{
-    Layout = null;
-}
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tye Dashboard</title>
-    <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
-    <link href="css/site.css" rel="stylesheet" />
-</head>
-<body>
-    <app>
-        <component type="typeof(Microsoft.Tye.Hosting.Dashboard.App)" render-mode="ServerPrerendered" />
-    </app>
-
-    <div id="blazor-error-ui">
-        <environment include="Staging,Production">
-            An error has occurred. This application may no longer respond until reloaded.
-        </environment>
-        <environment include="Development">
-            An unhandled exception has occurred. See browser dev tools for details.
-        </environment>
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
-
-    <script src="_framework/blazor.server.js"></script>
-</body>
-</html>
+@page "/"
+
+@namespace Microsoft.Tye.Hosting.Dashboard.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@{
+    Layout = null;
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tye Dashboard</title>
+    <base href="~/" />
+    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
+    <link href="css/site.css" rel="stylesheet" />
+    <style>
+        #components-reconnect-modal {
+            position: fixed;
+            top: 0px;
+            right: 0px;
+            bottom: 0px;
+            left: 0px;
+            z-index: 1000;
+            display: block;
+            overflow: hidden;
+            background-color: rgb(255, 255, 255);
+            opacity: 0.8;
+            text-align: center;
+            font-weight: bold;
+            padding: 2em;
+        }
+
+        #components-reconnect-modal.components-reconnect-hide {
+            display: none
+        }
+
+        #components-reconnect-modal.components-reconnect-show {
+            display: inherit
+        }
+    </style>
+</head>
+<body>
+    <app>
+        <component type="typeof(Microsoft.Tye.Hosting.Dashboard.App)" render-mode="ServerPrerendered" />
+    </app>
+
+    <div id="blazor-error-ui">
+        <environment include="Staging,Production">
+            An error has occurred. This application may no longer respond until reloaded.
+        </environment>
+        <environment include="Development">
+            An unhandled exception has occurred. See browser dev tools for details.
+        </environment>
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <div id="components-reconnect-modal" class="components-reconnect-hide">
+        <h1>Tye has exited.</h1>
+        <h2>It's now safe to close this browser window.</h2>
+    </div>
+
+    <script src="_framework/blazor.server.js"></script>
+</body>
+</html>