Make slot cards not use inline css

This commit is contained in:
jvyden 2022-01-28 15:26:18 -05:00
commit 9cb165ce67
No known key found for this signature in database
GPG key ID: 18BCF2BE0262B278
2 changed files with 46 additions and 8 deletions

View file

@ -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)
{

View file

@ -18,4 +18,42 @@ div.statsUnderTitle > span {
#lighthouse-debug-info > p {
margin-bottom: 1px;
}
}
/*#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*/