mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-29 16:16:07 +00:00
Responsive
This commit is contained in:
parent
9c2ff1dc62
commit
bdc8f63336
|
@ -4,11 +4,12 @@ import './Arrow.css'
|
|||
// left?: boolean
|
||||
export function Arrow(props) {
|
||||
return (
|
||||
<div className="arrow">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={`feather ${props.left?'left':''}`}>
|
||||
<span className="arrow" dangerouslySetInnerHTML={{ __html: `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather ${props.left?'left':''}"}>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
<polyline points="12 5 19 12 12 19"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
`}}>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,28 +1,26 @@
|
|||
.card {
|
||||
background-color: #22232A;
|
||||
padding: 3rem 4rem;
|
||||
width: 39rem;
|
||||
max-width: 100%;
|
||||
margin: 0 3rem;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
transition: height 500ms ease-in-out, transform 800ms ease-in-out, opacity 800ms ease-in-out;
|
||||
transition: height 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.card.full {
|
||||
width: 75rem;
|
||||
.card-wrapper.full {
|
||||
width: 81rem;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
transition: height 500ms ease-in-out;
|
||||
overflow: hidden;
|
||||
width: 45rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card.doTransition {
|
||||
opacity: 0;
|
||||
transform: translateY(-.7rem);
|
||||
}
|
||||
.card.doTransition.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0rem);
|
||||
@media screen and (max-width: 700px) {
|
||||
.card {
|
||||
margin: 0;
|
||||
padding: 3rem 2rem;
|
||||
}
|
||||
}
|
|
@ -17,10 +17,10 @@ export function Card(props) {
|
|||
}, [props.show, measureRef])
|
||||
|
||||
return (
|
||||
<div className="card-wrapper" style={{
|
||||
<div className={`card-wrapper ${ props.fullWidth ? 'full' : '' }`} style={{
|
||||
height: props.doTransition ? (showing ? height : 0) : "initial",
|
||||
}}>
|
||||
<div className={`card ${ props.fullWidth ? 'full' : '' } ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
|
||||
<div className={`card ${ showing ? 'show' : '' } ${ props.doTransition ? 'doTransition' : '' }`} ref={measureRef}>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -25,6 +25,7 @@
|
|||
padding: .7rem 1.5rem;
|
||||
height: auto;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.inputSearchButton {
|
||||
|
@ -70,3 +71,23 @@
|
|||
.inputSearchButton:active {
|
||||
background-color: #8b286a;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
.inputBar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.inputBar > *:nth-child(n) {
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
.inputSearchButton {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
.inputTextBox {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -42,4 +42,14 @@
|
|||
|
||||
.movieRow:hover .watch .arrow {
|
||||
transform: translateX(.3rem) translateY(.1rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
.movieRow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.movieRow .watch {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue