Don't need --invisible hack

Protip: use `:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)`
This commit is contained in:
Lim Chee Aun 2023-02-01 01:19:14 +08:00
parent ee2f14d0dd
commit ed8fce3cbf
2 changed files with 11 additions and 13 deletions

View file

@ -273,11 +273,6 @@ code {
}
}
details:not([open]) > summary ~ * {
/* HACK: allow JS know that this is invisible */
--invisible: 1;
}
[tabindex='-1'] {
outline: 0;
}

View file

@ -351,10 +351,13 @@ function StatusPage() {
);
const activeStatusRect = activeStatus?.getBoundingClientRect();
const allStatusLinks = Array.from(
scrollableRef.current.querySelectorAll('.status-link, .status-focus'),
).filter((s) => {
return !getComputedStyle(s).getPropertyValue('--invisible');
});
// Select all statuses except those inside collapsed details/summary
// Hat-tip to @AmeliaBR@front-end.social
// https://front-end.social/@AmeliaBR/109784776146144471
scrollableRef.current.querySelectorAll(
'.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)',
),
);
console.log({ allStatusLinks });
if (
activeStatus &&
@ -386,10 +389,10 @@ function StatusPage() {
);
const activeStatusRect = activeStatus?.getBoundingClientRect();
const allStatusLinks = Array.from(
scrollableRef.current.querySelectorAll('.status-link, .status-focus'),
).filter((s) => {
return !getComputedStyle(s).getPropertyValue('--invisible');
});
scrollableRef.current.querySelectorAll(
'.status-link:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *), .status-focus:not(details:not([open]) > summary ~ *, details:not([open]) > summary ~ * *)',
),
);
if (
activeStatus &&
activeStatusRect.top < scrollableRef.current.clientHeight &&