Merge pull request #1139 from Iceinfly/fix/bootstrap-5

Update several features and spacing
MCLD · Oct 23, 2024 · 6044294 · 6044294
2 parents 0cf7688 + fcf5602
commit 6044294
Show file tree

Hide file tree

Showing 133 changed files with 465 additions and 428 deletions.
diff --git a/docker-lock.json b/docker-lock.json
@@ -4,12 +4,12 @@
 			{
 				"name": "mcr.microsoft.com/dotnet/sdk",
 				"tag": "8.0",
-				"digest": "ff705b99a06144190e2638f8ede64a753915df5ea27fff55f58d0eb5f7054b0b"
+				"digest": "cab0284cce7bc26d41055d0ac5859a69a8b75d9a201cd226999f4f00cc983f13"
 			},
 			{
 				"name": "mcr.microsoft.com/dotnet/aspnet",
 				"tag": "8.0",
-				"digest": "b3cdb99fb356091b6395f3444d355da8ae5d63572ba777bed95b65848d6e02be"
+				"digest": "3ded9ccf06f222ec934311be4f9facda83d144331c028340e3a694733cad7d4b"
 			}
 		]
 	}

diff --git a/src/GRA.Controllers/GRA.Controllers.csproj b/src/GRA.Controllers/GRA.Controllers.csproj
@@ -43,7 +43,7 @@
     <PackageReference Include="AutoMapper" Version="13.0.1" />
     <PackageReference Include="CommonMark.NET" Version="0.15.1" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
-    <PackageReference Include="Serilog" Version="4.0.2" />
+    <PackageReference Include="Serilog" Version="4.1.0" />
     <PackageReference Include="SixLabors.ImageSharp" Version="3.1.5" />
     <PackageReference Include="System.ValueTuple" Version="4.5.0" />
   </ItemGroup>

diff --git a/src/GRA.Domain.Service/GRA.Domain.Service.csproj b/src/GRA.Domain.Service/GRA.Domain.Service.csproj
@@ -42,7 +42,7 @@
     <PackageReference Include="ExcelDataReader" Version="3.7.0" />
     <PackageReference Include="MailKit" Version="4.8.0" />
     <PackageReference Include="MimeKit" Version="4.8.0" />
