Alexander/WebtreesBockenTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix associated events toggle: style and collapse visibility

Browse Source 
The toggle checkbox had no iOS-style styling and the display:flex
override on table rows prevented Bootstrap collapse from hiding them.
This commit is contained in:
Alexander Bocken
2026-03-16 08:40:52 +01:00
parent 77f067f8bc
commit 5f00f1977d
1 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/css/individual.css
View File

@@ -259,8 +259,9 @@
opacity: 0.4; opacity: 0.4;
} }
/* ---------- iOS-style toggle for "Events of close relatives" ---------- */ /* ---------- iOS-style toggle for "Associated events" & "Events of close relatives" ---------- */
.wt-route-IndividualPage #show-associate-facts,
.wt-route-IndividualPage #show-relatives-facts { .wt-route-IndividualPage #show-relatives-facts {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@@ -278,6 +279,7 @@
vertical-align: middle; vertical-align: middle;
} }
.wt-route-IndividualPage #show-associate-facts::before,
.wt-route-IndividualPage #show-relatives-facts::before { .wt-route-IndividualPage #show-relatives-facts::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -291,10 +293,12 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
} }
.wt-route-IndividualPage #show-associate-facts:checked,
.wt-route-IndividualPage #show-relatives-facts:checked { .wt-route-IndividualPage #show-relatives-facts:checked {
background: var(--color-primary, #5E81AC); background: var(--color-primary, #5E81AC);
} }
.wt-route-IndividualPage #show-associate-facts:checked::before,
.wt-route-IndividualPage #show-relatives-facts:checked::before { .wt-route-IndividualPage #show-relatives-facts:checked::before {
transform: translateX(20px); transform: translateX(20px);
} }
@@ -409,14 +413,16 @@
cursor: pointer; cursor: pointer;
} }
/* Relation fact rows: fix collapse visibility. /* Relation/associate fact rows: fix collapse visibility.
Our display:flex on tr overrides Bootstrap's collapse display:none. Our display:flex on tr overrides Bootstrap's collapse display:none.
Must restore collapse behavior explicitly. */ Must restore collapse behavior explicitly. */
.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse:not(.show) { .wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse:not(.show),
.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-associate-fact.collapse:not(.show) {
display: none !important; display: none !important;
} }
.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse.show { .wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-relation-fact.collapse.show,
.wt-route-IndividualPage .wt-facts-table > tbody > tr.wt-associate-fact.collapse.show {
display: flex !important; display: flex !important;
} }
@@ -626,10 +632,12 @@
background: var(--color-surface, #1a1a1a); background: var(--color-surface, #1a1a1a);
} }
:root[data-theme=dark] .wt-route-IndividualPage #show-associate-facts,
:root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts { :root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts {
background: #4C566A; background: #4C566A;
} }
:root[data-theme=dark] .wt-route-IndividualPage #show-associate-facts:checked,
:root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts:checked { :root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts:checked {
background: var(--color-primary, #5E81AC); background: var(--color-primary, #5E81AC);
} }
@@ -704,10 +712,12 @@
background: var(--color-surface, #1a1a1a); background: var(--color-surface, #1a1a1a);
} }
:root:not([data-theme=light]) .wt-route-IndividualPage #show-associate-facts,
:root:not([data-theme=light]) .wt-route-IndividualPage #show-relatives-facts { :root:not([data-theme=light]) .wt-route-IndividualPage #show-relatives-facts {
background: #4C566A; background: #4C566A;
} }
:root:not([data-theme=light]) .wt-route-IndividualPage #show-associate-facts:checked,
:root:not([data-theme=light]) .wt-route-IndividualPage #show-relatives-facts:checked { :root:not([data-theme=light]) .wt-route-IndividualPage #show-relatives-facts:checked {
background: var(--color-primary, #5E81AC); background: var(--color-primary, #5E81AC);
} }
@@ -776,10 +786,12 @@
/* --- Light mode explicit overrides (toggle track) --- */ /* --- Light mode explicit overrides (toggle track) --- */
:root[data-theme=light] .wt-route-IndividualPage #show-associate-facts,
:root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts { :root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts {
background: #D8DEE9; background: #D8DEE9;
} }
:root[data-theme=light] .wt-route-IndividualPage #show-associate-facts:checked,
:root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts:checked { :root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts:checked {
background: var(--color-primary, #5E81AC); background: var(--color-primary, #5E81AC);
} }