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;
|
||||
font-size: 1.6em;
|
||||
line-height: 1.5em;
|
||||
margin-top: 4px;
|
||||
|
||||
&-toggle:checked ~ .header__menu {
|
||||
display: block;
|
||||
|
|
@ -185,6 +186,7 @@
|
|||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
order: 3;
|
||||
align-items: center;
|
||||
|
||||
&-toggle {
|
||||
display: none;
|
||||
|
|
@ -193,8 +195,7 @@
|
|||
@media (max-width: @site-mobile-width) {
|
||||
display: none;
|
||||
width: 100%;
|
||||
background: var(--header-accent-colour);
|
||||
font-size: 1.1em;
|
||||
margin-top: 4px;
|
||||
|
||||
&-toggle:checked ~ .header__user {
|
||||
display: flex;
|
||||
|
|
@ -204,6 +205,7 @@
|
|||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-left: 5px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
display: none;
|
||||
|
|
@ -212,7 +214,6 @@
|
|||
|
||||
&__info {
|
||||
padding: 1px;
|
||||
padding-right: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
|
@ -222,6 +223,8 @@
|
|||
padding: 0;
|
||||
display: block;
|
||||
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('
|
||||
SELECT
|
||||
u.`user_id`, u.`username`, u.`user_background_settings`,
|
||||
COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`
|
||||
FROM `msz_users` as u
|
||||
LEFT JOIN `msz_roles` as r
|
||||
COALESCE(u.`user_colour`, r.`role_colour`) AS `user_colour`
|
||||
FROM `msz_users` AS u
|
||||
LEFT JOIN `msz_roles` AS r
|
||||
ON u.`display_role` = r.`role_id`
|
||||
WHERE `user_id` = :user_id
|
||||
');
|
||||
|
|
@ -316,7 +316,8 @@ MIG;
|
|||
$userDisplayInfo = $getUserDisplayInfo->execute() ? $getUserDisplayInfo->fetch(\PDO::FETCH_ASSOC) : [];
|
||||
|
||||
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['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'}) }}
|
||||
<div class="header__user">
|
||||
{% if current_user is defined %}
|
||||
<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 %}
|
||||
{% set user_is_tester = current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) %}
|
||||
|
||||
<div class="header__user__info">
|
||||
{% if current_user is defined %}
|
||||
<a href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
|
||||
style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
|
||||
{{ current_user.username }}
|
||||
{% if current_user is defined %}
|
||||
<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');" title="{{ current_user.username }}"></a>
|
||||
|
||||
{% 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>
|
||||
{% else %}
|
||||
<a href="/auth.php?m=login" class="header__user__name">
|
||||
Guest
|
||||
|
||||
{% if has_manage_access %}
|
||||
{% 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>
|
||||
{% 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 %}
|
||||
<li class="header__user__action">
|
||||
<a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
|
||||
</li>
|
||||
<li class="header__user__action">
|
||||
<a class="header__user__link" href="/settings.php">Settings</a>
|
||||
</li>
|
||||
{% if has_manage_access %}
|
||||
<a href="/profile.php?u={{ current_user.user_id }}" class="header__user__name"
|
||||
style="{{ current_user.user_colour|html_colour }}" title="{{ current_user.username }}">
|
||||
{{ current_user.username }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/auth.php?m=login" class="header__user__name">
|
||||
Guest
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<ul class="header__user__actions">
|
||||
{% if current_user is defined %}
|
||||
<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 %}
|
||||
<a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
|
||||
</li>
|
||||
<li class="header__user__action">
|
||||
<a class="header__user__link" href="/settings.php">Settings</a>
|
||||
</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>
|
||||
{% 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>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue