diff --git a/src/ui/src/assets/css/_slidesList.scss b/src/ui/src/assets/css/_slidesList.scss index 5091054..50ff874 100644 --- a/src/ui/src/assets/css/_slidesList.scss +++ b/src/ui/src/assets/css/_slidesList.scss @@ -8,6 +8,7 @@ aspect-ratio: 1.333; overflow: hidden; margin-bottom: 0.1rem; + z-index: 100; } .slide { @@ -18,7 +19,10 @@ -webkit-transform-origin: top left; &.active { - border: solid 3px color(hightlight); + box-shadow: + 5px 5px 0px color(hightlight) inset, + -5px -5px 0px color(hightlight) inset; + } } } \ No newline at end of file diff --git a/src/ui/src/components/Slide.js b/src/ui/src/components/Slide.js index 2c1d058..2785778 100644 --- a/src/ui/src/components/Slide.js +++ b/src/ui/src/components/Slide.js @@ -1,15 +1,15 @@ -import React from "react"; +import React, {forwardRef} from "react"; import SlideItem from "./SlideItem"; -const Slide = ({data, className, ...props}) => { +const Slide = forwardRef(({data, className, ...props}, ref) => { return ( - <article className={`slide${data?.title ? " title" : ""} ${className}`} {...props}> + <article className={`slide${data?.title ? " title" : ""} ${className}`} {...props} ref={ref}> {data?.content.map((item, index) => <SlideItem item={item} key={index} /> )} </article> ); -}; +}); export default Slide; \ No newline at end of file diff --git a/src/ui/src/components/SlidesList.js b/src/ui/src/components/SlidesList.js index 4d325a9..a284ccf 100644 --- a/src/ui/src/components/SlidesList.js +++ b/src/ui/src/components/SlidesList.js @@ -6,7 +6,9 @@ import SlideContext from "../shared/SlideContext"; const SlidesList = ({deck}) => { const {slide, setSlide} = useContext(SlideContext); const container = useRef(); + const current = useRef(); const [scale, setScale] = useState(1); + const [first, setFirst] = useState(true); const sizeChange = useCallback(() => { if (!container.current) @@ -22,6 +24,16 @@ const SlidesList = ({deck}) => { setScale(targetWidth / slideWidth); }, [container]); + useEffect(() => { + if (first) { + setFirst(false); + return; + } + if (!current.current) + return; + current.current.scrollIntoView({inline : "nearest"}); + }, [current, slide]); + useEffect(() => { const resizeListener = () => { sizeChange(); @@ -38,7 +50,7 @@ const SlidesList = ({deck}) => { <aside className="slides-list" ref={container}> {deck.map((currentSlide, index) => ( <div className="slide-wrap" key={index}> - <Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} /> + <Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} ref={index === slide ? current : null} /> </div> ))} </aside>