Merge pull request #102 from gaetandezeiraud/bootstrap5

Migration to Bootstrap 5
edandersen · Mar 11, 2024 · 6748b38 · 6748b38
2 parents 9891ceb + 62f37a5
commit 6748b38
Show file tree

Hide file tree

Showing 51 changed files with 541 additions and 39,103 deletions.
diff --git a/src/DotNetEd.CoreAdmin.DemoAppDotNet6/Pages/Shared/_ValidationScriptsPartial.cshtml b/src/DotNetEd.CoreAdmin.DemoAppDotNet6/Pages/Shared/_ValidationScriptsPartial.cshtml
@@ -1,2 +1 @@
-<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
-<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
+
diff --git a/src/DotNetEd.CoreAdmin/DotNetEd.CoreAdmin.csproj b/src/DotNetEd.CoreAdmin/DotNetEd.CoreAdmin.csproj
@@ -46,7 +46,7 @@
 	<ItemGroup>
 		<PackageReference Condition="'$(TargetFramework)' == 'net6.0'" Include="Microsoft.EntityFrameworkCore" Version="6.0.0" />
 		<PackageReference Condition="'$(TargetFramework)' == 'net7.0'" Include="Microsoft.EntityFrameworkCore" Version="7.0.0" />
-		<PackageReference Include="NonFactors.Grid.Core.Mvc6" Version="7.1.0" />
+		<PackageReference Include="NonFactors.Grid.Core.Mvc6" Version="7.2.0" />
 	</ItemGroup>
 
 

diff --git a/src/DotNetEd.CoreAdmin/Translations/en-US.json b/src/DotNetEd.CoreAdmin/Translations/en-US.json
@@ -6,5 +6,8 @@
   "GoBack": "Go back",
   "Edit": "Edit",
   "Delete": "Delete",
-  "DeleteConfirm": "Are you sure you want to delete this?"
+  "DeleteConfirm": "Are you sure you want to delete this?",
+  "Auto": "Auto",
+  "Dark": "Dark",
+  "Light": "Light"
 }
diff --git a/src/DotNetEd.CoreAdmin/Translations/fr-FR.json b/src/DotNetEd.CoreAdmin/Translations/fr-FR.json
@@ -6,5 +6,8 @@
   "GoBack": "Retour",
   "Edit": "Modifier",
   "Delete": "Supprimer",
-  "DeleteConfirm": "Êtes-vous sûr de vouloir le supprimer ?"
+  "DeleteConfirm": "Êtes-vous sûr de vouloir le supprimer ?",
+  "Auto": "Auto",
+  "Dark": "Sombre",
+  "Light": "Clair"
 }
diff --git a/src/DotNetEd.CoreAdmin/Views/CoreAdminData/Create.cshtml b/src/DotNetEd.CoreAdmin/Views/CoreAdminData/Create.cshtml
@@ -6,7 +6,7 @@
     Layout = "_CoreAdminLayout";
 }
 
-<h1 class="display-4">@ViewBag.DbSetName - @_localizer["Create"]</h1>
+<h1 class="mt-3">@ViewBag.DbSetName - @_localizer["Create"]</h1>
 
 
 @using (Html.BeginForm("CreateEntityPost",
@@ -20,11 +20,9 @@ new { enctype = "multipart/form-data" }))
     @Html.EditorForModel("DefaultEntity")
 
     <div class="row">
-        <div class="col-md-12">
-            <button type="submit" class="btn btn-primary">@_localizer["Create"]</button>
-            <p class="mt-2">
+        <div class="col-md-12 my-3 text-end">
             @Html.ActionLink(_localizer["GoBack"], "Index", new { Id = ViewBag.DbSetName })
-            </p>
+            <button type="submit" class="btn btn-primary ms-3">@_localizer["Create"]</button>
         </div>
     </div>
 

diff --git a/src/DotNetEd.CoreAdmin/Views/CoreAdminData/DeleteEntity.cshtml b/src/DotNetEd.CoreAdmin/Views/CoreAdminData/DeleteEntity.cshtml
@@ -8,7 +8,7 @@
     Layout = "_CoreAdminLayout";
 }
 
-<h1 class="display-4">@_localizer["DeleteConfirm"]</h1>
+<h1 class="mt-3">@_localizer["DeleteConfirm"]</h1>
 
 <div class="row my-3">
     <div class="col-lg-12">
@@ -22,9 +22,10 @@
     @Html.HiddenFor(m => m.DbSetName)
     @Html.HiddenFor(m => m.Id)
 
-    <button type="submit" class="btn btn-primary">@_localizer["Delete"]</button>
-
-    @Html.ActionLink(_localizer["GoBack"], "Index", new {Id = Model.DbSetName})
+    <div class="col-md-12 my-3 text-end">
+        @Html.ActionLink(_localizer["GoBack"], "Index", new { Id = Model.DbSetName })
+        <button type="submit" class="btn btn-primary ms-3">@_localizer["Delete"]</button>
+    </div>
 }
 
 