-    <PackageReference Include="Serilog" Version="4.0.2" />
+    <PackageReference Include="Serilog" Version="4.1.0" />
     <PackageReference Include="SixLabors.ImageSharp" Version="3.1.5" />
     <PackageReference Include="Stubble.Core" Version="1.10.8" />
     <PackageReference Include="System.ValueTuple" Version="4.5.0" />

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Avatars/BundleDetail.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Avatars/BundleDetail.cshtml
@@ -10,7 +10,7 @@
 
     @if (Model.TriggersAwardingBundle?.Count > 0)
     {
-        <div class="list-group" style="padding-top:10px;" id="accordionTriggers" role="tablist" aria-multiselectable="true">
+        <div class="list-group pt-4" id="accordionTriggers" role="tablist" aria-multiselectable="true">
             <div class="card">
                 <div class="card-header" role="tab" id="headingTriggers">
                     <h4 class="card-title">
@@ -38,14 +38,14 @@
 
     @if (Model.Bundle?.HasBeenAwarded == true)
     {
-        <div class="row" style="padding: 10px 0;">
+        <div class="row pt-4">
             <div class="col-12">
                 <div style="font-size:large">This bundle has been awarded to a participant and can no longer be edited.</div>
             </div>
         </div>
     }
 
-    <div class="row" style="padding: 10px 0;">
+    <div class="row py-2">
         <div class="col-12">
             <label asp-for="Bundle.Name" class="col-form-label"></label>
             <input asp-for="Bundle.Name" class="form-control" disabled="@(Model.Bundle?.HasBeenAwarded == true ? "disabled" : null)" />
@@ -56,7 +56,7 @@
     <div class="row row-spacing">
         <div class="col-12">
             <label asp-for="Bundle.CanBeUnlocked" class="col-form-label">Bundle Type</label>
-            <select asp-for="Bundle.CanBeUnlocked" class="form-control" disabled="@(Model.Action == "Edit" ? "disabled" : null)">
+            <select asp-for="Bundle.CanBeUnlocked" class="form-select" disabled="@(Model.Action == "Edit" ? "disabled" : null)">
                 <option value="True">Unlockable</option>
                 <option value="False">Default</option>
             </select>
@@ -136,7 +136,7 @@
         </div>
     </div>
 
-    <div class="mb-3">
+    <div class="my-4">
         <a asp-action="Bundles" class="btn btn-outline-secondary">Return to List</a>
         @if (Model.Bundle?.HasBeenAwarded != true)
         {
@@ -175,7 +175,7 @@
                                         <label asp-for="Layers" class="col-form-label">Layer</label>
                                         <select id="layerId"
                                                 asp-items="Model.Layers"
-                                                class="form-control">
+                                                class="form-select">
                                             <option value="">All Layers</option>
                                         </select>
                                     </div>

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Avatars/Bundles.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Avatars/Bundles.cshtml
@@ -22,13 +22,13 @@
     </div>
 </div>
 
-<div class="row" style="padding: 10px 0;">
+<div class="row my-4">
     <div class="col-12">
         <a asp-action="BundleCreate" class="btn btn-outline-primary">Create a new bundle</a>
     </div>
 </div>
 
-<div class="row" style="padding: 10px 0;">
+<div class="row my-4">
     <div class="col-12">
         @if (Model.Bundles.Count() == 0)
         {

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Avatars/Index.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Avatars/Index.cshtml
@@ -4,7 +4,7 @@
     var invalid = Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid;
 }
 
-<div class="row" style="padding: 10px 0;">
+<div class="row my-4">
     <div class="col-12">
         @if (Model.Layers.Count() == 0)
         {
@@ -16,7 +16,7 @@
             {
                 <form asp-action="@nameof(AvatarsController.SetupAvatarZip)"
                       method="post"
-                      style="padding: 1em 0;">
+                      class="py-3">
                     <button type="submit" class="btn btn-outline-primary btn-spinner" button-spinner>
                         Import avatars.zip
                     </button>
@@ -26,7 +26,7 @@
             {
                 <form asp-action="@nameof(AvatarsController.SetupDefaultAvatars)"
                       method="post"
-                      style="padding: 1em 0;">
+                      class="py-3">
                     <button type="submit" class="btn btn-outline-primary btn-spinner" button-spinner>
                         Add default avatars
                     </button>

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Avatars/Layer.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Avatars/Layer.cshtml
@@ -1,12 +1,35 @@
 @model GRA.Controllers.ViewModel.MissionControl.Avatar.ItemsListViewModel
 
 <div class="row">
-    <div class="col-12">
-        <ul class="nav nav-pills" style="padding: 10px 0;">
-            <li class="@(!Model.Available && !Model.Unavailable && !Model.Unlockable ? "active" : null)"><a asp-route-search="@Model.Search">All</a></li>
-            <li class="@(Model.Available ? "active" : null)"><a asp-route-search="@Model.Search" asp-route-available="True">Available</a></li>
-            <li class="@(Model.Unavailable ? "active" : null)"><a asp-route-search="@Model.Search" asp-route-unavailable="True">Unavailable</a></li>
-            <li class="@(Model.Unlockable ? "active" : null)"><a asp-route-search="@Model.Search" asp-route-unlockable="True">Unlockable</a></li>
+    <div class="col-12 my-4">
+        <ul class="nav nav-pills flex-column flex-sm-row">
+            <li class="nav-item">
+                <a asp-route-search="@Model.Search" 
+                    class="nav-link @(!Model.Available && !Model.Unavailable && !Model.Unlockable ? "active" : "")">
+                    All
+                </a>
+             </li>
+            <li class="nav-item">
+                <a asp-route-search="@Model.Search" 
+                    asp-route-available="True"
+                    class="nav-link @(Model.Available ? "active" : "")">
+                    Available
+                </a>
+            </li>
+            <li class="nav-item">
+                <a asp-route-search="@Model.Search" 
+                    asp-route-unavailable="True"
+                    class="nav-link  @(Model.Unavailable ? "active" : "")">
+                    Unavailable
+                </a>
+            </li>
+            <li class="nav-item">
+                <a asp-route-search="@Model.Search" 
+                    asp-route-unlockable="True"
+                    class="nav-link  @(Model.Unlockable ? "active" : "")">
+                    Unlockable
+                </a>
+            </li>
         </ul>
     </div>
 </div>
@@ -15,19 +38,19 @@
     <input asp-for="Available" type="hidden" />
     <input asp-for="Unavailable" type="hidden" />
     <input asp-for="Unlockable" type="hidden" />
-    <div class="row row-spacing" style="padding-top: 10px;">
+    <div class="row row-spacing">
         <div class="col-8">
             <input name="Search" value="@Model.Search" class="form-control" />
         </div>
-        <div class="col-4">
+        <div class="col-4 mb-3">
             <input type="submit" value="Search" class="btn btn-outline-primary" style="margin-right: 8px;" />
             <a asp-action="Layer" asp-route-id="@Model.Id" class="btn btn-outline-secondary">Clear</a>
         </div>
     </div>
 </form>
 
 
-<div class="row" style="padding: 10px 0">
+<div class="row mb-2">
     <div class="col-12">
         <div class="row">
             <form asp-controller="Avatars" method="post" role="form">
@@ -39,29 +62,42 @@
                 <input name="PaginateModel.CurrentPage" value="@Model.PaginateModel.CurrentPage" type="hidden" />
                 @foreach (var item in Model.Items)
                 {
-                    <div class="col-4 col-sm-3 col-md-2" style="padding-top:10px; padding-bottom:20px; text-align:center;">
-                        <img src="~/@item.Thumbnail" class="img-fluid img-thumbnail" />
-                        <div style="height: 40px;">
+                    <div class="col-sm-3 mb-4" style="text-align: center;">
+                        <img src="~/@item.Thumbnail"
+                            class="img-fluid img-thumbnail" />
+                        <div class="mb-4">
                             @item.Name
                         </div>
-                        <button asp-action="@nameof(AvatarsController.DecreaseItemSort)" name="ItemId" value="@item.Id" class="btn btn-sm btn-outline-secondary" style="margin-right: 6px;" disabled="@(Model.PaginateModel.FirstPage == null && item == Model.Items.First() ? "disabled" : null)">
-                            <span class="fas fa-arrow-left fa-fw"></span>
+                        <div class="btn-toolbar justify-content-center">
+                        <button 
+                            asp-action="@nameof(AvatarsController.DecreaseItemSort)" 
+                            name="ItemId" value="@item.Id" 
+                            class="btn btn-sm btn-outline-secondary me-2" 
+                            disabled="@(Model.PaginateModel.FirstPage == null && item == Model.Items.First() ? "disabled" : null)">
+                            <span
+                                class="fas fa-arrow-left fa-fw">
+                            </span>
                         </button>
                         @if (item.Unlockable)
                         {
-                            <button asp-action="@nameof(AvatarsController.SetItemAvailable)" name="ItemId" value="@item.Id" class="btn btn-sm btn-outline-primary" style="margin: 0 3px;">
-                                <span class="fas fa-lock"></span>
+                            <button 
+                                asp-action="@nameof(AvatarsController.SetItemAvailable)" 
+                                name="ItemId" 
+                                value="@item.Id" 
+                                class="btn btn-sm btn-outline-primary me-2">
+                                <span 
+                                    class="fas fa-lock">
+                                </span>
                             </button>
                         }
                         else
                         {
-                            <button asp-action="@nameof(AvatarsController.SetItemUnlockable)" name="ItemId" value="@item.Id" class="btn btn-sm btn-outline-success" style="margin: 0 3px;">
+                            <button asp-action="@nameof(AvatarsController.SetItemUnlockable)" name="ItemId" value="@item.Id" class="btn btn-sm btn-outline-success me-2">
                                 <span class="fas fa-unlock-alt fa-fw"></span>
                             </button>
                         }
                         <button type="button"
                                 class="btn btn-outline-danger btn-sm"
-                                style="margin: 0 3px;"
                                 data-bs-toggle="modal"
                                 data-bs-target="#deleteModal"
                                 data-id="@item.Id"
@@ -71,6 +107,7 @@
                         <button asp-action="@nameof(AvatarsController.IncreaseItemSort)" name="ItemId" value="@item.Id" class="btn btn-sm btn-outline-secondary" style="margin-left: 6px;" disabled="@(Model.PaginateModel.LastPage == null && item == Model.Items.Last() ? "disabled" : null)">
                             <span class="fas fa-arrow-right fa-fw"></span>
                         </button>
+                        </div>
                     </div>
 
                 }

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Carousels/Index.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Carousels/Index.cshtml
@@ -22,13 +22,13 @@
     </div>
 </div>
 
-<div class="row" style="padding: 10px 0;">
+<div class="row mb-4">
     <div class="col-12">
         <a asp-action="Add" class="btn btn-outline-primary">Create a new dashboard carousel</a>
     </div>
 </div>
 
-<div class="row" style="padding: 10px 0;">
+<div class="row">
     <div class="col-12">
         @if (Model.Carousels.Count() == 0)
         {

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Categories/Index.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Categories/Index.cshtml
@@ -1,7 +1,7 @@
 @model GRA.Controllers.ViewModel.MissionControl.Categories.CategoryListViewModel
 
 <form asp-controller="Categories" asp-action="Index" method="get" role="form">
-    <div class="row row-spacing" style="padding-top: 10px;">
+    <div class="row row-spacing my-4">
         <div class="col-8">
             <input asp-for="Search" class="form-control" />
         </div>
@@ -12,15 +12,15 @@
     </div>
 </form>
 
-<div class="row" style="padding: 10px 0;">
+<div class="row mb-4">
     <div class="col-12">
         <a class="btn btn-outline-primary"
            data-bs-toggle="modal"
            data-bs-target="#addModal">Add a Category</a>
     </div>
 </div>
 
-<div class="row" style="padding: 10px 0;">
+<div class="row">
     <div class="col-12">
         @if (Model.Categories.Count() == 0)
         {
@@ -52,7 +52,7 @@
                                     <span class="label" style="background-color:@category.Color">@category.Name</span>
                                 </td>
                                 <td>
-                                    <div class="btn-group-sm">
+                                    <div class="btn-toolbar">
                                         <button type="button"
                                                 class="btn btn-outline-primary btn-sm"
                                                 data-bs-toggle="modal"

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Challenges/Create.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Challenges/Create.cshtml
@@ -46,7 +46,7 @@
             <select asp-for="Challenge.CategoryIds"
                     asp-items="Model.CategoryList"
                     autocomplete="off"
-                    class="form-control"
+                    class="form-select"
                     disabled="@(!Model.IgnorePointLimits && !string.IsNullOrEmpty(Model.MaxPointsWarningMessage) ? "disabled" : null)"
                     multiple="multiple"
                     size="1"></select>
@@ -66,7 +66,7 @@
             <label asp-for="Challenge.LimitToSystemId" class="col-form-label"></label>
             <select asp-for="Challenge.LimitToSystemId"
                     asp-items="Model.SystemList"
-                    class="form-control">
+                    class="form-select">
                 <option value="">No</option>
             </select>
             <span asp-validation-for="Challenge.LimitToSystemId" class="text-danger"></span>
@@ -78,7 +78,7 @@
             <label asp-for="Challenge.LimitToBranchId" class="col-form-label"></label>
             <select asp-for="Challenge.LimitToBranchId"
                     asp-items="Model.BranchList"
-                    class="form-control">
+                    class="form-select">
                 <option value="">No</option>
             </select>
             <span asp-validation-for="Challenge.LimitToBranchId" class="text-danger"></span>
@@ -90,7 +90,7 @@
             <label asp-for="Challenge.AssociatedProgramId" class="col-form-label"></label>
             <select asp-for="Challenge.AssociatedProgramId"
                     asp-items="Model.ProgramList"
-                    class="form-control">
+                    class="form-select">
                 <option value="">No</option>
             </select>
             <span asp-validation-for="Challenge.AssociatedProgramId" class="text-danger"></span>

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Challenges/Edit.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Challenges/Edit.cshtml
@@ -636,7 +636,7 @@
             <select asp-for="Challenge.CategoryIds"
                     asp-items="Model.CategoryList"
                     autocomplete="off"
-                    class="form-control"
+                    class="form-select"
                     disabled="@(!Model.IgnorePointLimits && !string.IsNullOrEmpty(Model.MaxPointsWarningMessage) ? "disabled" : null)"
                     multiple="multiple"
                     size="1"></select>
@@ -656,7 +656,7 @@
             <label asp-for="Challenge.LimitToSystemId" class="col-form-label"></label>
             <select asp-for="Challenge.LimitToSystemId"
                     asp-items="Model.SystemList"
-                    class="form-control"
+                    class="form-select"
                     disabled="@(!Model.IgnorePointLimits && !string.IsNullOrEmpty(Model.MaxPointsWarningMessage) ? "disabled" : null)">
                 <option value="">No</option>
             </select>
@@ -669,7 +669,7 @@
             <label asp-for="Challenge.LimitToBranchId" class="col-form-label"></label>
             <select asp-for="Challenge.LimitToBranchId"
                     asp-items="Model.BranchList"
-                    class="form-control"
+                    class="form-select"
                     disabled="@(!Model.IgnorePointLimits && !string.IsNullOrEmpty(Model.MaxPointsWarningMessage) ? "disabled" : null)">
                 <option value="">No</option>
             </select>
@@ -682,7 +682,7 @@
             <label asp-for="Challenge.AssociatedProgramId" class="col-form-label"></label>
             <select asp-for="Challenge.AssociatedProgramId"
                     asp-items="Model.ProgramList"
-                    class="form-control"
+                    class="form-select"
                     disabled="@(!Model.IgnorePointLimits && !string.IsNullOrEmpty(Model.MaxPointsWarningMessage) ? "disabled" : null)">
                 <option value="">No</option>
             </select>
@@ -960,7 +960,7 @@
          role="dialog"
          aria-labelledby="badgeModalLabel">
         <div class="modal-content">
-            <div class="modal-body" style="padding: 30px;">
+            <div class="modal-body py-6">
                 <span class="close frame-close fa-stack fa-lg gra-close-stack gra-close-stack-absolute"
                       data-bs-dismiss="modal"
                       alt="Close dialog."

diff --git a/src/GRA.Web/Areas/MissionControl/Views/Challenges/FeaturedDetails.cshtml b/src/GRA.Web/Areas/MissionControl/Views/Challenges/FeaturedDetails.cshtml
@@ -20,7 +20,7 @@
             </div>
             <div class="mb-3">
                 <label asp-for="FeaturedGroup.ChallengeGroupId" class="col-form-label"></label>
-                <select asp-for="FeaturedGroup.ChallengeGroupId" asp-items="Model.ChallengeGroupList" class="form-control">
+                <select asp-for="FeaturedGroup.ChallengeGroupId" asp-items="Model.ChallengeGroupList" class="form-select">
                     <option></option>
                 </select>
                 <span asp-validation-for="FeaturedGroup.ChallengeGroupId" class="text-danger"></span>