Rim/IW4M-Admin
Rim/IW4M-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 30 Wiki Activity

finish initial rework of profile page

Browse Source
This commit is contained in:
RaidMax 2019-03-26 21:02:11 -05:00
parent 11e3235d5d
commit 1e2e2218e3
3 changed files with 48 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
WebfrontCore/Views/Client/Profile/Index.cshtml
View File

@ -6,30 +6,27 @@
string gravatarUrl = Model.Meta.FirstOrDefault(m => m.Key == "GravatarEmail")?.Value; string gravatarUrl = Model.Meta.FirstOrDefault(m => m.Key == "GravatarEmail")?.Value;
bool isTempBanned = Model.ActivePenaltyType == "TempBan"; bool isTempBanned = Model.ActivePenaltyType == "TempBan";
} }
<div class="row" style="background: white; height: 50px;"></div>
<div id="profile_wrapper" class="pb-3 row"> <div id="profile_wrapper" class="pb-3 row d-flex flex-column flex-lg-row">
<!-- Initial/Avatar Column --> <!-- Initial/Avatar Column -->
<div id="profile_avatar" class="col-12 col-lg-2 text-center level-bgcolor-@Model.LevelInt @(isTempBanned ? "penalties-bgcolor-tempban" : "")" style="background-image:url('@string.Format("https://gravatar.com/avatar/{0}?size=168&default=blank&rating=pg", gravatarUrl)')"> <div id="profile_avatar" class="d-block d-lg-inline-flex flex-column mr-auto ml-auto mr-lg-0 ml-lg-0 justify-content-center text-center level-bgcolor-@Model.LevelInt @(isTempBanned ? "penalties-bgcolor-tempban" : "")" style="background-image:url('@string.Format("https://gravatar.com/avatar/{0}?size=168&default=blank&rating=pg", gravatarUrl)')">
@if (string.IsNullOrEmpty(gravatarUrl)) @if (string.IsNullOrEmpty(gravatarUrl))
{ {
<span class="profile-shortcode">@shortCode</span> <span class="profile-shortcode">@shortCode</span>
} }
</div> </div>
<!-- Name/Level Column --> <!-- Name/Level Column -->
<div class="text-center text-lg-left col-12 col-lg-8"> <div class="d-block d-lg-inline-flex flex-column flex-fill text-center text-lg-left pb-3 pb-lg-0 pt-3 pt-lg-0 pl-3 pr-3">
<div class="d-block d-lg-inline-flex align-self-start"> <div class="mt-n2 flex-fill d-block d-lg-inline-flex">
<div id="profile_name" class="client-name h1 mb-0 mt-n2">@Model.Name</div> <div id="profile_name" class="client-name h1 mb-0">@Model.Name</div>
<br />
<br />
@if (ViewBag.Authorized) @if (ViewBag.Authorized)
{ {
<div id="profile_aliases_btn" class="oi oi-caret-bottom h3 ml-0 ml-lg-2 mb-0 mt-0 mt-lg-2 align-self-center"></div> <div id="profile_aliases_btn" class="oi oi-caret-bottom h3 ml-0 ml-lg-2 mb-0 pt-lg-2 mt-lg-1"></div>
} }
</div> </div>
@if (ViewBag.Authorized) @if (ViewBag.Authorized)
{ {
<div id="profile_aliases" class="text-muted mt-2 mb-2"> <div id="profile_aliases" class="text-muted pt-0 pt-lg-2 pb-2">
@foreach (var linked in Model.LinkedAccounts) @foreach (var linked in Model.LinkedAccounts)
{ {
@Html.ActionLink(linked.Value.ToString("X"), "ProfileAsync", "Client", new { id = linked.Key }, new { @class = "link-inverse" })<br /> @Html.ActionLink(linked.Value.ToString("X"), "ProfileAsync", "Client", new { id = linked.Key }, new { @class = "link-inverse" })<br />
@ -45,22 +42,13 @@
} }
</div> </div>
} }
<div id="profile_level" class="text-muted align-self-end"> <div id="profile_level" class="font-weight-bold h4 mb-0 level-color-@Model.LevelInt @(isTempBanned ? "penalties-color-tempban" : "")">
<h4 class="mb-0"> @Model.Level @(isTempBanned ? $"({loc["WEBFRONT_PROFILE_TEMPBAN"]})" : "")
<span class="level-color-@Model.LevelInt @(isTempBanned ? "penalties-color-tempban" : "")">
<strong>@Model.Level @(isTempBanned ? $"({loc["WEBFRONT_PROFILE_TEMPBAN"]})" : "")</strong>
</span>
</h4>
</div> </div>
</div> </div>
@if (ViewBag.Authorized) @if (ViewBag.Authorized)
{ {
<div class="col-12 col-lg-2 pr-lg-0 text-center text-lg-right"> <div class="pr-lg-0 text-center text-lg-right">
@if (Model.LevelInt != -1)
{
<div id="profile_action_edit_btn" class="profile-action oi oi-cog text-muted h3 ml-2" title="Client Options" data-action="edit" aria-hidden="true"></div>
}
@if (Model.LevelInt < (int)ViewBag.User.Level && !Model.HasActivePenalty) @if (Model.LevelInt < (int)ViewBag.User.Level && !Model.HasActivePenalty)
{ {
<div id="profile_action_ban_btn" class="profile-action oi oi-lock-unlocked text-success h3 ml-2" title="Ban Client" data-action="ban" aria-hidden="true"></div> <div id="profile_action_ban_btn" class="profile-action oi oi-lock-unlocked text-success h3 ml-2" title="Ban Client" data-action="ban" aria-hidden="true"></div>
@ -78,28 +66,33 @@
<div id="profile_action_unban_btn" class="profile-action oi oi-lock-locked text-danger h3 ml-2" title="Unban Client" data-action="unban" aria-hidden="true"></div> <div id="profile_action_unban_btn" class="profile-action oi oi-lock-locked text-danger h3 ml-2" title="Unban Client" data-action="unban" aria-hidden="true"></div>
} }
} }
</div>
@if (Model.LevelInt != -1)
{
<div id="profile_action_edit_btn" class="profile-action oi oi-cog text-muted h3 ml-2" title="Client Options" data-action="edit" aria-hidden="true"></div>
}
</div>
} }
</div>
@*<div id="profile_info" class="text-center text-md-left pr-md-3 pl-md-3"> <div id="profile_info" class="row d-block d-lg-flex flex-row border-bottom border-top pt-2 pb-2">
<div id="profile_meta_0" class="text-center text-lg-left mr-0 mr-lg-4">
<div id="profile_time_played" class="text-muted"> <div id="profile_time_played" class="text-muted">
@loc["WEBFRONT_PROFILE_PLAYER"] <span class="text-primary">@Model.TimePlayed</span> @loc["GLOBAL_TIME_HOURS"] @loc["WEBFRONT_PROFILE_PLAYER"] <span class="text-primary">@Model.TimePlayed</span> @loc["GLOBAL_TIME_HOURS"]
</div>
<div id="profile_first_seen" class="text-muted">
@loc["WEBFRONT_PROFILE_FSEEN"] <span class="text-primary">@Model.FirstSeen</span> @loc["WEBFRONT_PENALTY_TEMPLATE_AGO"]
</div>
<div id="profile_last_seen" class="text-muted">
@loc["WEBFRONT_PROFILE_LSEEN"] <span class="text-primary">@Model.LastSeen</span> @loc["WEBFRONT_PENALTY_TEMPLATE_AGO"]
</div>
<div id="profile_meta_0" class="text-center text-sm-left"></div>
</div> </div>
<div class="flex-fill mb-1 pl-md-3 pr-md-3 align-self-end text-center text-sm-left" id="profile_meta_1"> <div id="profile_first_seen" class="text-muted">
@loc["WEBFRONT_PROFILE_FSEEN"] <span class="text-primary">@Model.FirstSeen</span> @loc["WEBFRONT_PENALTY_TEMPLATE_AGO"]
</div> </div>
<div id="profile_last_seen" class="text-muted">
@loc["WEBFRONT_PROFILE_LSEEN"] <span class="text-primary">@Model.LastSeen</span> @loc["WEBFRONT_PENALTY_TEMPLATE_AGO"]
</div>
</div>
<div class="flex-fill text-center text-sm-right" id="profile_meta_2"> <div class="text-center text-lg-left mr-0 mr-lg-4" id="profile_meta_1">
</div>*@ </div>
<div class="text-center text-lg-left" id="profile_meta_2">
</div>
</div> </div>
<div class="row d-md-flex pt-2"> <div class="row d-md-flex pt-2">