diff --git a/src/DotNetEd.CoreAdmin/Views/CoreAdminData/Edit.cshtml b/src/DotNetEd.CoreAdmin/Views/CoreAdminData/Edit.cshtml
@@ -6,7 +6,7 @@
     Layout = "_CoreAdminLayout";
 }
 
-<h1 class="display-4">@ViewBag.DbSetName - @_localizer["Edit"]</h1>
+<h1 class="mt-3">@ViewBag.DbSetName - @_localizer["Edit"]</h1>
 
 
 @using (Html.BeginForm("EditEntityPost", 
@@ -22,11 +22,9 @@ new { enctype = "multipart/form-data" }))
     @Html.EditorForModel("DefaultEntity")
 
     <div class="row">
-        <div class="col-md-12">
-            <button type="submit" class="btn btn-primary">@_localizer["Edit"]</button>
-            <p class="mt-2">
+        <div class="col-md-12 my-3 text-end">
             @Html.ActionLink(@_localizer["GoBack"], "Index", new { Id = ViewBag.DbSetName })
-            </p>
+            <button type="submit" class="btn btn-primary ms-3">@_localizer["Edit"]</button>
         </div>
     </div>
 

diff --git a/src/DotNetEd.CoreAdmin/Views/CoreAdminData/Index.cshtml b/src/DotNetEd.CoreAdmin/Views/CoreAdminData/Index.cshtml
@@ -16,10 +16,10 @@
     var options = CoreAdminOptions.FirstOrDefault();
 }
 
-<h1 class="display-4">@Model.DbSetProperty.Name</h1>
+<h1 class="mt-3">@Model.DbSetProperty.Name</h1>
 
 <div class="row">
-    <div class="col-lg-12 my-3">
+    <div class="col-lg-12 my-3 text-end">
         @Html.ActionLink(_localizer["CreateNew"], "Create", new { id = Model.DbSetProperty.Name }, new { @class = "btn btn-primary"})
     </div>
 </div>
@@ -178,8 +178,8 @@
 @section Scripts
 {
      <script>
-           document.querySelectorAll(".mvc-grid").forEach(element => new MvcGrid(element));
-        </script>
+        document.querySelectorAll(".mvc-grid").forEach(element => new MvcGrid(element));
+     </script>
 }
 
 
diff --git a/src/DotNetEd.CoreAdmin/Views/Shared/Components/CoreAdminMenu/Default.cshtml b/src/DotNetEd.CoreAdmin/Views/Shared/Components/CoreAdminMenu/Default.cshtml
@@ -8,10 +8,16 @@
             </a>
 
         </li>
