From: Ruben Beltran del Rio Date: Wed, 8 May 2024 13:33:42 +0000 (+0200) Subject: Update mobile CSS X-Git-Url: https://git.r.bdr.sh/rbdr/lissajous/commitdiff_plain/1924acb2eccaa6bdf58f9b90b10b1236c74bb07a Update mobile CSS --- diff --git a/index.html b/index.html index db8e5b4..3df1539 100644 --- a/index.html +++ b/index.html @@ -20,5 +20,8 @@ + diff --git a/lib/factories/ui.js b/lib/factories/ui.js index c220f67..cc34579 100644 --- a/lib/factories/ui.js +++ b/lib/factories/ui.js @@ -46,6 +46,18 @@ export function slider({ slider.step = step; } }); + + document.addEventListener('touchstart', function(event) { + if (event.touches.length == 3) { + if (slider.classList.contains('shifted')) { + slider.classList.remove('shifted'); + slider.step = step; + } else { + slider.classList.add('shifted'); + slider.step = shiftStep; + } + } + }); } slider.addEventListener('input', () => set(slider.value)); diff --git a/style.css b/style.css index 17fa12e..6871f4c 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,30 @@ body { overflow: hidden; } +@media (orientation: landscape) { + body { + padding-top: env(safe-area-inset-top); + padding-left: env(safe-area-inset-left); + padding-right: env(safe-area-inset-right); + padding-bottom: env(safe-area-inset-bottom); + } +} + +a { + color: #fff; +} + +footer { + position: fixed; + padding: 2px 8px; + bottom: 0; + min-height: 16px; + max-height: 32px; +} + #settings { + overflow-y: auto; + max-height: 100%; position: absolute; top: 5px; right: 5px;