From c12ed693241c3f4cb913a55daf2e3204ab88034b Mon Sep 17 00:00:00 2001 From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com> Date: Wed, 3 Jan 2024 16:17:40 -0800 Subject: [PATCH 01/13] Updated css for expanding list of samples when window size is less than 768px. React state updates were making this animation unperformant on all but the least intensive webgpu samples 'which was basically only helloTriangle'. Accordingly, I reworked the panelContents portion of the _app component, with css changes only occurring on window size changes or when toggling the expand button --- src/pages/MainLayout.module.css | 13 +++++---- src/pages/_app.tsx | 49 +++++++++++++++++++++++++++------ 2 files changed, 47 insertions(+), 15 deletions(-) diff --git a/src/pages/MainLayout.module.css b/src/pages/MainLayout.module.css index 2374f5aa..2db4879b 100644 --- a/src/pages/MainLayout.module.css +++ b/src/pages/MainLayout.module.css @@ -18,7 +18,9 @@ } .exampleList { - padding: 0 + padding: 0; + margin-block-start: 16px; + margin-block-end: 16px; } .exampleList li { @@ -55,12 +57,11 @@ height: auto; } - .panel[data-expanded=false] .panelContents { - display: none; - } - - .panel[data-expanded=true] .panelContents { + .panelContents { display: block; + transition: max-height 0.3s ease-out; + overflow: hidden; + max-height: 0px; } .expand { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2257d5f3..55e8bd39 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,7 +2,7 @@ import Head from 'next/head'; import { AppProps } from 'next/app'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { useState } from 'react'; +import { useRef, useEffect} from 'react'; import './styles.css'; import styles from './MainLayout.module.css'; @@ -22,7 +22,40 @@ const MainLayout: React.FunctionComponent = ({ const router = useRouter(); const samplesNames = Object.keys(pages); - const [listExpanded, setListExpanded] = useState(false); + const panelContentsRef = useRef(null); + const prevWindowWidth = useRef(0); + + useEffect(() => { + const resizeListener = () => { + if (window.innerWidth > 768) { + prevWindowWidth.current = window.innerWidth; + panelContentsRef.current.style.maxHeight = + panelContentsRef.current.scrollHeight + 'px'; + } + if (window.innerWidth <= 768 && prevWindowWidth.current > 768) { + panelContentsRef.current.style.maxHeight = '0px'; + } + }; + window.addEventListener('resize', resizeListener); + prevWindowWidth.current = window.innerWidth; + return () => { + window.removeEventListener('resize', resizeListener); + }; + }, []); + + const toggelPanelContents = () => { + if (panelContentsRef.current) { + if (panelContentsRef.current.style.maxHeight === '0px') { + panelContentsRef.current.style.maxHeight = + panelContentsRef.current.scrollHeight + 16 + 'px'; + panelContentsRef.current.style.overflow = 'none'; + } else { + panelContentsRef.current.style.maxHeight = '0px'; + panelContentsRef.current.style.overflow = 'hidden'; + } + console.log(panelContentsRef.current.style.maxHeight); + } + }; const oldPathSyntaxMatch = router.asPath.match(/(\?wgsl=[01])#(\S+)/); if (oldPathSyntaxMatch) { @@ -45,20 +78,18 @@ const MainLayout: React.FunctionComponent = ({ />
-