oreolek/phanpy
1
0
Fork 0
Code Activity

Test replace scroll-based to inview

Browse source
This commit is contained in:
Lim Chee Aun 2024-01-02 19:26:05 +08:00
parent 098df0ad2c
commit 764125e6b9
2 changed files with 39 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app.css
View file

@ -894,6 +894,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
text-shadow: 0 1px var(--bg-color); text-shadow: 0 1px var(--bg-color);
} }
.status-carousel > ul { .status-carousel > ul {
--carousel-gap: 16px;
display: flex; display: flex;
overflow-x: auto; overflow-x: auto;
overflow-y: clip; overflow-y: clip;
@ -901,7 +902,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
scroll-behavior: smooth; scroll-behavior: smooth;
margin: 0; margin: 0;
padding: 8px 16px; padding: 8px 16px;
gap: 16px; gap: var(--carousel-gap);
align-items: flex-start; align-items: flex-start;
counter-reset: index; counter-reset: index;
min-height: 160px; min-height: 160px;
@ -926,6 +927,15 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.status-carousel > ul > li:is(:empty, :has(> a:empty)) { .status-carousel > ul > li:is(:empty, :has(> a:empty)) {
display: none; display: none;
} }
.status-carousel .status-carousel-beacon {
margin-right: calc(-1 * var(--carousel-gap));
pointer-events: none;
opacity: 0;
~ .status-carousel-beacon {
margin-left: calc(-1 * var(--carousel-gap));
}
}
/* /*
Assume that browsers that do support inline-size property also support container queries. Assume that browsers that do support inline-size property also support container queries.
https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills

41
src/components/timeline.jsx
View file

@ -698,18 +698,18 @@ function StatusCarousel({ title, class: className, children }) {
// }); // });
const startButtonRef = useRef(); const startButtonRef = useRef();
const endButtonRef = useRef(); const endButtonRef = useRef();
useScrollFn( // useScrollFn(
{ // {
scrollableRef: carouselRef, // scrollableRef: carouselRef,
direction: 'horizontal', // direction: 'horizontal',
init: true, // init: true,
}, // },
({ reachStart, reachEnd }) => { // ({ reachStart, reachEnd }) => {
if (startButtonRef.current) startButtonRef.current.disabled = reachStart; // if (startButtonRef.current) startButtonRef.current.disabled = reachStart;
if (endButtonRef.current) endButtonRef.current.disabled = reachEnd; // if (endButtonRef.current) endButtonRef.current.disabled = reachEnd;
}, // },
[], // [],
); // );
// useEffect(() => { // useEffect(() => {
// init?.(); // init?.();
// }, []); // }, []);
@ -749,7 +749,22 @@ function StatusCarousel({ title, class: className, children }) {
</button> </button>
</span> </span>
</header> </header>
<ul ref={carouselRef}>{children}</ul> <ul ref={carouselRef}>
<InView
class="status-carousel-beacon"
onChange={(inView) => {
if (startButtonRef.current)
startButtonRef.current.disabled = inView;
}}
/>
{children}
<InView
class="status-carousel-beacon"
onChange={(inView) => {
if (endButtonRef.current) endButtonRef.current.disabled = inView;
}}
/>
</ul>
</div> </div>
); );
} }