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;
}
/* ---------- 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 {
appearance: none;
-webkit-appearance: none;
@@ -278,6 +279,7 @@
vertical-align: middle;
}
.wt-route-IndividualPage #show-associate-facts::before,
.wt-route-IndividualPage #show-relatives-facts::before {
content: '';
position: absolute;
@@ -291,10 +293,12 @@
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 {
background: var(--color-primary, #5E81AC);
}
.wt-route-IndividualPage #show-associate-facts:checked::before,
.wt-route-IndividualPage #show-relatives-facts:checked::before {
transform: translateX(20px);
}
@@ -409,14 +413,16 @@
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.
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;
}
.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;
}
@@ -626,10 +632,12 @@
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 {
background: #4C566A;
}
:root[data-theme=dark] .wt-route-IndividualPage #show-associate-facts:checked,
:root[data-theme=dark] .wt-route-IndividualPage #show-relatives-facts:checked {
background: var(--color-primary, #5E81AC);
}
@@ -704,10 +712,12 @@
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 {
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 {
background: var(--color-primary, #5E81AC);
}
@@ -776,10 +786,12 @@
/* --- 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 {
background: #D8DEE9;
}
:root[data-theme=light] .wt-route-IndividualPage #show-associate-facts:checked,
:root[data-theme=light] .wt-route-IndividualPage #show-relatives-facts:checked {
background: var(--color-primary, #5E81AC);
}