portugalfuturista/elixir
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: Fix mobile sidebar close with backdrop click

Browse source
This commit is contained in:
Franciszek Stachura 2024-09-20 15:11:39 +02:00
parent 1aa74c4dc9
commit 32141d8e96
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/script.js
View file

@ -77,8 +77,7 @@ var openMenu = document.querySelector('.open-menu')
var wrapper = document.querySelector('.wrapper')
openMenu.onclick = tag.onclick = function (e) {
e.preventDefault();
const isWidescreen = getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
if(isWidescreen) {
if (isWidescreen()) {
const hasShowMenu = document.documentElement.classList.contains('show-menu');
window.localStorage.setItem('show-sidebar', !hasShowMenu);
document.documentElement.classList.toggle('show-menu');
@ -87,10 +86,10 @@ openMenu.onclick = tag.onclick = function (e) {
}
}
sidebar.onclick = function (e) {
if (e.target === this) {
if (e.target === this && isWidescreen()) {
document.documentElement.classList.remove('show-menu');
window.localStorage.setItem('show-sidebar', false);
} else if (e.target.classList.contains('close-menu')) {
} else if (e.target === this || e.target.classList.contains('close-menu')) {
document.documentElement.classList.remove('show-menu-mobile');
}
}

9
templates/layout.html
View file

@ -21,11 +21,14 @@
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
function isWidescreen() {
return getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
}
//NOTE: placing this here, instead of script.js makes the sidebar less likely to flash on navigation
const showSidebarStr = window.localStorage.getItem('show-sidebar');
const showSidebar = showSidebarStr == "true" || showSidebarStr == null;
const isWidescreen = getComputedStyle(document.documentElement).getPropertyValue('--is-widescreen') === 'true';
if (isWidescreen && showSidebar) {
if (isWidescreen() && showSidebar) {
// special class that opens the sidebar only on widescreen devices
document.documentElement.classList.add('show-menu');
}
@ -62,7 +65,7 @@
<span class="poweredby">powered by <a target="_blank" href="https://github.com/bootlin/elixir">Elixir 2.2</a></span>
</footer>
</div>
<script src="/static/script.js?v=9"></script>
<script src="/static/script.js?v=10"></script>
<script src="/static/dynamic-references.js?v=4"></script>
<script src="/static/autocomplete.js" project="{{ current_project }}"></script>
</body>