mirror of
https://gitlab.com/MrFry/qmining-page
synced 2025-04-01 20:23:44 +02:00
added snow toggle button
This commit is contained in:
parent
6884dccd6e
commit
ef48692da4
2 changed files with 37 additions and 11 deletions
|
@ -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,6 +36,13 @@ function Snow() {
|
||||||
if (typeof window !== 'object') return null
|
if (typeof window !== 'object') return null
|
||||||
|
|
||||||
return ReactDOM.createPortal(
|
return ReactDOM.createPortal(
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
onClick={() => setSnowShowing(!snowShowing)}
|
||||||
|
className={styles.snowToggleButton}
|
||||||
|
>
|
||||||
|
Hó on/off
|
||||||
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
|
@ -44,8 +52,9 @@ function Snow() {
|
||||||
height: `${windowSize[1]}px`,
|
height: `${windowSize[1]}px`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Snowfall snowflakeCount={snowflakeCount} />
|
{snowShowing && <Snowfall snowflakeCount={snowflakeCount} />}
|
||||||
</div>,
|
</div>
|
||||||
|
</>,
|
||||||
document.body
|
document.body
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue