From b409a18a9d4e96328719bd2e7a20d763ffc054cb Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Sat, 12 Jan 2019 21:43:51 +0100
Subject: [PATCH] Started work on header redesign (tester-only for now).

---
 assets/less/classes/header.less   | 51 +++++++++++++-----
 assets/less/main.less             |  3 ++
 assets/typescript/misuzu.ts       | 15 +++++-
 templates/_layout/header-old.twig | 89 +++++++++++++++++++++++++++++++
 templates/_layout/header.twig     |  4 +-
 templates/master.twig             |  6 ++-
 6 files changed, 152 insertions(+), 16 deletions(-)
 create mode 100644 templates/_layout/header-old.twig

diff --git a/assets/less/classes/header.less b/assets/less/classes/header.less
index b0304961..e167c24a 100644
--- a/assets/less/classes/header.less
+++ b/assets/less/classes/header.less
@@ -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;
+            }
         }
     }
 }
diff --git a/assets/less/main.less b/assets/less/main.less
index ea054932..f76c7e2e 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -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 {
diff --git a/assets/typescript/misuzu.ts b/assets/typescript/misuzu.ts
index ed2fadb5..6043ca6e 100644
--- a/assets/typescript/misuzu.ts
+++ b/assets/typescript/misuzu.ts
@@ -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 {
diff --git a/templates/_layout/header-old.twig b/templates/_layout/header-old.twig
new file mode 100644
index 00000000..9cceb620
--- /dev/null
+++ b/templates/_layout/header-old.twig
@@ -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>
diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig
index 9cceb620..e254a238 100644
--- a/templates/_layout/header.twig
+++ b/templates/_layout/header.twig
@@ -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">
diff --git a/templates/master.twig b/templates/master.twig
index 85d9a783..6ae46972 100644
--- a/templates/master.twig
+++ b/templates/master.twig
@@ -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 %}