From 82f3e3ae99060cf43d7b378be1df97cd084b113c Mon Sep 17 00:00:00 2001 From: padosum Date: Sat, 31 Dec 2022 22:53:59 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20toggle=20=EB=B2=84=ED=8A=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/App.js | 16 ++++++++-------- src/client/index.html | 37 +++++++++++++++++------------------- src/client/styles/global.css | 9 --------- 3 files changed, 25 insertions(+), 37 deletions(-) diff --git a/src/client/App.js b/src/client/App.js index af1ad3e..52ec5e9 100644 --- a/src/client/App.js +++ b/src/client/App.js @@ -43,25 +43,25 @@ function App() { } }; - window.addEventListener('scroll', activeAnchor); - window.addEventListener('resize', activeAnchor); - - function resizeGridItem(item) { + const resizeGridItem = item => { const grid = item.parentElement; const rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows')); const rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')); const contentHeight = item.querySelector('dl').getBoundingClientRect().height + rowGap; const rowSpan = Math.ceil(contentHeight / (rowHeight + rowGap)); item.style.gridRowEnd = 'span ' + rowSpan; - } + }; - function resizeAllGridItems() { + const resizeAllGridItems = () => { const allItems = [...document.querySelectorAll('.achievement-wrapper')]; allItems.forEach(item => resizeGridItem(item)); - } + }; - resizeAllGridItems(); + window.addEventListener('scroll', activeAnchor); + window.addEventListener('resize', activeAnchor); window.addEventListener('resize', resizeAllGridItems); + + resizeAllGridItems(); } App(); diff --git a/src/client/index.html b/src/client/index.html index ee75526..98c4070 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -36,19 +36,19 @@