aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add some JavaScript to open an close the mobile menu

Browse Source 
Fixes #75 but still works in Firefox mobile without JS (and it will in Chrome/Safari too
once :focus-within will be implemented there)
This commit is contained in:
Bat 2018-09-08 14:05:38 +01:00
parent 0f5f9101b6
commit 6c80002e43
3 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
static/css/main.css
View File

@ -803,7 +803,7 @@ figcaption {
}
}
header:focus-within #content {
header:focus-within #content, #content.show {
position: fixed;
display: flex;
flex-direction: column;
@ -817,7 +817,7 @@ figcaption {
animation: 0.2s menuOpening;
}
header:focus-within #content::before {
header:focus-within #content::before, #content.show::before {
content: "";
position: absolute;
transform: skewX(-10deg);
@ -830,11 +830,11 @@ figcaption {
background: #7765E3;
}
header:focus-within #content > nav {
header:focus-within #content > nav, #content.show > nav {
flex-direction: column;
align-items: flex-start;
}
header:focus-within #content > nav a {
header:focus-within #content > nav a, #content.show > nav a {
display: flex;
flex-direction: row;
align-items: center;
@ -844,19 +844,22 @@ figcaption {
font-size: 1.4em;
font-weight: 300;
}
header:focus-within #content > nav a > *:first-child { width: 3rem; }
header:focus-within #content > nav a > img:first-child { height: 3rem; }
header:focus-within #content > nav a > *:last-child { margin-left: 1rem; }
header:focus-within #content > nav a.title {
header:focus-within #content > nav a > *:first-child,
#content.show > nav a > *:first-child { width: 3rem; }
header:focus-within #content > nav a > img:first-child,
#content.show > nav a > img:first-child { height: 3rem; }
header:focus-within #content > nav a > *:last-child,
#content.show > nav a > *:last-child { margin-left: 1rem; }
header:focus-within #content > nav a.title, #content.show > nav a.title {
font-size: 1.8em;
}
header:focus-within #content > nav hr {
header:focus-within #content > nav hr, #content.show > nav hr {
display: block;
margin: 0;
width: 100%;
border: solid #F4F4F4 0.1rem;
}
header:focus-within #content > nav a .mobile-label {
header:focus-within #content > nav a .mobile-label, #content.show > nav a .mobile-label {
display: initial;
}

13
static/js/menu.js Normal file
View File

@ -0,0 +1,13 @@
// It should normally be working fine even without this code
// But :focus-within is not yet supported by Webkit/Blink
const button = document.getElementById('menu')
const menu = document.getElementById('content')
button.addEventListener('click', () => {
menu.classList.add('show')
})
menu.addEventListener('click', () => {
menu.classList.remove('show')
})

1
templates/base.html.tera
View File

@ -65,5 +65,6 @@
{% endif %}
{% endif %}
</footer>
<script src="/static/js/menu.js"></script>
</body>
</html>