From 9cb165ce677f5432a3e6d1618485d2f400ab6d66 Mon Sep 17 00:00:00 2001
From: jvyden <jvyden@jvyden.xyz>
Date: Fri, 28 Jan 2022 15:26:18 -0500
Subject: [PATCH] Make slot cards not use inline css

---
 .../Pages/Partials/SlotCardPartial.cshtml     | 14 +++----
 ProjectLighthouse/StaticFiles/css/styles.css  | 40 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/ProjectLighthouse/Pages/Partials/SlotCardPartial.cshtml b/ProjectLighthouse/Pages/Partials/SlotCardPartial.cshtml
index 27ecbc10..182ee6c0 100644
--- a/ProjectLighthouse/Pages/Partials/SlotCardPartial.cshtml
+++ b/ProjectLighthouse/Pages/Partials/SlotCardPartial.cshtml
@@ -27,23 +27,23 @@
     string iconHash = Model.IconHash;
     if (string.IsNullOrWhiteSpace(iconHash) || iconHash.StartsWith('g')) iconHash = ServerSettings.Instance.MissingIconHash;
 }
-<div style="display: flex; width: 100%;">
-    <div style="margin-right: 10px; background-image: url('/gameAssets/@iconHash'); height: 100px; width: 100px; background-size: cover; background-position: center; border-radius: 100%;">
+<div class="slotCard">
+    <div class="slotCardIcon" style="background-image: url('/gameAssets/@iconHash');">
     </div>
-    <div style="height: fit-content; vertical-align: center; align-self: center">
+    <div class="slotCardStats">
         @if (showLink)
         {
-            <h2 style="margin-bottom: 2px;">
+            <h2>
                 <a href="~/slot/@Model.SlotId">@slotName</a>
             </h2>
         }
         else
         {
-            <h1 style="margin-bottom: 2px;">
+            <h1>
                 @slotName
             </h1>
         }
-        <div class="statsUnderTitle" style="margin-bottom: 10px;">
+        <div class="statsUnderTitle">
             <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>
@@ -59,7 +59,7 @@
             <i>Created by <a href="/user/@Model.Creator?.UserId">@Model.Creator?.Username</a> for @Model.GameVersion.ToPrettyString()</i>
         </p>
     </div>
-    <div style="height: 100px; margin-left: auto">
+    <div class="slotCardButtons">
         <br>
         @if (user != null)
         {
diff --git a/ProjectLighthouse/StaticFiles/css/styles.css b/ProjectLighthouse/StaticFiles/css/styles.css
index 18d37154..0c84d1c2 100644
--- a/ProjectLighthouse/StaticFiles/css/styles.css
+++ b/ProjectLighthouse/StaticFiles/css/styles.css
@@ -18,4 +18,42 @@ div.statsUnderTitle > span {
 
 #lighthouse-debug-info > p {
     margin-bottom: 1px;
-}
\ No newline at end of file
+}
+
+/*#region Slot cards*/
+
+.slotCard {
+    display: flex;
+    width: 100%;
+}
+
+.slotCardIcon {
+    margin-right: 10px;
+    height: 100px;
+    width: 100px;
+    background-size: cover;
+    background-position: center;
+    border-radius: 100%;
+}
+
+.slotCardStats {
+    height: fit-content;
+    vertical-align: center;
+    align-self: center
+}
+
+.slotCardStats > .statsUnderTitle {
+    margin-bottom: 10px;
+}
+
+.slotCardStats > h1,
+.slotCardStats > h2 {
+    margin-bottom: 2px;
+}
+
+.slotCardButtons {
+    height: 100px;
+    margin-left: auto;
+}
+
+/*#endregion Slot cards*/
\ No newline at end of file