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

Revising the navigation menu a bit, mobile is in-progress.

Browse source
This commit is contained in:
flash 2018-08-12 20:49:21 +02:00
parent 1c5a64ac71
commit 92f3cba259
20 changed files with 298 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

253
assets/less/mio/classes/header.less
View file

@ -2,90 +2,233 @@
.header {
display: flex;
margin: 4px 0;
align-items: center;
padding: 2px 0;
@media (max-width: @mio-header-mobile) {
flex-direction: column;
align-items: center;
}
&__logo {
flex-grow: 0;
flex-shrink: 0;
&__link {
color: inherit;
text-decoration: none;
cursor: pointer;
display: block;
}
&__image {
vertical-align: bottom;
@media (max-width: @mio-header-mobile) {
max-width: 200px;
max-height: 100px;
margin-bottom: 4px;
}
}
}
&__menu {
flex-grow: 1;
flex-shrink: 1;
display: flex;
align-items: flex-start;
justify-content: flex-end;
@media (max-width: @mio-header-mobile) {
@media (max-width: @mio-header-mobile) {
&__icons {
display: flex;
justify-content: space-between;
width: 100%;
}
}
&__user {
border: 1px solid #9475b2;
display: inline-block;
&__icon {
display: none;
cursor: pointer;
width: 40px;
height: 40px;
&__content {
margin: 2px;
display: flex;
&--menu {
background-image: url('https://static.flash.moe/images/mobile-menu.png');
background-size: 40px;
}
@media (max-width: @mio-header-mobile) {
display: block;
}
}
&__logo {
flex: 0 0 auto;
color: inherit;
text-decoration: none;
cursor: pointer;
display: block;
background: url('https://static.flash.moe/images/imouto-transparent.png') no-repeat center / cover;
width: 60px;
height: 60px;
font-size: 0;
@media (max-width: @mio-header-mobile) {
width: 40px;
height: 40px;
}
}
&__menu {
flex: 1 1 auto;
margin: 0 6px;
font-family: @mio-font-heading;
list-style: none;
display: flex;
@media (max-width: @mio-header-mobile) {
display: none;
font-size: 1.6em;
line-height: 1.5em;
}
&-toggle {
display: none;
&:checked ~ .header__menu {
display: block;
}
}
@media (max-width: @mio-header-mobile) {
width: 100%;
&__item {
background: #c2affe;
&:not(:last-child) {
border-bottom: 1px solid #9475b2;
}
}
&__link {
width: 100%;
display: block;
padding: 4px 8px;
color: inherit;
text-decoration: none;
}
}
@media (min-width: @mio-header-mobile) {
&__item {
text-align: center;
transition: background-color .2s;
&:hover {
background-color: #c2affe;
.header__submenu {
transform: scaleY(1);
}
}
}
&__link {
font-size: 1.2em;
color: inherit;
text-decoration: none;
display: block;
padding: 6px 4px;
min-width: 100px;
cursor: pointer;
}
}
}
&__submenu {
list-style: none;
display: block;
@media (max-width: @mio-header-mobile) {
&__link {
padding: 2px 16px;
display: block;
width: 100%;
color: inherit;
text-decoration: none;
}
}
@media (min-width: @mio-header-mobile) {
position: absolute; // floating
transform: scaleY(0);
transform-origin: center top 0;
background: #c2affe;
overflow: hidden;
z-index: 100;
text-align: left;
box-shadow: 0 1px 2px #9475b2;
transition: transform .2s;
&:hover {
transform: scaleY(1);
}
&__link {
color: inherit;
text-decoration: none;
display: block;
padding: 2px 6px;
min-width: 100px;
}
}
}
&__user {
flex: 0 0 auto;
display: flex;
flex-direction: row-reverse;
order: 3;
@media (max-width: @mio-header-mobile) {
display: none;
}
&-toggle {
display: none;
&:checked ~ .header__user {
display: flex;
}
}
&__avatar {
width: 60px;
height: 60px;
}
&__links {
text-align: right;
list-style: none;
margin: 0 2px;
line-height: 1.5em;
&__container {
flex-grow: 1;
}
@media (max-width: @mio-header-mobile) {
font-size: 1.5em;
display: none;
}
}
&__link {
&__info {
padding: 1px;
margin-right: 4px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
&__name {
color: inherit;
font-size: 1.4em;
line-height: 1.4em;
font-family: @mio-font-heading;
text-decoration: none;
display: block;
min-width: 70px;
display: inline-flex;
align-items: flex-end;
justify-content: right;
&:hover {
text-decoration: underline;
}
}
@media (max-width: @mio-header-mobile) {
width: 100%;
margin: 0;
&__actions {
display: flex;
flex-wrap: wrap;
justify-content: right;
list-style: none;
max-width: 100px;
font-size: .9em;
line-height: 1.4em;
}
&__action {
padding-left: 6px;
}
&__link {
color: inherit;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
}

4
assets/less/mio/classes/input/button.less
View file

@ -27,11 +27,11 @@
}
&:hover {
background-color: #A586c3;
background-color: #a586c3;
}
&:active {
background-color: #8364a1;
background-color: #c2affe;
}
}
}

86
views/mio/_layout/header.twig Normal file
View file

@ -0,0 +1,86 @@
<nav class="header">
<div class="header__icons">
<label class="header__icon header__icon--menu" for="toggle-mobile-header-menu"></label>
<a class="header__logo" href="/">
{{ globals.site_name }}
</a>
<label style="background-image:url('/profile.php?u={{ app.hasActiveSession ? current_user.user_id : 0 }}&amp;m=avatar');"
class="avatar header__icon header__icon--user"
for="toggle-mobile-header-user"></label>
</div>
<input type="checkbox" class="header__menu-toggle" 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="/changelog.php" class="header__submenu__link">Changelog</a></li>
<li class="header__submenu__item"><a href="/info.php?t=contact" class="header__submenu__link">Contact</a></li>
<li class="header__submenu__item"><a href="/info.php?t=rules" class="header__submenu__link">Rules</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></li>
<li class="header__menu__item"><a href="https://chat.flashii.net" class="header__menu__link">Chat</a></li>
<li class="header__menu__item"><a href="/members.php" class="header__menu__link">Members</a></li>
</ul>
<input type="checkbox" class="header__user-toggle" id="toggle-mobile-header-user">
<div class="header__user">
{% if app.hasActiveSession %}
<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');"></a>
{% else %}
<a href="/auth.php?m=login"
class="avatar header__user__avatar"
style="background-image:url('/profile.php?u=0&amp;m=avatar');"></a>
{% endif %}
<div class="header__user__info">
{% if app.hasActiveSession %}
<a href="/profile.php?u={{ current_user.user_id }}"
class="header__user__name"
style="{{ current_user.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}">
{{ current_user.username }}
</a>
{% else %}
<a href="/auth.php?m=login"
class="header__user__name">
Guest
</a>
{% endif %}
<ul class="header__user__actions">
{% if app.hasActiveSession %}
<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 %}
<li class="header__user__action">
<a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a>
</li>
{% endif %}
<li class="header__user__action">
<a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">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>
</div>
</nav>

3
views/mio/changelog/change.twig
View file

@ -1,5 +1,4 @@
{% extends '@mio/changelog/master.twig' %}
{% from '@mio/macros.twig' import navigation %}
{% from '@mio/_layout/comments.twig' import comments_section %}
{% set is_valid = change|length > 0 %}
@ -105,6 +104,4 @@
{{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
</div>
{% endif %}
{{ navigation(mio_navigation) }}
{% endblock %}

4
views/mio/changelog/index.twig
View file

@ -1,5 +1,5 @@
{% extends '@mio/changelog/master.twig' %}
{% from '@mio/macros.twig' import navigation, pagination %}
{% from '@mio/macros.twig' import pagination %}
{% from '@mio/changelog/macros.twig' import changelog_listing %}
{% from '@mio/_layout/comments.twig' import comments_section %}
@ -46,6 +46,4 @@
{{ comments_section(comments, comments_category, current_user|default(null), comments_perms) }}
</div>
{% endif %}
{{ navigation(mio_navigation) }}
{% endblock %}

3
views/mio/errors/master.twig
View file

@ -1,5 +1,4 @@
{% extends '@mio/master.twig' %}
{% from '@mio/macros.twig' import navigation %}
{% block content %}
<div class="container">
@ -18,8 +17,6 @@
</div>
</div>
{{ navigation(mio_navigation) }}
{% if error_code|default(0) >= 500 %}
<audio autoplay>
<source src="https://static.flash.moe/sounds/wbrb.ogg" type="audio/ogg">

4
views/mio/forum/forum.twig
View file

@ -1,5 +1,5 @@
{% extends '@mio/forum/master.twig' %}
{% from '@mio/macros.twig' import navigation, pagination %}
{% from '@mio/macros.twig' import pagination %}
{% from '@mio/forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons %}
{% set title = forum_info.forum_name %}
@ -30,6 +30,4 @@
{{ fcpagination }}
{{ fcbuttons }}
{% endif %}
{{ navigation(mio_navigation, '/forum/') }}
{% endblock %}

3
views/mio/forum/index.twig
View file

@ -1,5 +1,4 @@
{% extends '@mio/forum/master.twig' %}
{% from '@mio/macros.twig' import navigation %}
{% from '@mio/forum/macros.twig' import forum_category_listing %}
{% set title = 'Forum Listing' %}
@ -30,6 +29,4 @@
</div>
</div>
{% endif %}
{{ navigation(mio_navigation, '/forum/') }}
{% endblock %}

1
views/mio/forum/posting.twig
View file

@ -15,5 +15,4 @@
{% block content %}
{{ navigation(posting_breadcrumbs, posting_breadcrumbs|last, true, null, 'left') }}
{{ forum_posting_form(form_title, form_target_id, posting_topic is defined) }}
{{ navigation(mio_navigation, '/forum/') }}
{% endblock %}

2
views/mio/forum/topic.twig
View file

@ -51,6 +51,4 @@
});
</script>
{% endif %}
{{ navigation(mio_navigation, '/forum/') }}
{% endblock %}

3
views/mio/home/index.twig
View file

@ -1,5 +1,4 @@
{% extends '@mio/home/master.twig' %}
{% from '@mio/macros.twig' import navigation %}
{% from '@mio/news/macros.twig' import news_preview %}
{% from '@mio/changelog/macros.twig' import changelog_listing %}
@ -48,8 +47,6 @@
</div>
</div>
{{ navigation(mio_navigation, '/') }}
{% if embed_linked_data is defined and embed_linked_data %}
<script type="application/ld+json">
{

44
views/mio/master.twig
View file

@ -1,13 +1,3 @@
{% from '@mio/macros.twig' import navigation %}
{% set mio_navigation = {
'Home': '/',
'News': '/news.php',
'Forum': '/forum/',
'Chat': 'https://chat.flashii.net',
'Members': '/members.php',
} %}
<!doctype html>
<html>
<head>
@ -19,37 +9,7 @@
</head>
<body class="mio">
<div class="mio__wrapper">
<nav class="header">
<div class="header__logo">
<a href="/" class="header__logo__link">
<img class="header__logo__image" src="https://static.flash.moe/logos/logo-exo.png" alt="Flashii">
</a>
</div>
<div class="header__menu">
{% if app.hasActiveSession %}
<div class="container header__user">
<div class="container__title">Hey, {{ current_user.username }}!</div>
<div class="header__user__content">
<a href="/settings.php?m=images" class="avatar header__user__avatar" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');"></a>
<div class="header__user__links__container">
<ul class="header__user__links">
<li class="header__user__option"><a class="header__user__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a></li>
<li class="header__user__option"><a class="header__user__link" href="/settings.php">Settings</a></li>
{% if has_manage_access %}
<li class="header__user__option"><a class="header__user__link" href="{{ manage_link|default('/manage/index.php') }}">Manage</a></li>
{% endif %}
<li class="header__user__option"><a class="header__user__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a></li>
</ul>
</div>
</div>
</div>
{% else %}
<a href="/auth.php" class="input__button">Login/Register</a>
{% endif %}
</div>
</nav>
{% include '_layout/header.twig' %}
{% block content %}
<div class="container">
@ -58,8 +18,6 @@
This page has no content!
</div>
</div>
{{ navigation(mio_navigation) }}
{% endblock %}
<footer class="footer">

2
views/mio/news/category.twig
View file

@ -8,7 +8,7 @@
'o': posts_offset,
}) %}
{% block news_content %}
{% block content %}
<div class="container news__container">
<div class="container__title news__container__title">News » {{ category.category_name }}</div>
<div class="news__container__content">

2
views/mio/news/index.twig
View file

@ -5,7 +5,7 @@
{% set title = 'News' %}
{% set canonical_url = '/news.php'|url_construct({'o':posts_offset}) %}
{% block news_content %}
{% block content %}
<div class="container news__container">
<div class="container__title news__container__title">News</div>
<div class="news__container__content">

14
views/mio/news/master.twig
View file

@ -1,15 +1 @@
{% extends '@mio/master.twig' %}
{% from '@mio/macros.twig' import navigation %}
{% block content %}
{% block news_content %}
<div class="container">
<div class="container__title">News!</div>
<div class="container__content">
<p>Welcome to News, the news is still heavily in development. You can follow us on News where we'll post news every so often, we'll also announce when the news is ready for public use there!</p>
</div>
</div>
{% endblock %}
{{ navigation(mio_navigation, '/news.php') }}
{% endblock %}

2
views/mio/news/post.twig
View file

@ -4,7 +4,7 @@
{% set title = post.post_title ~ ' :: News' %}
{% set canonical_url = '/news.php?p=' ~ post.post_id %}
{% block news_content %}
{% block content %}
<div class="container news__post">
<div class="container__title">
<a href="/news.php?c={{ post.category_id }}" class="container__title__link">{{ post.category_name }}</a> »

2
views/mio/settings/master.twig
View file

@ -29,6 +29,4 @@
</div>
{% endblock %}
{% endblock %}
{{ navigation(mio_navigation) }}
{% endblock %}

3
views/mio/user/listing.twig
View file

@ -1,5 +1,5 @@
{% extends '@mio/user/master.twig' %}
{% from '@mio/macros.twig' import navigation, pagination %}
{% from '@mio/macros.twig' import pagination %}
{% set canonical_url = '/members.php'|url_construct({
'r': role.role_id != 1 ? role.role_id : 0,
@ -131,5 +131,4 @@
</div>
{{ pagination(role.role_user_count, users_take, users_offset, full_url) }}
{{ navigation(mio_navigation, '/members.php') }}
{% endblock %}

3
views/mio/user/notfound.twig
View file

@ -1,5 +1,4 @@
{% extends '@mio/user/master.twig' %}
{% from '@mio/macros.twig' import navigation %}
{% set title = 'User not found!' %}
@ -10,6 +9,4 @@
<p>Check the url and try again.</p>
</div>
</div>
{{ navigation(mio_navigation, false) }}
{% endblock %}

7
views/mio/user/view.twig
View file

@ -64,9 +64,12 @@
} %}
{% block content %}
{{ navigation(mio_navigation, false, true) }}
{# navigation({
(profile.username): 'profile',
'Comments': 'comments',
}, 'profile', true, '#%s') #}
<div class="profile">
<div class="profile" id="profile">
<div class="container profile__header">
<div class="container__title">Profile of {{ profile.username }}</div>
<div class="profile__header__content">