Rename slotCard to Card and use in UserCardPartial

ProjectLighthouse/Pages/Partials/SlotCardPartial.cshtml

@@ -28,13 +28,13 @@
     string iconHash = Model.IconHash;
     if (string.IsNullOrWhiteSpace(iconHash) || iconHash.StartsWith('g')) iconHash = ServerSettings.Instance.MissingIconHash;
 }
-<div class="slotCard">
+<div class="card">
     @{
         int size = isMobile ? 50 : 100;
     }
-    <div class="slotCardIcon" style="background-image: url('/gameAssets/@iconHash'); min-width: @(size)px; width: @(size)px; height: @(size)px">
+    <div class="cardIcon slotCardIcon" style="background-image: url('/gameAssets/@iconHash'); min-width: @(size)px; width: @(size)px; height: @(size)px">
     </div>
-    <div class="slotCardStats">
+    <div class="cardStats">
         @if (showLink)
         {
             <h2>
@@ -47,7 +47,7 @@
                 @slotName
             </h1>
         }
-        <div class="statsUnderTitle">
+        <div class="cardStatsUnderTitle">
             <i class="pink heart icon" title="Hearts"></i> <span>@Model.Hearts</span>
             <i class="blue play icon" title="Plays"></i> <span>@Model.Plays</span>
             <i class="green thumbs up icon" title="Yays"></i> <span>@Model.Thumbsup</span>
@@ -63,7 +63,7 @@
             <i>Created by <a href="/user/@Model.Creator?.UserId">@Model.Creator?.Username</a> for @Model.GameVersion.ToPrettyString()</i>
         </p>
     </div>
-    <div class="slotCardButtons">
+    <div class="cardButtons">
         <br>
         @if (user != null)
         {

ProjectLighthouse/Pages/Partials/UserCardPartial.cshtml

@@ -3,12 +3,16 @@
 
 @{
     bool showLink = (bool?)ViewData["ShowLink"] ?? false;
+    bool isMobile = (bool?)ViewData["IsMobile"] ?? false;
 }
 
-<div style="display: flex;">
+<div class="card">
-    <div style="margin-right: 10px; background-image: url('/gameAssets/@Model.WebsiteAvatarHash'); height: 100px; width: 100px; background-size: cover; background-position: center; border-radius: .28571429rem;">
+    @{
+        int size = isMobile ? 50 : 100;
+    }
+    <div class="cardIcon userCardIcon" style="background-image: url('/gameAssets/@Model.WebsiteAvatarHash'); min-width: @(size)px; width: @(size)px; height: @(size)px">
     </div>
-    <div style="height: fit-content; vertical-align: center; align-self: center">
+    <div class="cardStats">
         @if (showLink)
         {
             <h2 style="margin-bottom: 2px;">
@@ -24,7 +28,7 @@
         <p>
             <i>@Model.Status</i>
         </p>
-        <div class="statsUnderTitle">
+        <div class="cardStatsUnderTitle">
             <i class="pink heart icon" title="Hearts"></i> <span>@Model.Hearts</span>
             <i class="blue comment icon" title="Comments"></i> <span>@Model.Comments</span>
             <i class="green upload icon" title="Uploaded Levels"></i><span>@Model.UsedSlots / @ServerSettings.Instance.EntitledSlots</span>

ProjectLighthouse/Pages/SlotsPage.cshtml

@@ -12,6 +12,7 @@
 
 @foreach (Slot slot in Model.Slots)
 {
+    bool isMobile = Model.Request.IsMobile();
     <div class="ui segment">
         @await Html.PartialAsync("Partials/SlotCardPartial", slot, new ViewDataDictionary(ViewData)
         {
@@ -25,7 +26,7 @@
                 "ShowLink", true
             },
             {
-                "IsMobile", Model.Request.IsMobile()
+                "IsMobile", isMobile
             },
         })
     </div>

ProjectLighthouse/Pages/UserPage.cshtml

@@ -1,6 +1,7 @@
 @page "/user/{userId:int}"
 @using System.IO
 @using System.Web
+@using LBPUnion.ProjectLighthouse.Helpers.Extensions
 @using LBPUnion.ProjectLighthouse.Types
 @using LBPUnion.ProjectLighthouse.Types.Profiles
 @model LBPUnion.ProjectLighthouse.Pages.UserPage
@@ -43,6 +44,9 @@
             {
                 "ShowLink", false
             },
+            {
+                "IsMobile", Model.Request.IsMobile()
+            },
         })
     </div>
     <div class="eight wide right aligned column">

ProjectLighthouse/Pages/UsersPage.cshtml

@@ -1,4 +1,5 @@
 @page "/users/{pageNumber:int}"
+@using LBPUnion.ProjectLighthouse.Helpers.Extensions
 @using LBPUnion.ProjectLighthouse.Types
 @model LBPUnion.ProjectLighthouse.Pages.UsersPage
 
@@ -11,12 +12,16 @@
 
 @foreach (User user in Model.Users)
 {
+    bool isMobile = Model.Request.IsMobile();
     <div class="ui segment">
         @await Html.PartialAsync("Partials/UserCardPartial", user, new ViewDataDictionary(ViewData)
         {
             {
                 "ShowLink", true
             },
+            {
+                "IsMobile", isMobile
+            },
         })
     </div>
 }

ProjectLighthouse/StaticFiles/css/styles.css

@@ -8,48 +8,36 @@ div.main {
     flex: 1;
 }
 
-div.statsUnderTitle > i {
-    margin-right: 2px;
-}
-
-div.statsUnderTitle > span {
-    margin-right: 5px;
-}
-
 #lighthouse-debug-info > p {
     margin-bottom: 1px;
 }
 
-/*#region Slot cards*/
+/*#region Cards*/
 
-.slotCard {
+.card {
     display: flex;
     width: 100%;
 }
 
-.slotCardIcon {
+.cardIcon {
     margin-right: 10px;
     background-size: cover;
     background-position: center;
     border-radius: 100%;
 }
 
-.slotCardStats {
+.cardStats {
     height: fit-content;
     vertical-align: center;
     align-self: center
 }
 
-.slotCardStats > .statsUnderTitle {
+.cardStats > h1,
-    margin-bottom: 10px;
+.cardStats > h2 {
-}
-
-.slotCardStats > h1,
-.slotCardStats > h2 {
     margin-bottom: 2px;
 }
 
-.slotCardButtons {
+.cardButtons {
     height: 100px;
     display: flex;
     flex-direction: column;
@@ -57,9 +45,38 @@ div.statsUnderTitle > span {
     margin-left: auto;
 }
 
-.slotCardButtons > a {
+.cardButtons > a {
     margin-bottom: 5px !important;
     vertical-align: center;
 }
 
+.cardStatsUnderTitle {
+    margin-bottom: 10px;
+}
+
+div.cardStatsUnderTitle > i {
+    margin-right: 2px;
+}
+
+div.cardStatsUnderTitle > span {
+    margin-right: 5px;
+}
+
+/*#region Slot cards*/
+
+.slotCardIcon {
+    border-radius: 100%;
+}
+
 /*#endregion Slot cards*/
+
+/*#region User cards*/
+
+.userCardIcon {
+    border-radius: .28571429rem;
+}
+
+
+/*#endregion User cards*/
+
+/*#endregion Cards*/