mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

Fix overflow hidden

Browse source
This commit is contained in:
James Hawkins 2021-10-26 13:36:29 +01:00
parent 8e77a95878
commit 4055febd4e
2 changed files with 32 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/Card.css
View file

@ -18,6 +18,10 @@
max-width: 100%; max-width: 100%;
} }
.card-wrapper.overflow-hidden {
overflow: hidden;
}
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.card { .card {
margin: 0; margin: 0;

56
src/components/Card.js
View file

@ -1,28 +1,28 @@
import React from 'react' import React from 'react'
import './Card.css' import './Card.css'
// fullWidth: boolean // fullWidth: boolean
// show: boolean // show: boolean
// doTransition: boolean // doTransition: boolean
export function Card(props) { export function Card(props) {
const [showing, setShowing] = React.useState(false); const [showing, setShowing] = React.useState(false);
const measureRef = React.useRef(null) const measureRef = React.useRef(null)
const [height, setHeight] = React.useState(0); const [height, setHeight] = React.useState(0);
React.useEffect(() => { React.useEffect(() => {
if (!measureRef?.current) return; if (!measureRef?.current) return;
setShowing(props.show); setShowing(props.show);
setHeight(measureRef.current.clientHeight) setHeight(measureRef.current.clientHeight)
}, [props.show, measureRef]) }, [props.show, measureRef])
return ( return (
<div className={`card-wrapper ${ props.fullWidth ? 'full' : '' }`} style={{ <div className={`card-wrapper ${ props.fullWidth ? 'full' : '' } ${ props.doTransition ? 'overflow-hidden' : '' }`} style={{
height: props.doTransition ? (showing ? height : 0) : "initial", height: props.doTransition ? (showing ? height : 0) : "initial",
}}> }}>
<div className={`card ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}> <div className={`card ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
{props.children} {props.children}
</div> </div>
</div> </div>
) )
} }