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