Rename slotCard to Card and use in UserCardPartial

This commit is contained in:
jvyden 2022-01-28 15:59:00 -05:00
commit b13dea6306
No known key found for this signature in database
GPG key ID: 18BCF2BE0262B278
6 changed files with 62 additions and 31 deletions

View file

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

View file

@ -3,12 +3,16 @@
@{
bool showLink = (bool?)ViewData["ShowLink"] ?? false;
bool isMobile = (bool?)ViewData["IsMobile"] ?? false;
}
<div style="display: flex;">
<div style="margin-right: 10px; background-image: url('/gameAssets/@Model.WebsiteAvatarHash'); height: 100px; width: 100px; background-size: cover; background-position: center; border-radius: .28571429rem;">
<div class="card">
@{
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>

View file

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

View file

@ -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">

View file

@ -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>
}

View file

@ -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 {
margin-bottom: 10px;
}
.slotCardStats > h1,
.slotCardStats > h2 {
.cardStats > h1,
.cardStats > 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;
}
/*#endregion Slot cards*/
.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*/