Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-25 07:11:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Responsive

Browse Source
This commit is contained in:
James Hawkins 2021-07-13 23:57:31 +01:00
parent 9c2ff1dc62
commit bdc8f63336
5 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Arrow.js
View File

@ -4,11 +4,12 @@ import './Arrow.css'
// left?: boolean // left?: boolean
export function Arrow(props) { export function Arrow(props) {
return ( return (
<div className="arrow"> <span className="arrow" dangerouslySetInnerHTML={{ __html: `
<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':''}`}> <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> <line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline> <polyline points="12 5 19 12 12 19"></polyline>
</svg> </svg>
</div> `}}>
</span>
) )
} }

22
src/components/Card.css
View File

@ -1,28 +1,26 @@
.card { .card {
background-color: #22232A; background-color: #22232A;
padding: 3rem 4rem; padding: 3rem 4rem;
width: 39rem;
max-width: 100%;
margin: 0 3rem; margin: 0 3rem;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; 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 { .card-wrapper.full {
width: 75rem; width: 81rem;
} }
.card-wrapper { .card-wrapper {
transition: height 500ms ease-in-out; transition: height 500ms ease-in-out;
overflow: hidden; overflow: hidden;
width: 45rem;
max-width: 100%;
} }
.card.doTransition { @media screen and (max-width: 700px) {
opacity: 0; .card {
transform: translateY(-.7rem); margin: 0;
} padding: 3rem 2rem;
.card.doTransition.show { }
opacity: 1;
transform: translateY(0rem);
} }

4
src/components/Card.js
View File

@ -17,10 +17,10 @@ export function Card(props) {
}, [props.show, measureRef]) }, [props.show, measureRef])
return ( return (
<div className="card-wrapper" style={{ <div className={`card-wrapper ${ props.fullWidth ? 'full' : '' }`} style={{
height: props.doTransition ? (showing ? height : 0) : "initial", 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} {props.children}
</div> </div>
</div> </div>

21
src/components/InputBox.css
View File

@ -25,6 +25,7 @@
padding: .7rem 1.5rem; padding: .7rem 1.5rem;
height: auto; height: auto;
flex: 1; flex: 1;
box-sizing: border-box;
} }
.inputSearchButton { .inputSearchButton {
@ -70,3 +71,23 @@
.inputSearchButton:active { .inputSearchButton:active {
background-color: #8b286a; 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%;
}
}

10
src/components/MovieRow.css
View File

@ -43,3 +43,13 @@
.movieRow:hover .watch .arrow { .movieRow:hover .watch .arrow {
transform: translateX(.3rem) translateY(.1rem); transform: translateX(.3rem) translateY(.1rem);
} }
@media screen and (max-width: 400px) {
.movieRow {
flex-direction: column;
}
.movieRow .watch {
margin-top: .5rem;
}
}