Tweaked game list

Data/Models/BaseModel.cs

@@ -8,9 +8,13 @@ namespace LANCommander.Data.Models
         [Key]
         public Guid Id { get; set; }
 
+        [Display(Name = "Created On")]
         public DateTime CreatedOn { get; set; }
+        [Display(Name = "Created By")]
         public virtual User? CreatedBy { get; set; }
+        [Display(Name = "Updated On")]
         public DateTime UpdatedOn { get; set; }
+        [Display(Name = "Updated By")]
         public virtual User? UpdatedBy { get; set; }
     }
 }

Data/Models/Game.cs

@@ -7,9 +7,12 @@ namespace LANCommander.Data.Models
     public class Game : BaseModel
     {
         public string Title { get; set; }
+        [Display(Name = "Sort Title")]
         public string? SortTitle { get; set; }
+        [Display(Name = "Directory Name")]
         public string? DirectoryName { get; set; }
         public string Description { get; set; }
+        [Display(Name = "Released On")]
         public DateTime ReleasedOn { get; set; }
 
         public virtual ICollection<Tag>? Tags { get; set; }

Views/Games/Index.cshtml

@@ -1,15 +1,36 @@
 @model IEnumerable<LANCommander.Data.Models.Game>
 
 @{
-    ViewData["Title"] = "Index";
+    ViewData["Title"] = "Games";
 }
+<div class="container-xl">
+    <div class="page-header d-print-none">
+        <div class="row align-items-center">
+            <div class="col">
+                <h2 class="page-title">
+                    Games
+                </h2>
+            </div>
 
-<h1>Index</h1>
+            <div class="col-auto ms-auto">
+                <div class="btn-list">
+                    <a asp-action="Create" class="btn btn-primary d-none d-sm-inline-block">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        Create
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
-<p>
+<div class="page-body">
-    <a asp-action="Create">Create New</a>
+    <div class="container-xl">
-</p>
+        <div class="row row-cards">
-<table class="table">
+            <div class="col-12">
+                <div class="card">
+                    <div class="table-responsive">
+                        <table class="table table-vcenter table-mobile-md card-table">
                             <thead>
                                 <tr>
                                     <th>
@@ -39,8 +60,10 @@
                                     <th></th>
                                 </tr>
                             </thead>
+
                             <tbody>
-@foreach (var item in Model) {
+                                @foreach (var item in Model)
+                                {
                                     <tr>
                                         <td>
                                             @Html.DisplayFor(modelItem => item.Title)
@@ -67,11 +90,19 @@
                                             @Html.DisplayFor(modelItem => item.UpdatedBy.UserName)
                                         </td>
                                         <td>
-                <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
+                                            <div class="btn-list flex-nowrap">
-                <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
+                                                <a asp-action="Edit" asp-route-id="@item.Id" class="btn">Edit</a>
-                <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
+                                                <a asp-action="Details" asp-route-id="@item.Id" class="btn">Details</a>
+                                                <a asp-action="Delete" asp-route-id="@item.Id" class="btn">Delete</a>
+                                            </div>
                                         </td>
                                     </tr>
                                 }
                             </tbody>
                         </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

Views/Home/Index.cshtml

@@ -4,6 +4,7 @@
     ViewData["Title"] = "Home Page";
 }
 
+<div class="container-xl">
     <div class="page-header">
         <div class="row align-items-center">
             <div class="col">
@@ -12,6 +13,8 @@
             </div>
         </div>
     </div>
+</div>
+
 <div class="page-body">
     <div class="container-xl">
         <div class="row row-cards">

Views/Shared/_Layout.cshtml

@@ -51,10 +51,8 @@
 		</div>
 	</div>
     <div class="page-wrapper">
-        <div class="container-xl">
         @RenderBody()
     </div>
-    </div>
 
     <footer class="border-top footer text-muted">
         <div class="container">