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

Remount nav and footer, and sticky footer to the bottom.

Browse source
This commit is contained in:
flash 2018-08-14 22:03:35 +02:00
parent 1b1e53b377
commit e44bfb45f5
10 changed files with 123 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/less/mio/classes/container.less
View file

@ -4,7 +4,7 @@
margin: 2px 0;
box-shadow: 0 1px 2px #9475b2;
.mio--dark & {
.main--dark & {
background-color: #23172a;
}

1
assets/less/mio/classes/footer.less
View file

@ -1,4 +1,5 @@
.footer {
flex: 0 0 auto;
text-align: center;
font-size: .9em;
line-height: 1.5em;

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

@ -1,12 +1,19 @@
@mio-header-mobile: 700px;
.header {
display: flex;
align-items: center;
padding: 2px 0;
flex: 0 0 auto;
//background: linear-gradient(0deg, transparent, #c2affe) repeat-x;
@media (max-width: @mio-header-mobile) {
flex-direction: column;
&__wrapper {
margin: 0 auto;
display: flex;
align-items: center;
padding: 3px 1px;
max-width: @site-max-width;
@media (max-width: @mio-header-mobile) {
flex-direction: column;
}
}
@media (max-width: @mio-header-mobile) {

2
assets/less/mio/classes/input/select.less
View file

@ -9,7 +9,7 @@
}
}
.mio--dark .input__select {
.main--dark .input__select {
background: #111;
color: #fff;
}

2
assets/less/mio/classes/input/text.less
View file

@ -13,7 +13,7 @@
}
}
.mio--dark .input__text {
.main--dark .input__text {
background: #111;
color: #fff;
}

2
assets/less/mio/classes/input/textarea.less
View file

@ -10,7 +10,7 @@
}
}
.mio--dark .input__textarea {
.main--dark .input__textarea {
background: #111;
color: #fff;
}

2
assets/less/mio/classes/navigation.less
View file

@ -105,7 +105,7 @@
}
}
.mio--dark {
.main--dark {
.navigation,
.navigation__option {
border-color: #9475b2;

10
assets/less/mio/main.less
View file

@ -1,5 +1,6 @@
@mio-font-heading: Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
@site-max-width: 1200px;
* {
margin: 0;
@ -14,7 +15,9 @@ body {
height: 100%;
}
.mio {
.main {
display: flex;
flex-direction: column;
background-color: #fbeeff;
background-image: linear-gradient(180deg, #c2affe, transparent);
background-repeat: repeat-x;
@ -23,11 +26,12 @@ body {
color: #000;
&__wrapper {
max-width: 1200px;
max-width: @site-max-width;
margin: 0 auto;
padding: 1px;
flex: 1 0 auto;
@media (max-width: 1201px) {
@media (max-width: @site-max-width + 1) {
margin: 0 1px;
}
}

140
views/mio/_layout/header.twig
View file

@ -1,86 +1,88 @@
<nav class="header">
<div class="header__icons">
<label class="header__icon header__icon--menu" for="toggle-mobile-header-menu"></label>
<div class="header__wrapper">
<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>
<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>
<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__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">
<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="header__user__name"
style="{{ current_user.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}">
{{ current_user.username }}
</a>
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="header__user__name">
Guest
</a>
class="avatar header__user__avatar"
style="background-image:url('/profile.php?u=0&amp;m=avatar');"></a>
{% endif %}
<ul class="header__user__actions">
<div class="header__user__info">
{% 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>
<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 %}
<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>
<a href="/auth.php?m=login"
class="header__user__name">
Guest
</a>
{% endif %}
</ul>
<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>
</div>
</nav>

53
views/mio/master.twig
View file

@ -7,10 +7,10 @@
<link href="{{ '/css/mio.css'|asset_url }}" rel="stylesheet">
<link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
</head>
<body class="mio">
<div class="mio__wrapper">
{% include '_layout/header.twig' %}
<body class="main">
{% include '_layout/header.twig' %}
<div class="main__wrapper">
{% block content %}
<div class="container">
<div class="container__title">Hello!</div>
@ -19,30 +19,31 @@
</div>
</div>
{% endblock %}
<footer class="footer">
{% autoescape false %}
<div class="footer__copyright">
{{ 'https://flash.moe'|html_link('Flashwave', 'footer__copyright__link') }} 2013-{{
''|date('Y') }} /
{{ ('https://github.com/flashwave/misuzu/tree/' ~ git_branch())|html_link(git_branch(), 'footer__copyright__link') }}
# {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__copyright__link') }}
{% if query_count is defined %}
/ SQL Queries: {{ query_count|number_format }}
/ Took: {{ app.timeSinceStart|number_format(5) }} seconds
{% endif %}
</div>
<div class="footer__links">
{{ '#'|html_link('Rules', 'footer__links__link') }} |
{{ '#'|html_link('Contact', 'footer__links__link') }} |
{{ '#'|html_link('Status', 'footer__links__link') }} |
{{ '/changelog.php'|html_link('Changelog', 'footer__links__link') }} |
{{ 'https://twitter.com/flashiinet'|html_link('Twitter', 'footer__links__link') }}
</div>
{% endautoescape %}
</footer>
</div>
<footer class="footer">
{% autoescape false %}
<div class="footer__copyright">
{{ 'https://flash.moe'|html_link('Flashwave', 'footer__copyright__link') }} 2013-{{
''|date('Y') }} /
{{ ('https://github.com/flashwave/misuzu/tree/' ~ git_branch())|html_link(git_branch(), 'footer__copyright__link') }}
# {{ ('https://github.com/flashwave/misuzu/commit/' ~ git_commit_hash(true))|html_link(git_commit_hash(), 'footer__copyright__link') }}
{% if query_count is defined %}
/ SQL Queries: {{ query_count|number_format }}
/ Took: {{ app.timeSinceStart|number_format(5) }} seconds
{% endif %}
</div>
<div class="footer__links">
{{ '#'|html_link('Rules', 'footer__links__link') }} |
{{ '#'|html_link('Contact', 'footer__links__link') }} |
{{ '#'|html_link('Status', 'footer__links__link') }} |
{{ '/changelog.php'|html_link('Changelog', 'footer__links__link') }} |
{{ 'https://twitter.com/flashiinet'|html_link('Twitter', 'footer__links__link') }}
</div>
{% endautoescape %}
</footer>
<script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
<script>
window.addEventListener('load', () => {