Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-04-11 10:04:56 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-04-11 10:04:56 -0700
commit35a82e94e85c5b4f068e6e4d3d807dfc3c05379d (patch)
tree45df368a18b2fe4de816f2dd559902f365d28167
parentdacecbb4f57142b8292bb53955a45f2cd5707f65 (diff)
Change record sheet visibility with JavaScript instead of CSS
since the CSS way doesn't work on my version of Firefox
Diffstat
-rw-r--r--index.js15
-rw-r--r--style.css12
2 files changed, 9 insertions, 18 deletions
diff --git a/index.js b/index.js
index ee2d3ad..2b13004 100644
--- a/index.js
+++ b/index.js
@@ -282,16 +282,11 @@ const FIRING_ARC_SIZE = {
}
let prevVb = localStorage.getItem('viewBox');
-let recVis = localStorage.getItem('recordsVisibility');
if (prevVb) {
svg.setAttributeNS(null, 'viewBox', prevVb);
}
-if (recVis == 'false') {
- recordSheetVisibility.checked = false;
-}
-
let info = document.getElementById('status');
Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
@@ -1110,7 +1105,15 @@ svg.addEventListener('pointerdown', e => {
});
recordSheetVisibility.addEventListener('input', e => {
- localStorage.setItem('recordsVisibility', recordSheetVisibility.checked);
+ let divs = document.querySelectorAll('#content div');
+
+ divs.forEach(d => {
+ if (recordSheetVisibility.checked) {
+ d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+ } else {
+ d.style.display = 'none';
+ }
+ });
});
document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
diff --git a/style.css b/style.css
index 9aeeb55..088cde4 100644
--- a/style.css
+++ b/style.css
@@ -68,23 +68,11 @@ div#content {
line-height: 1.5em;
}
-#content > div {
- display: none;
-}
-
#content input[type="checkbox"].visible {
position: absolute;
right: 0;
}
-#content:has(input[type="checkbox"].visible:checked) > div {
- display: block;
-}
-
-#content:has(input[type="checkbox"].visible:checked) div#record-sheet {
- display: flex;
-}
-
#record-sheet {
/* max-height: 100%; */
overflow-y: auto;