From e696ac7e92858e988855c29a2320e2c0511f223f Mon Sep 17 00:00:00 2001
From: maliming <malimings@gmail.com>
Date: Thu, 3 Dec 2020 10:09:23 +0800
Subject: [PATCH] Update blazor in module.

---
 .../MyProjectNameBlazorHostModule.cs          |  2 +-
 .../wwwroot/index.html                        | 46 +++++++--------
 .../wwwroot/main.css                          | 58 ++++++++++++++-----
 3 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/MyProjectNameBlazorHostModule.cs b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/MyProjectNameBlazorHostModule.cs
index 0500609c9a..4e15ac4691 100644
--- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/MyProjectNameBlazorHostModule.cs
+++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/MyProjectNameBlazorHostModule.cs
@@ -76,7 +76,7 @@ namespace MyCompanyName.MyProjectName.Blazor.Host
 
         private static void ConfigureUI(WebAssemblyHostBuilder builder)
         {
-            builder.RootComponents.Add<App>("app");
+            builder.RootComponents.Add<App>("#ApplicationContainer");
         }
 
         private static void ConfigureHttpClient(ServiceConfigurationContext context, IWebAssemblyHostEnvironment environment)
diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html
index 99ab025095..a3f7d95c56 100644
--- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html
+++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/index.html
@@ -7,33 +7,33 @@
     <title>MyCompanyName.MyProjectName.Blazor</title>
     <base href="/" />
 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
-
-    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
-    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
-    <link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/theme.css" rel="stylesheet" />
-    <link href="main.css" rel="stylesheet" />
+    <!--ABP:Styles-->
+    <link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
+    <link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css" rel="stylesheet"/>
+    <link href="_content/Blazorise/blazorise.css" rel="stylesheet"/>
+    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet"/>
+    <link href="_content/Blazorise.Snackbar/blazorise.snackbar.css" rel="stylesheet"/>
+    <link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/flag-icon/css/flag-icon.css" rel="stylesheet"/>
+    <link href="_content/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/libs/abp/css/theme.css" rel="stylesheet"/>
+    <link href="main.css" rel="stylesheet"/>
+    <!--/ABP:Styles-->
 </head>
 
-<body>
-    <app>Loading...</app>
-
-    <div id="blazor-error-ui">
-        An unhandled error has occurred.
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
+<body class="abp-application-layout bg-light">
+<div id="ApplicationContainer">
+    <div class="spinner">
+        <div class="double-bounce1"></div>
+        <div class="double-bounce2"></div>
     </div>
-    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
-    <script src="_framework/blazor.webassembly.js"></script>
+</div>
 
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+<!--ABP:Scripts-->
+<script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly/libs/abp/js/abp.js"></script>
+<script src="_content/Blazorise/blazorise.js"></script>
+<script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
+<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
+<script src="_framework/blazor.webassembly.js"></script>
+<!--/ABP:Scripts-->
 
-    <script src="_content/Blazorise/blazorise.js"></script>
-    <script src="_content/Blazorise.Bootstrap/blazorise.bootstrap.js"></script>
-    <script src="_content/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/theme.js"></script>
 </body>
-
 </html>
diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/main.css b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/main.css
index 23e0f7a249..eb9395b846 100644
--- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/main.css
+++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.Blazor.Host/wwwroot/main.css
@@ -1,18 +1,48 @@
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+.spinner {
+    width: 40px;
+    height: 40px;
+    display: block;
     position: fixed;
-    width: 100%;
-    z-index: 1000;
+    top: calc( 50% - ( 40px / 2) );
+    right: calc( 50% - ( 40px / 2) );
 }
 
-#blazor-error-ui .dismiss {
-    cursor: pointer;
+.double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #333;
+    opacity: 0.6;
     position: absolute;
-    right: 0.75rem;
-    top: 0.5rem;
-}
\ No newline at end of file
+    top: 0;
+    left: 0;
+    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+}
+
+.double-bounce2 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+@-webkit-keyframes sk-bounce {
+    0%, 100% {
+        -webkit-transform: scale(0.0)
+    }
+
+    50% {
+        -webkit-transform: scale(1.0)
+    }
+}
+
+@keyframes sk-bounce {
+    0%, 100% {
+        transform: scale(0.0);
+        -webkit-transform: scale(0.0);
+    }
+
+    50% {
+        transform: scale(1.0);
+        -webkit-transform: scale(1.0);
+    }
+}