Added experimental user navigation bar.
This commit is contained in:
parent
a118d84a59
commit
727e13b03b
3 changed files with 122 additions and 50 deletions
|
|
@ -92,6 +92,7 @@
|
||||||
display: none;
|
display: none;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
|
margin-top: 4px;
|
||||||
|
|
||||||
&-toggle:checked ~ .header__menu {
|
&-toggle:checked ~ .header__menu {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -185,6 +186,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
order: 3;
|
order: 3;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&-toggle {
|
&-toggle {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -193,8 +195,7 @@
|
||||||
@media (max-width: @site-mobile-width) {
|
@media (max-width: @site-mobile-width) {
|
||||||
display: none;
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: var(--header-accent-colour);
|
margin-top: 4px;
|
||||||
font-size: 1.1em;
|
|
||||||
|
|
||||||
&-toggle:checked ~ .header__user {
|
&-toggle:checked ~ .header__user {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -204,6 +205,7 @@
|
||||||
&__avatar {
|
&__avatar {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
|
margin-left: 5px;
|
||||||
|
|
||||||
@media (max-width: @site-mobile-width) {
|
@media (max-width: @site-mobile-width) {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -212,7 +214,6 @@
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
padding-right: 5px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
|
|
@ -222,6 +223,8 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background: var(--header-accent-colour);
|
||||||
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -301,5 +304,35 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
margin: 2px;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 1.7em;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background-color .2s;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background-color: fade(#fff, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background-color: fade(#fff, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @site-mobile-width) {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -306,9 +306,9 @@ MIG;
|
||||||
$getUserDisplayInfo = db_prepare('
|
$getUserDisplayInfo = db_prepare('
|
||||||
SELECT
|
SELECT
|
||||||
u.`user_id`, u.`username`, u.`user_background_settings`,
|
u.`user_id`, u.`username`, u.`user_background_settings`,
|
||||||
COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`
|
COALESCE(u.`user_colour`, r.`role_colour`) AS `user_colour`
|
||||||
FROM `msz_users` as u
|
FROM `msz_users` AS u
|
||||||
LEFT JOIN `msz_roles` as r
|
LEFT JOIN `msz_roles` AS r
|
||||||
ON u.`display_role` = r.`role_id`
|
ON u.`display_role` = r.`role_id`
|
||||||
WHERE `user_id` = :user_id
|
WHERE `user_id` = :user_id
|
||||||
');
|
');
|
||||||
|
|
@ -316,7 +316,8 @@ MIG;
|
||||||
$userDisplayInfo = $getUserDisplayInfo->execute() ? $getUserDisplayInfo->fetch(\PDO::FETCH_ASSOC) : [];
|
$userDisplayInfo = $getUserDisplayInfo->execute() ? $getUserDisplayInfo->fetch(\PDO::FETCH_ASSOC) : [];
|
||||||
|
|
||||||
if ($userDisplayInfo) {
|
if ($userDisplayInfo) {
|
||||||
$userDisplayInfo['comments_perms'] = perms_get_user(MSZ_PERMS_COMMENTS, $mszUserId);
|
$userDisplayInfo['general_perms'] = perms_get_user(MSZ_PERMS_GENERAL, $userDisplayInfo['user_id']);
|
||||||
|
$userDisplayInfo['comments_perms'] = perms_get_user(MSZ_PERMS_COMMENTS, $userDisplayInfo['user_id']);
|
||||||
$userDisplayInfo['ban_expiration'] = user_warning_check_expiration($userDisplayInfo['user_id'], MSZ_WARN_BAN);
|
$userDisplayInfo['ban_expiration'] = user_warning_check_expiration($userDisplayInfo['user_id'], MSZ_WARN_BAN);
|
||||||
$userDisplayInfo['silence_expiration'] = $userDisplayInfo['ban_expiration'] > 0 ? 0 : user_warning_check_expiration($userDisplayInfo['user_id'], MSZ_WARN_SILENCE);
|
$userDisplayInfo['silence_expiration'] = $userDisplayInfo['ban_expiration'] > 0 ? 0 : user_warning_check_expiration($userDisplayInfo['user_id'], MSZ_WARN_SILENCE);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -44,58 +44,96 @@
|
||||||
|
|
||||||
{{ input_checkbox_raw('', false, 'header__user-toggle', '', false, {'id':'toggle-mobile-header-user'}) }}
|
{{ input_checkbox_raw('', false, 'header__user-toggle', '', false, {'id':'toggle-mobile-header-user'}) }}
|
||||||
<div class="header__user">
|
<div class="header__user">
|
||||||
{% if current_user is defined %}
|
{% set user_is_tester = current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) %}
|
||||||
<a href="/profile.php?u={{ current_user.user_id }}"
|
|
||||||
class="avatar header__user__avatar"
|
|
||||||
style="background-image:url('/profile.php?u={{ current_user.user_id }}&m=avatar');"></a>
|
|
||||||
{% else %}
|
|
||||||
<a href="/auth.php?m=login"
|
|
||||||
class="avatar header__user__avatar"
|
|
||||||
style="background-image:url('/profile.php?u=0&m=avatar');"></a>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="header__user__info">
|
{% if current_user is defined %}
|
||||||
{% if current_user is defined %}
|
<a href="/profile.php?u={{ current_user.user_id }}" class="avatar header__user__avatar"
|
||||||
<a href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
|
style="background-image:url('/profile.php?u={{ current_user.user_id }}&m=avatar');" title="{{ current_user.username }}"></a>
|
||||||
style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
|
|
||||||
{{ current_user.username }}
|
{% if user_is_tester %}
|
||||||
|
<a href="/auth.php?m=logout&s={{ csrf_token('logout') }}" title="Log out" class="header__user__button">
|
||||||
|
<i class="fas fa-sign-out-alt fa-fw"></i>
|
||||||
</a>
|
</a>
|
||||||
{% else %}
|
|
||||||
<a href="/auth.php?m=login" class="header__user__name">
|
{% if has_manage_access %}
|
||||||
Guest
|
{% if in_manage %}
|
||||||
|
<a href="{{ site_link|default('/') }}" title="Return to the Site" class="header__user__button">
|
||||||
|
<i class="fas fa-door-open fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<a href="{{ manage_link|default('/manage/index.php') }}" title="Enter Manage" class="header__user__button">
|
||||||
|
<i class="fas fa-door-closed fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<a href="/settings.php" title="Settings" class="header__user__button">
|
||||||
|
<i class="fas fa-cog fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/profile.php?u={{ current_user.user_id }}" title="Profile" class="header__user__button">
|
||||||
|
<i class="fas fa-user fa-fw"></i>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
<a href="/auth.php?m=login" class="avatar header__user__avatar"
|
||||||
|
style="background-image:url('/profile.php?m=avatar');"></a>
|
||||||
|
|
||||||
<ul class="header__user__actions">
|
{% if user_is_tester %}
|
||||||
|
<a href="/auth.php?m=login" title="Log in" class="header__user__button">
|
||||||
|
<i class="fas fa-sign-in-alt fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="/auth.php?m=register" title="Register" class="header__user__button">
|
||||||
|
<i class="fas fa-user-plus fa-fw"></i>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if not user_is_tester %}
|
||||||
|
<div class="header__user__info">
|
||||||
{% if current_user is defined %}
|
{% if current_user is defined %}
|
||||||
<li class="header__user__action">
|
<a href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
|
||||||
<a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
|
style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
|
||||||
</li>
|
{{ current_user.username }}
|
||||||
<li class="header__user__action">
|
</a>
|
||||||
<a class="header__user__link" href="/settings.php">Settings</a>
|
{% else %}
|
||||||
</li>
|
<a href="/auth.php?m=login" class="header__user__name">
|
||||||
{% if has_manage_access %}
|
Guest
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<ul class="header__user__actions">
|
||||||
|
{% if current_user is defined %}
|
||||||
<li class="header__user__action">
|
<li class="header__user__action">
|
||||||
{% if in_manage %}
|
<a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
|
||||||
<a class="header__user__link" href="{{ site_link|default('/') }}">Return</a>
|
</li>
|
||||||
{% else %}
|
<li class="header__user__action">
|
||||||
<a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a>
|
<a class="header__user__link" href="/settings.php">Settings</a>
|
||||||
{% endif %}
|
</li>
|
||||||
|
{% if has_manage_access %}
|
||||||
|
<li class="header__user__action">
|
||||||
|
{% if in_manage %}
|
||||||
|
<a class="header__user__link" href="{{ site_link|default('/') }}">Return</a>
|
||||||
|
{% else %}
|
||||||
|
<a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
<li class="header__user__action">
|
||||||
|
<a class="header__user__link" href="/auth.php?m=logout&s={{ csrf_token('logout') }}">Log out</a>
|
||||||
|
</li>
|
||||||
|
{% else %}
|
||||||
|
<li class="header__user__action">
|
||||||
|
<a class="header__user__link" href="/auth.php?m=login">Log in</a>
|
||||||
|
</li>
|
||||||
|
<li class="header__user__action">
|
||||||
|
<a class="header__user__link" href="/auth.php?m=register">Register</a>
|
||||||
</li>
|
</li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="header__user__action">
|
</ul>
|
||||||
<a class="header__user__link" href="/auth.php?m=logout&s={{ csrf_token('logout') }}">Log out</a>
|
</div>
|
||||||
</li>
|
{% endif %}
|
||||||
{% else %}
|
|
||||||
<li class="header__user__action">
|
|
||||||
<a class="header__user__link" href="/auth.php?m=login">Log in</a>
|
|
||||||
</li>
|
|
||||||
<li class="header__user__action">
|
|
||||||
<a class="header__user__link" href="/auth.php?m=register">Register</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue