mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-27 03:35:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Don't need --invisible hack

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/index.css
View file

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

19
src/pages/status.jsx
View file

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