flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Started work on header redesign (tester-only for now).

Browse source
This commit is contained in:
flash 2019-01-12 21:43:51 +01:00
parent bd42ef8a66
commit b409a18a9d
6 changed files with 152 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
assets/less/classes/header.less
View file

@ -1,6 +1,21 @@
.header {
--header-height: 70px;
--header-image-px: 60px;
flex: 0 0 auto;
transition: height .2s;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 500;
&--new {
position: fixed;
}
&--floating {
--header-height: var(--header-height-floating);
--header-image-px: 40px;
}
&__background {
position: absolute;
@ -8,11 +23,11 @@
left: 0;
width: 100%;
height: 100%;
mask-image: linear-gradient(0deg, transparent 0, var(--background-colour) var(--header-height));
-webkit-mask-image: linear-gradient(0deg, transparent 0, var(--background-colour) var(--header-height));
background: var(--background-pattern);
background-color: var(--header-accent-colour);
background-blend-mode: multiply;
mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
}
&__wrapper {
@ -62,9 +77,10 @@
cursor: pointer;
display: block;
background: url('/images/logos/imouto-default.png') no-repeat center / cover;
width: 60px;
height: 60px;
width: var(--header-image-px);
height: var(--header-image-px);
font-size: 0;
transition: width .2s, height .2s;
&--manage {
background-image: url('/images/logos/imouto-broom.png');
@ -204,10 +220,10 @@
}
&__avatar {
width: 60px;
height: 60px;
width: var(--header-image-px);
height: var(--header-image-px);
margin-left: 5px;
transition: box-shadow .2s;
transition: box-shadow .2s, width .2s, height .2s;
box-shadow: 0 0 4px #111;
&:hover,
@ -226,14 +242,12 @@
color: inherit;
text-decoration: none;
font-size: 1.5em;
line-height: 1.7em;
line-height: 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .2s;
border-radius: 4px;
text-align: center;
&:hover,
&:focus {
@ -247,8 +261,21 @@
@media (max-width: @site-mobile-width) {
width: 40px;
height: 40px;
line-height: 40px;
font-size: 2em;
}
&__count {
position: absolute;
bottom: 1px;
right: 1px;
font-size: 10px;
background-color: var(--header-accent-colour);
opacity: .9;
border-radius: 4px;
line-height: 12px;
padding: 2px 4px;
}
}
}
}

3
assets/less/main.less
View file

@ -6,6 +6,8 @@
:root {
--site-max-width: 1200px;
--header-height: 70px;
--header-height-floating: 50px;
--background-image: initial;
@ -65,6 +67,7 @@ html {
width: 100%;
margin: 0 auto;
flex: 1 0 auto;
padding-top: var(--header-height);
}
&--bg-blend {

15
assets/typescript/misuzu.ts
View file

@ -7,7 +7,6 @@
/// <reference path="FormUtilities.ts" />
/// <reference path="UserRelations.ts" />
declare const timeago: any;
declare const hljs: any;
@ -44,6 +43,20 @@ window.addEventListener('load', () => {
}
commentsInit();
const siteHeader: HTMLDivElement = document.querySelector('.js-header');
if (siteHeader) {
const siteHeaderFloating: string = 'header--floating';
window.addEventListener('scroll', () => {
if (scrollY > 0 && !siteHeader.classList.contains(siteHeaderFloating)) {
siteHeader.classList.add(siteHeaderFloating);
} else if (scrollY <= 1 && siteHeader.classList.contains(siteHeaderFloating)) {
siteHeader.classList.remove(siteHeaderFloating);
}
});
}
});
function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void {

89
templates/_layout/header-old.twig Normal file
View file

@ -0,0 +1,89 @@
{% from '_layout/input.twig' import input_checkbox_raw %}
{% set in_manage = manage_menu is defined %}
<nav class="header">
<div class="header__background"></div>
<div class="header__wrapper">
<div class="header__icons">
<label class="header__icon header__icon--menu" for="toggle-mobile-header-menu">
<i class="fas fa-bars"></i>
</label>
<a class="header__logo{% if in_manage %} header__logo--manage{% endif %}" href="/">
{{ globals.site_name }}
</a>
<label style="background-image:url('/profile.php?u={{ current_user.user_id|default(0) }}&amp;m=avatar');"
class="avatar header__icon header__icon--user"
for="toggle-mobile-header-user"></label>
</div>
{# set user_is_tester = current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) #}
{{ input_checkbox_raw('', false, 'header__menu-toggle', '', false, {'id':'toggle-mobile-header-menu'}) }}
<ul class="header__menu">
<li class="header__menu__item">
<a href="/" class="header__menu__link">Home</a>
<ul class="header__submenu">
<li class="header__submenu__item"><a href="/members.php" class="header__submenu__link">Members</a></li>
<li class="header__submenu__item"><a href="/changelog.php" class="header__submenu__link">Changelog</a></li>
<li class="header__submenu__item"><a href="/info.php/contact" class="header__submenu__link">Contact</a></li>
<li class="header__submenu__item"><a href="/info.php/rules" class="header__submenu__link">Rules</a></li>
<li class="header__submenu__item"><a href="https://twitter.com/flashiinet" class="header__submenu__link">Twitter</a></li>
</ul>
</li>
<li class="header__menu__item"><a href="/news.php" class="header__menu__link">News</a></li>
<li class="header__menu__item">
<a href="/forum/" class="header__menu__link">Forum</a>
{#<ul class="header__submenu">
<li class="header__submenu__item"><a href="#" class="header__submenu__link">Unanswered Posts</a></li>
<li class="header__submenu__item"><a href="#" class="header__submenu__link">New Posts</a></li>
<li class="header__submenu__item"><a href="#" class="header__submenu__link">Your Posts</a></li>
</ul>#}
</li>
<li class="header__menu__item"><a href="https://chat.flashii.net" class="header__menu__link">Chat</a></li>
</ul>
{{ 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 }}" title="Profile" class="header__user__button">
<i class="fas fa-user fa-fw"></i>
</a>
<a href="/settings.php" title="Settings" class="header__user__button">
<i class="fas fa-cog fa-fw"></i>
</a>
{% 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="/auth.php?m=logout&amp;s={{ csrf_token('logout') }}" title="Log out" class="header__user__button">
<i class="fas fa-sign-out-alt fa-fw"></i>
</a>
<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 }}&amp;m=avatar');" title="{{ current_user.username }}"></a>
{% else %}
<a href="/auth.php?m=register" title="Register" class="header__user__button">
<i class="fas fa-user-plus fa-fw"></i>
</a>
<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=login" class="avatar header__user__avatar"
style="background-image:url('/profile.php?m=avatar');"></a>
{% endif %}
</div>
</div>
</nav>

4
templates/_layout/header.twig
View file

@ -1,7 +1,8 @@
{% from '_layout/input.twig' import input_checkbox_raw %}
{% set in_manage = manage_menu is defined %}
<nav class="header">
<nav class="header header--new js-header">
<div class="header__filler"></div>
<div class="header__background"></div>
<div class="header__wrapper">
<div class="header__icons">
@ -17,7 +18,6 @@
class="avatar header__icon header__icon--user"
for="toggle-mobile-header-user"></label>
</div>
{# set user_is_tester = current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) #}
{{ input_checkbox_raw('', false, 'header__menu-toggle', '', false, {'id':'toggle-mobile-header-menu'}) }}
<ul class="header__menu">

6
templates/master.twig
View file

@ -19,7 +19,11 @@
<body class="main{% if site_background is defined %} {{ site_background.settings|bg_settings('main--bg-%s')|join(' ') }}{% endif %}"
style="{% if global_accent_colour is defined %}{{ global_accent_colour|html_colour('--accent-colour') }}{% endif %}">
{% include '_layout/header.twig' %}
{% if current_user.general_perms|default(0)|perms_check(constant('MSZ_PERM_GENERAL_TESTER')) %}
{% include '_layout/header.twig' %}
{% else %}
{% include '_layout/header-old.twig' %}
{% endif %}
<div class="main__wrapper">
{% if current_user.ban_expiration|default(0) > 0 or current_user.silence_expiration|default(0) > 0 %}