8
WebfrontCore/wwwroot/css/profile.css
View File

@ -146,12 +146,12 @@
} }
#profile_avatar { #profile_avatar {
min-width: 8rem;
min-height: 8rem;
} }
.profile-shortcode { .profile-shortcode {
font-size: 5rem; font-size: 5rem;
line-height: 5rem;
color: white; color: white;
} }
@ -173,10 +173,6 @@
font-weight: bold; font-weight: bold;
} }
#profile_wrapper {
border-bottom: 2px rgb(0, 122, 204) solid;
}
.profile-action { .profile-action {
cursor: pointer; cursor: pointer;
} }

30
WebfrontCore/wwwroot/js/profile.js
View File

@ -52,14 +52,14 @@ $(document).ready(function () {
$.each(clientInfo.Meta, function (index, meta) { $.each(clientInfo.Meta, function (index, meta) {
if (!meta.key.includes("Event")) { if (!meta.key.includes("Event")) {
let metaString = `<div class="profile-meta-entry"><span class="profile-meta-value text-primary">${meta.value}</span><span class="profile-meta-title text-muted"> ${meta.key}</span></div>`; let metaString = `<div class="profile-meta-entry"><span class="profile-meta-value text-primary">${meta.value}</span><span class="profile-meta-title text-muted"> ${meta.key}</span></div>`;
if (metaIndex < 10) {
let selector = '#profile_meta_' + ((metaIndex % 2) + 1); // todo: fix the view so we don't have the 3 hardcoded meta
$(selector).append(metaString); if (metaIndex % 3 == 0 && metaIndex < 7) {
} metaIndex++;
else {
let selector = '#profile_meta_' + (metaIndex % 3);
$(selector).append(metaString);
} }
let selector = '#profile_meta_' + (metaIndex % 3);
$(selector).append(metaString);
metaIndex++; metaIndex++;
} }
}); });
@ -74,14 +74,14 @@ $(document).ready(function () {
'serverId': $(this).data('serverid'), 'serverId': $(this).data('serverid'),
'when': $(this).data('when') 'when': $(this).data('when')
}) })
.done(function (response) { .done(function (response) {
$('.client-message-context').remove(); $('.client-message-context').remove();
location.after(response); location.after(response);
hideLoader(); hideLoader();
}) })
.fail(function (jqxhr, textStatus, error) { .fail(function (jqxhr, textStatus, error) {
errorLoader(); errorLoader();
}); });
}); });
/* /*