Started adding responsiveness

This commit is contained in:
“Henry-Hiles” 2022-11-03 14:12:52 -04:00
parent 93c6bc7e80
commit 7b2bd29f62
13 changed files with 230 additions and 173 deletions

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --> <link rel="icon" type="image/svg+xml" href="/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React movie viewer</title> <title>React movie viewer</title>
</head> </head>

5
public/icon.svg Normal file
View file

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-camera-reels-fill" viewBox="0 0 16 16">
<path d="M6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path d="M9 6a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
<path d="M9 6h.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 7.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 16H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h7z"/>
</svg>

After

Width:  |  Height:  |  Size: 404 B

View file

@ -4,11 +4,9 @@ import Movie from "pages/Movie"
import Actor from "pages/Actor" import Actor from "pages/Actor"
import Ratings from "pages/Ratings" import Ratings from "pages/Ratings"
import styles from "styles/App.module.css" import styles from "styles/App.module.css"
import TopBar from "components/TopBar"
const App = () => ( const App = () => (
<div className={styles.App}> <div className={styles.App}>
<TopBar />
<Routes> <Routes>
<Route index element={<Home />} /> <Route index element={<Home />} />
<Route path="/movie/:movieId" element={<Movie />} /> <Route path="/movie/:movieId" element={<Movie />} />

View file

@ -1,15 +1,44 @@
import { useEffect, useState } from "react"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import styles from "styles/TopBar.module.css" import styles from "styles/TopBar.module.css"
const TopBar = () => ( const TopBar = ({ search, setSearch, absolute }) => {
<div className={styles.Container}> const [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth)
window.addEventListener("resize", handleResize)
return () => window.removeEventListener("resize", handleResize)
}, [])
return (
<div
className={`${styles.Container} ${
absolute && width > 1000 ? styles.Absolute : ""
} ${setSearch ? styles.HasSearch : ""}`}
>
<Link to="/"> <Link to="/">
<h1 className={styles.Title}>React Movie Finder</h1> <h1 className={styles.Title}>React Movie Finder</h1>
</Link> </Link>
<Link to="/ratings">
{setSearch && (
<input
type="text"
className={styles.Search}
value={search}
autoFocus
placeholder="Search for movies..."
onChange={({ target }) => setSearch(target.value)}
/>
)}
<Link to="/ratings" className={styles.Ratings}>
<h1>Your ratings</h1> <h1>Your ratings</h1>
</Link> </Link>
</div> </div>
) )
}
export default TopBar export default TopBar

View file

@ -3,6 +3,7 @@ import config from "config"
import styles from "styles/Actor.module.css" import styles from "styles/Actor.module.css"
import { Link, useParams } from "react-router-dom" import { Link, useParams } from "react-router-dom"
import { GENRES } from "../constants" import { GENRES } from "../constants"
import TopBar from "components/TopBar"
const Actor = () => { const Actor = () => {
const { actorId } = useParams() const { actorId } = useParams()
@ -62,6 +63,8 @@ const Actor = () => {
}, [actorId]) }, [actorId])
return ( return (
<>
<TopBar />
<div className={styles.Container}> <div className={styles.Container}>
<hr /> <hr />
<h1 className={styles.Name}>{actor?.name}</h1> <h1 className={styles.Name}>{actor?.name}</h1>
@ -76,7 +79,11 @@ const Actor = () => {
setCollapsed((collapsed) => !collapsed) setCollapsed((collapsed) => !collapsed)
} }
> >
<p className={collapsed ? styles.Collapsed : ""}> <p
className={
collapsed ? styles.Collapsed : ""
}
>
{actor.biography} {actor.biography}
</p> </p>
@ -119,6 +126,7 @@ const Actor = () => {
</div> </div>
</div> </div>
</div> </div>
</>
) )
} }

View file

