this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Test replace scroll-based to inview

+39 -14
+11 -1
src/app.css
··· 894 894 text-shadow: 0 1px var(--bg-color); 895 895 } 896 896 .status-carousel > ul { 897 + --carousel-gap: 16px; 897 898 display: flex; 898 899 overflow-x: auto; 899 900 overflow-y: clip; ··· 901 902 scroll-behavior: smooth; 902 903 margin: 0; 903 904 padding: 8px 16px; 904 - gap: 16px; 905 + gap: var(--carousel-gap); 905 906 align-items: flex-start; 906 907 counter-reset: index; 907 908 min-height: 160px; ··· 925 926 } 926 927 .status-carousel > ul > li:is(:empty, :has(> a:empty)) { 927 928 display: none; 929 + } 930 + .status-carousel .status-carousel-beacon { 931 + margin-right: calc(-1 * var(--carousel-gap)); 932 + pointer-events: none; 933 + opacity: 0; 934 + 935 + ~ .status-carousel-beacon { 936 + margin-left: calc(-1 * var(--carousel-gap)); 937 + } 928 938 } 929 939 /* 930 940 Assume that browsers that do support inline-size property also support container queries.
+28 -13
src/components/timeline.jsx
··· 698 698 // }); 699 699 const startButtonRef = useRef(); 700 700 const endButtonRef = useRef(); 701 - useScrollFn( 702 - { 703 - scrollableRef: carouselRef, 704 - direction: 'horizontal', 705 - init: true, 706 - }, 707 - ({ reachStart, reachEnd }) => { 708 - if (startButtonRef.current) startButtonRef.current.disabled = reachStart; 709 - if (endButtonRef.current) endButtonRef.current.disabled = reachEnd; 710 - }, 711 - [], 712 - ); 701 + // useScrollFn( 702 + // { 703 + // scrollableRef: carouselRef, 704 + // direction: 'horizontal', 705 + // init: true, 706 + // }, 707 + // ({ reachStart, reachEnd }) => { 708 + // if (startButtonRef.current) startButtonRef.current.disabled = reachStart; 709 + // if (endButtonRef.current) endButtonRef.current.disabled = reachEnd; 710 + // }, 711 + // [], 712 + // ); 713 713 // useEffect(() => { 714 714 // init?.(); 715 715 // }, []); ··· 749 749 </button> 750 750 </span> 751 751 </header> 752 - <ul ref={carouselRef}>{children}</ul> 752 + <ul ref={carouselRef}> 753 + <InView 754 + class="status-carousel-beacon" 755 + onChange={(inView) => { 756 + if (startButtonRef.current) 757 + startButtonRef.current.disabled = inView; 758 + }} 759 + /> 760 + {children} 761 + <InView 762 + class="status-carousel-beacon" 763 + onChange={(inView) => { 764 + if (endButtonRef.current) endButtonRef.current.disabled = inView; 765 + }} 766 + /> 767 + </ul> 753 768 </div> 754 769 ); 755 770 }