+    </ul>
+
+    <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
+        <span>Resources</span>
+    </h6>
+    <ul class="nav flex-column mb-auto">
         @foreach (var dbSetName in Model.DbSetNames)
         {
             <li class="nav-item">
-                <a class="nav-link text-break" title="@dbSetName" href="@Url.Action("Index", "CoreAdminData", new { Id = dbSetName })">
+                <a class="nav-link d-flex align-items-center gap-2" title="@dbSetName" href="@Url.Action("Index", "CoreAdminData", new { Id = dbSetName })">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
 
                     @dbSetName

diff --git a/src/DotNetEd.CoreAdmin/Views/Shared/Components/ThemeToggle.cshtml b/src/DotNetEd.CoreAdmin/Views/Shared/Components/ThemeToggle.cshtml
@@ -0,0 +1,45 @@
+@using DotNetEd.CoreAdmin
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<JsonLocalizer> _localizer
+<div class="dropdown position-fixed bottom-0 start-0 mb-3 ms-3 bd-mode-toggle">
+    <button class="btn btn-primary py-2 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown">
+        <svg class="bi my-1 theme-icon-active text-white" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"></svg>
+        <span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
+    </button>
+    <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text" style="">
+        <li>
+            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
+                <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <path fill="currentColor" d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/>
+                </svg>
+                @_localizer["Light"]
+                <svg class="bi ms-auto d-none" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                    <path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
+                </svg>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark" aria-pressed="true">
+                <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+                    <path fill="currentColor" d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" />
+                </svg>
+                @_localizer["Dark"]
+                <svg class="bi ms-auto d-none" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                    <path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
+                </svg>
+            </button>
+        </li>
+        <li>
+            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto" aria-pressed="false">
+                <svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                    <path fill="currentColor" d="M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z" />
+                </svg>
+
+                @_localizer["Auto"]
+                <svg class="bi ms-auto d-none" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                    <path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
+                </svg>
+            </button>
+        </li>
+    </ul>
+</div>
diff --git a/src/DotNetEd.CoreAdmin/Views/Shared/EditorTemplates/DefaultEntity.cshtml b/src/DotNetEd.CoreAdmin/Views/Shared/EditorTemplates/DefaultEntity.cshtml
@@ -35,7 +35,7 @@ else
 
         if (!relationships.Keys.Contains(prop.PropertyName))
         {
-            <div class="form-group row">
+            <div class="mb-3 row">
             @if (prop.HideSurroundingHtml)
             {
                 @Html.Editor(prop.PropertyName) 
@@ -55,7 +55,7 @@ else
         } 
         else
         {
-            <div class="form-group row">
+            <div class="mb-3 row">
             @if (prop.HideSurroundingHtml)
             {
                 @Html.DropDownList(prop.PropertyName, new SelectList(relationships[prop.PropertyName],"Key", "Value"), new {@class = "form-control"})

diff --git a/src/DotNetEd.CoreAdmin/Views/Shared/_CoreAdminLayout.cshtml b/src/DotNetEd.CoreAdmin/Views/Shared/_CoreAdminLayout.cshtml
@@ -25,28 +25,31 @@
 
     <meta name="color-scheme" content="light dark" />
 
-    <link rel="stylesheet" class="meta-css-dark" href="@assetsPath/css/bootstrap-dark.min.css" media="(prefers-color-scheme: dark)" />
-    <link rel="stylesheet" class="meta-css-light" href="@assetsPath/css/bootstrap.min.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />
-    <link rel="stylesheet" class="meta-css-dark" href="@assetsPath/css/mvc-grid/mvc-grid-dark.css" media="(prefers-color-scheme: dark)" />
-    <link rel="stylesheet" class="meta-css-light" href="@assetsPath/css/mvc-grid/mvc-grid.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />
-    <link rel="stylesheet" href="@assetsPath/css/easymde/easymde.min.css" />
-    <link rel="stylesheet" class="meta-css-dark" href="@assetsPath/css/easymde/easymde-dark.min.css" media="(prefers-color-scheme: dark)" />
-    <link rel="stylesheet" href="@assetsPath/css/jquery-ui.min.css" />
-    <link rel="stylesheet" href="@assetsPath/css/site.css" />
+    <link rel="stylesheet" href="@assetsPath/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="@assetsPath/css/mvc-grid/mvc-grid.css" />
+    <link rel="stylesheet" href="@assetsPath/css/mvc-grid/mvc-grid-dark.css" />
+    <link rel="stylesheet" href="@assetsPath/css/easymde/easymde.css" />
+    <link rel="stylesheet" href="@assetsPath/css/easymde/easymde-dark.css" />
+    <link rel="stylesheet" href="@assetsPath/css/style.css" />
+
+    <script src="@assetsPath/js/color-modes.js"></script>
 </head>
 <body>
+    <!-- Light / Dark theme toggle -->
+    @Html.Partial("~/Views/Shared/Components/ThemeToggle.cshtml")
+
     <!-- Navbar -->
     <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap justify-content-start p-0 py-3 shadow">
         <div class="navbar-brand sidebar-width">
-            <button id="sidebarToggle" class="navbar-toggler ml-2 collapsed" type="button">
+            <button id="sidebarToggle" class="navbar-toggler mx-2 collapsed" type="button">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <a class="mr-0 pl-1" href="@Url.Action("Index", "CoreAdmin")">@options?.Title</a>
         </div>
     </nav>
 
     <!-- Sidebar -->
-    <nav id="sidebar-wrapper" class="sidebar-width d-md-block bg-light sidebar sidebar-wrapper">
+    <nav id="sidebar-wrapper" class="sidebar-width d-md-block sidebar sidebar-wrapper border border-right bg-body-tertiary">
         <div class="sidebar-sticky pt-3">
             @await Component.InvokeAsync("CoreAdminMenu")
         </div>
@@ -73,13 +76,18 @@
         </div>
     </div>
 
-    <script src="@assetsPath/js/jquery.min.js"></script>
     <script src="@assetsPath/js/bootstrap.bundle.min.js"></script>
+    <script src="@assetsPath/js/aspnet-validation.min.js"></script>
+    <script>
+        var v = new aspnetValidation.ValidationService();
+        v.ValidationInputCssClassName = 'is-invalid';
+        //v.ValidationInputValidCssClassName = 'is-valid';
+        v.ValidationMessageCssClassName = 'invalid-feedback';
+        //v.ValidationMessageValidCssClassName = 'valid-feedback';
+        v.bootstrap();
+    </script>
     <script src="@assetsPath/js/mvc-grid/mvc-grid.js"></script>
-    <script src="@assetsPath/js/site.js" asp-append-version="true"></script>
-    <script src="@assetsPath/js/jquery.validate.js"></script>
-    <script src="@assetsPath/js/jquery.validate.unobtrusive.min.js"></script>
-    <script src="@assetsPath/js/jquery-ui.min.js"></script>
+    <script src="@assetsPath/js/navbar.js"></script>
 
     @RenderSection("Scripts", required: false)
 </body>
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
		<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>