Skip to content

M3P2 HTML Generator
M3P2 HTML Generator
Commit 60aed1e7 authored by Goutte's avatar Goutte
Browse files
Options

Rework the mobile navigation. 

It should now work on browsers with javascript disabled.
We're using a nifty checkbox hack.
parent 20de0e3e
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 25 deletions
user/themes/textbook/css/custom.css
View file @ 60aed1e7
......@@ -41,7 +41,8 @@ details summary {
/****/
/* Hotfix for https://github.com/getgrav/grav-theme-quark/issues/9 */
/* Must be below 3 or mobile will glitch */
/* Must be below 3 or mobile will glitch
*/
section#header { z-index: 2; }
/* Little patch for the language selector, to center it vertically. */
......@@ -84,18 +85,89 @@ iframe.geogebra {
border: 1px dotted #a6a6a6;
}
/** Fix Mobile Navigation **/
/** Fix Mobile Navigation -- OLD **/
.mobile-container ul.treemenu-root li span.toggler {
line-height: 2.22rem;
font-size: 2.22rem;
padding: 0.92rem 0.1rem;
margin: 0;
/*.mobile-container ul.treemenu-root li span.toggler {*/
/* line-height: 2.22rem;*/
/* font-size: 2.22rem;*/
/* padding: 0.92rem 0.1rem;*/
/* margin: 0;*/
/*}*/
/*.mobile-container ul.treemenu-root li a {*/
/* line-height: 2.22rem;*/
/* font-size: 2.22rem;*/
/* padding: 0.92rem 1.618rem;*/
/* margin: 0;*/
/*}*/
/** Mobile navigation without javascript ******************************************************************************/
/** We're using the checkbox hack. **/
.mobile-menu .button_container .top,
.mobile-menu .button_container .middle,
.mobile-menu .button_container .bottom
{
z-index: 3;
}
#mobile-navigation-toggle {
cursor: pointer;
width: 42px;
height: 42px;
position: absolute;
right: 0.8em;
top: 0.8em;
z-index: 200;
opacity: 0;
}
.mobile-menu .button_container:hover { opacity: .95; }
#mobile-navigation-toggle:checked ~ .mobile-menu .button_container { position: fixed; }
#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .top { transform: translateY(8px) translateX(0) rotate(45deg); background: #FFF; }
#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .middle { opacity: 0; background: #FFF; }
#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .bottom { transform: translateY(-8px) translateX(0) rotate(-45deg); background: #FFF; }
#mobile-navigation-toggle:checked ~ .mobile-menu .button_container .overlay {
visibility: visible;
height: 100%;
opacity: .95;
}
.mobile-container ul.treemenu-root li a {
line-height: 2.22rem;
font-size: 2.22rem;
padding: 0.92rem 1.618rem;
.mobile-menu details,
.mobile-menu ul {
text-align: left;
word-break: break-word;
line-height: 1.8rem;
font-size: 1.8rem;
padding: 0;
margin: 0;
}
.mobile-menu ul ul ul {
line-height: 1.4rem;
font-size: 1.4rem;
}
.mobile-menu li summary {
padding: .4em 0.05em .4em 0.4em;
}
.mobile-menu li > a {
padding: 0.2em 0 .2em 1.75em;
display: inline-block;
}
.mobile-menu ul {
padding-left: 0.33em;
list-style: none;
}
/**********************************************************************************************************************/
user/themes/textbook/templates/macros/macros-nav-details.html.twig 0 → 100644
View file @ 60aed1e7
{% macro nav_loop_as_details(page) %}
{% import _self as macros %}
{% for p in page.children.visible %}
{% set active_page = (p.active or p.activeChild) ? ' class="active"' : '' %}
{% if p.children.visible.count > 0 %}
<li>
<details>
<summary>
<a href="{{ p.url }}"{{ active_page }}>
{{ p.menu }}
</a>
</summary>
<ul>
{{ macros.nav_loop_as_details(p) }}
</ul>
</details>
</li>
{% else %}
<li>
<a href="{{ p.url }}"{{ active_page }}>
{{ p.menu }}
</a>
</li>
{% endif %}
{% endfor %}
{% endmacro %}
user/themes/textbook/templates/partials/base.html.twig
View file @ 60aed1e7
......@@ -28,8 +28,9 @@
{% block javascripts %}
{# TODO: ZEPTO JS PLS #}
{% do assets.addJs('jquery', 101) %}
{% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}
{% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}
{# Yes! We managed to remove all these crappy dependencies \o/ #}
{# {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}#}
{# {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}#}
{% endblock %}
{{ assets.js()|raw }}
......@@ -71,11 +72,32 @@
</nav>
</section>
</section>
<input id="mobile-navigation-toggle" type="checkbox">
<div class="mobile-menu">
<div class="button_container" id="toggle">
<div class="button_container" id="toggle" tabindex="0">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
<div class="mobile-container">
<div class="overlay" id="overlay">
<div class="mobile-logo">
{% include 'partials/logo.html.twig' with {mobile: true} %}
</div>
{# <div class="button_container mobile-close-nav" tabindex="1">#}
{# <span class="top"></span>#}
{# <span class="middle"></span>#}
{# <span class="bottom"></span>#}
{# </div>#}
<nav class="overlay-menu">
{# {% include 'partials/navigation.html.twig' with {tree: true} %}#}
{% include 'partials/navigation-as-details.html.twig' %}
</nav>
</div>
</div>
</div>
</div>
{% endblock %}
......@@ -100,17 +122,7 @@
{% block footer %}
{% include 'partials/footer.html.twig' %}
{% endblock %}
<div class="mobile-container">
<div class="overlay" id="overlay">
<div class="mobile-logo">
{% include 'partials/logo.html.twig' with {mobile: true} %}
</div>
<nav class="overlay-menu">
{% include 'partials/navigation.html.twig' with {tree: true} %}
</nav>
</div>
</div>
{% block bottom %}
{{ assets.js('bottom')|raw }}
......
user/themes/textbook/templates/partials/navigation-as-details.html.twig 0 → 100644
View file @ 60aed1e7
{% import 'macros/macros-nav-details.html.twig' as macros %}
<ul>
{{ macros.nav_loop_as_details(pages) }}
</ul>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment