From 6c80002e4346b3eb485044bd8ba59a9119c9f6a7 Mon Sep 17 00:00:00 2001 From: Bat Date: Sat, 8 Sep 2018 14:05:38 +0100 Subject: [PATCH] Add some JavaScript to open an close the mobile menu Fixes #75 but still works in Firefox mobile without JS (and it will in Chrome/Safari too once :focus-within will be implemented there) --- static/css/main.css | 23 +++++++++++++---------- static/js/menu.js | 13 +++++++++++++ templates/base.html.tera | 1 + 3 files changed, 27 insertions(+), 10 deletions(-) create mode 100644 static/js/menu.js diff --git a/static/css/main.css b/static/css/main.css index 5514f8ad..29551e17 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -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; } diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 00000000..2dee2f39 --- /dev/null +++ b/static/js/menu.js @@ -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') +}) diff --git a/templates/base.html.tera b/templates/base.html.tera index 6825e736..db40f8d3 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -65,5 +65,6 @@ {% endif %} {% endif %} +