@ -47,14 +47,7 @@ const Home = () => {
return ( return (
<div className={styles.Container}> <div className={styles.Container}>
<input <TopBar search={search} setSearch={setSearch} />
type="text"
className={styles.Search}
value={search}
autoFocus
placeholder="Search for movies..."
onChange={({ target }) => setSearch(target.value)}
/>
<div className={styles.CardList}> <div className={styles.CardList}>
{movies?.map((movie) => ( {movies?.map((movie) => (
<Card key={movie.id} movie={movie} /> <Card key={movie.id} movie={movie} />

View file

@ -4,6 +4,7 @@ import styles from "styles/Movie.module.css"
import config from "config" import config from "config"
import useLocalStorage from "hooks/useLocalStorage" import useLocalStorage from "hooks/useLocalStorage"
import Rate from "components/Rate" import Rate from "components/Rate"
import TopBar from "components/TopBar"
const Movie = () => { const Movie = () => {
const { movieId } = useParams() const { movieId } = useParams()
@ -54,30 +55,32 @@ const Movie = () => {
run() run()
}, [movieId]) }, [movieId])
return movie ? ( return (
<>
<TopBar absolute />
<div className={styles.Container}> <div className={styles.Container}>
<div <div
className={styles.Top} className={styles.Top}
style={{ style={{
backgroundImage: `url(${movie.backdropUrl})`, backgroundImage: `url(${movie?.backdropUrl})`,
}} }}
> >
<div className={styles.Summary}> <div className={styles.Summary}>
<h2 className={styles.Title}> <h2 className={styles.Title}>
{movie.title} - {movie.year} {movie?.title} - {movie?.year}
</h2> </h2>
<p>{movie.tagline}</p> <p>{movie?.tagline}</p>
<p className={styles.Overview}>{movie.overview}</p> <p className={styles.Overview}>{movie?.overview}</p>
</div> </div>
</div> </div>
<div className={styles.Bottom}> <div className={styles.Bottom}>
<div className={styles.Tags}> <div className={styles.Tags}>
{movie.genres.map((genre) => ( {movie?.genres.map((genre) => (
<p key={genre}>{genre}</p> <p key={genre}>{genre}</p>
))} ))}
<p className={styles.Average}> <p className={styles.Average}>
<span> <span>
Average Rating: {movie.averageVote.toFixed(1)} Average Rating: {movie?.averageVote.toFixed(1)}
</span> </span>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -123,8 +126,7 @@ const Movie = () => {
</div> </div>
</div> </div>
</div> </div>
) : ( </>
<div></div>
) )
} }

View file

@ -1,4 +1,5 @@
import Card from "components/Card" import Card from "components/Card"
import TopBar from "components/TopBar"
import useLocalStorage from "hooks/useLocalStorage" import useLocalStorage from "hooks/useLocalStorage"
import styles from "styles/Ratings.module.css" import styles from "styles/Ratings.module.css"
@ -11,6 +12,8 @@ const Ratings = () => {
]) ])
return ( return (
<>
<TopBar />
<div className={styles.Container}> <div className={styles.Container}>
<hr /> <hr />
<div className={styles.CardList}> <div className={styles.CardList}>
@ -23,6 +26,7 @@ const Ratings = () => {
))} ))}
</div> </div>
</div> </div>
</>
) )
} }

View file

@ -3,7 +3,6 @@
flex-direction: column; flex-direction: column;
padding: 15px; padding: 15px;
color: white; color: white;
padding-top: 80px;
} }
.Name { .Name {
margin-top: 10px; margin-top: 10px;

View file

@ -3,7 +3,6 @@
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
gap: 1.5em; gap: 1.5em;
padding-top: 30px;
} }
.CardList { .CardList {
@ -15,14 +14,3 @@
gap: 20px; gap: 20px;
text-align: center; text-align: center;
} }
.Search {
padding: 0.5em;
border: 2px solid white;
color: white;
font: inherit;
width: 20em;
height: 3em;
border-radius: 10px;
background-color: var(--secondary);
}

View file

@ -5,7 +5,6 @@
.Top { .Top {
height: 100vh; height: 100vh;
display: flex; display: flex;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -16,6 +15,7 @@
.Summary { .Summary {
background: linear-gradient(#00000035, black); background: linear-gradient(#00000035, black);
height: 15%; height: 15%;
overflow: scroll;
text-align: center; text-align: center;
} }
@ -50,12 +50,15 @@
.Tags { .Tags {
display: flex; display: flex;
gap: 10px; gap: 10px;
width: 100%;
overflow: scroll;
} }
.Tags > * { .Tags > * {
background-color: var(--primary); background-color: var(--primary);
padding: 5px 7px; padding: 5px 7px;
border-radius: 10px; border-radius: 10px;
white-space: nowrap;
} }
.Average { .Average {

View file

@ -5,7 +5,6 @@
gap: 1.5em; gap: 1.5em;
color: white; color: white;
padding: 10px; padding: 10px;
padding-top: 90px;
} }
.CardList { .CardList {

View file

@ -1,13 +1,42 @@
.Container.HasSearch {
--cols: 3;
}
.Container { .Container {
display: flex; display: grid;
width: 100%; width: 100%;
justify-content: space-between; grid-template-columns: repeat(var(--cols, 2), 1fr);
padding: 10px 20px; padding: 0 30px;
background-color: transparent; align-items: center;
position: absolute; background: linear-gradient(to bottom, #00000090, #00000000);
color: white; color: white;
} }
.Container h1 { .Container.Absolute {
color: white; position: absolute;
}
.Container a {
color: white;
text-decoration: none;
}
.Container a::hover {
text-decoration: underline;
}
.Search {
padding: 0.5em;
border: 2px solid white;
color: white;
font: inherit;
justify-self: center;
width: 20em;
height: 3em;
border-radius: 10px;
background-color: var(--secondary);
}
.Ratings {
justify-self: end;
} }