albert/qmining-page
1
0
Fork 0
mirror of https://gitlab.com/MrFry/qmining-page synced 2025-04-01 20:23:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

added snow toggle button

Browse source
This commit is contained in:
mrfry 2022-12-06 08:19:18 +01:00
parent 6884dccd6e
commit ef48692da4
2 changed files with 37 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/layout.js
View file

@ -22,6 +22,7 @@ const shouldRenderSnow = () => {
function Snow() { function Snow() {
const [windowSize, setWindowSize] = useState([100, 200]) const [windowSize, setWindowSize] = useState([100, 200])
const [snowShowing, setSnowShowing] = useState(true)
useEffect(() => { useEffect(() => {
setWindowSize([window.innerWidth, window.innerHeight]) setWindowSize([window.innerWidth, window.innerHeight])
@ -35,17 +36,25 @@ function Snow() {
if (typeof window !== 'object') return null if (typeof window !== 'object') return null
return ReactDOM.createPortal( return ReactDOM.createPortal(
<div <>
style={{ <div
pointerEvents: 'none', onClick={() => setSnowShowing(!snowShowing)}
zIndex: 900, className={styles.snowToggleButton}
position: 'fixed', >
width: `${windowSize[0]}px`, Hó on/off
height: `${windowSize[1]}px`, </div>
}} <div
> style={{
<Snowfall snowflakeCount={snowflakeCount} /> pointerEvents: 'none',
</div>, zIndex: 900,
position: 'fixed',
width: `${windowSize[0]}px`,
height: `${windowSize[1]}px`,
}}
>
{snowShowing && <Snowfall snowflakeCount={snowflakeCount} />}
</div>
</>,
document.body document.body
) )
} }

17
src/components/layout.module.css
View file

@ -246,3 +246,20 @@
top: 10px; top: 10px;
} }
} }
.snowToggleButton {
color: #fcdb8c;
background-color: #303030;
z-index: 901;
position: fixed;
border-radius: 4px;
padding: 4px;
bottom: 20px;
right: 20px;
cursor: pointer;
opacity: 50%;
}
.snowToggleButton:hover {
opacity: 100%;
}