Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-24 04:31:51 +01:00
Code Issues Packages Projects Releases 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%;
}
.card-wrapper.overflow-hidden {
overflow: hidden;
}
@media screen and (max-width: 700px) {
.card {
margin: 0;

56
src/components/Card.js
View File

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