fix: less shity ux for mobile home nav

This commit is contained in:
Matthieu Bessat 2020-08-17 16:32:02 +02:00
parent 6bf1956e4a
commit a8bed7c7de
3 changed files with 16 additions and 12 deletions

View file

@ -190,11 +190,11 @@ function enableTag(node) {
// close the menu if on mobile // close the menu if on mobile
if (navEnablerExists) { if (navEnablerExists) {
setTimeout(() => {
navOpened = !navOpened navOpened = !navOpened
closeMenu() closeMenu()
location.hash = "#nav-content" document.getElementsByClassName('content')[0].scrollIntoView(true)
}, 200) } else {
document.getElementsByClassName('up-footer')[0].scrollIntoView(true)
} }
} }

View file

@ -74,12 +74,14 @@
} }
.content { .content {
margin-top: 1.5em; padding-top: 1.5em;
display: flex; display: flex;
} }
/**
Nav
**/
.nav { .nav {
margin-right: 2em; margin-right: 2em;
@ -318,6 +320,7 @@
.content { .content {
display: block; display: block;
padding-top: 1em;
} }
.nav { .nav {
margin-right: 0; margin-right: 0;
@ -330,17 +333,17 @@
transform: rotate(-90deg) transform: rotate(-90deg)
} }
#nav-content { #nav-content {
overflow: hidden;
max-height: 0; max-height: 0;
transition: max-height 0.1s ease-out; transition: max-height 0.1s ease-out;
} }
.before-container {
overflow: hidden;
}
.nav-item { .nav-item {
width: auto; width: auto;
} }
.nav-item:hover {
transform: scale(1);
}
.nav-mobile-enabler #nav-enabler-icon { .nav-mobile-enabler #nav-enabler-icon {
transition: all 0.1s ease; transition: all 0.1s ease;
} }
@ -349,6 +352,7 @@
position: relative; position: relative;
border-top: 1px solid #C4C4C4; border-top: 1px solid #C4C4C4;
padding-top: 1em; padding-top: 1em;
margin-top: .3em;
} }
.mosaic-header { .mosaic-header {
text-align: center; text-align: center;

View file

@ -49,7 +49,7 @@ Github: https://github.com/lefuturiste
</div> </div>
</div> </div>
</div> </div>
<div class="before-container"> <div class="">
<div class="container"> <div class="container">
<div class="content"> <div class="content">
{% block content %}{% endblock %} {% block content %}{% endblock %}