Henry-Hiles/movie-react-app
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finished up responsiveness, and made some pages more minimal

Browse source
This commit is contained in:
“Henry-Hiles” 2022-11-07 15:18:00 -05:00
parent 7b2bd29f62
commit bac3b7e700
9 changed files with 55 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/Card.jsx
View file

@ -11,26 +11,9 @@ const Card = ({ movie, setRating }) => (
className={styles.Image}
/>
<div className={styles.Bottom}>
<p className={styles.Title}>
{movie.title} - {movie.year}
</p>
{movie.rating ? (
{movie.rating && (
<Rate rating={movie.rating} setRating={setRating} />
) : (
<p className={styles.Average}>
Average rating: {movie.averageVote}{" "}
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</p>
)}
<p className={styles.Overview}>{movie.overview}</p>
</div>
</div>
</Link>

24
src/components/TopBar.jsx
View file

@ -13,6 +13,17 @@ const TopBar = ({ search, setSearch, absolute }) => {
return () => window.removeEventListener("resize", handleResize)
}, [])
const Search = (
<input
type="text"
className={styles.Search}
value={search}
autoFocus
placeholder="Search for movies..."
onChange={({ target }) => setSearch(target.value)}
/>
)
return (
<div
className={`${styles.Container} ${
@ -23,20 +34,13 @@ const TopBar = ({ search, setSearch, absolute }) => {
<h1 className={styles.Title}>React Movie Finder</h1>
</Link>
{setSearch && (
<input
type="text"
className={styles.Search}
value={search}
autoFocus
placeholder="Search for movies..."
onChange={({ target }) => setSearch(target.value)}
/>
)}
{setSearch && width > 1000 && Search}
<Link to="/ratings" className={styles.Ratings}>
<h1>Your ratings</h1>
</Link>
{setSearch && width <= 1000 && Search}
</div>
)
}

2
src/pages/Actor.jsx
View file

@ -70,7 +70,7 @@ const Actor = () => {
<h1 className={styles.Name}>{actor?.name}</h1>
<div className={styles.Section}>
<h2>Biography</h2>
<div className={styles.Description}>
<div>
{actor?.biography ? (
<a
href="#"

28
src/pages/Home.jsx
View file

@ -3,12 +3,11 @@ import useDebounce from "hooks/useDebounce"
import { useEffect, useState } from "react"
import styles from "styles/Home.module.css"
import config from "config"
import { GENRES } from "../constants"
import Card from "components/Card"
const Home = () => {
const [movies, setMovies] = useState([])
const [page, setPage] = useState(1)
const [page] = useState(1)
const [search, setSearch] = useState("")
const debouncedSearch = useDebounce(search)
@ -23,22 +22,15 @@ const Home = () => {
)
const data = await response.json()
setMovies(
data.results.map((movie) => ({
id: movie.id,
overview: movie.overview,
adult: movie.adult,
posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
backdropUrl: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`,
genres: movie.genre_ids.map((genreId) =>
GENRES.find((genre) => genre.id == genreId)
),
title: movie.title,
releaseDate: movie.release_date,
year: movie.release_date.split("-")[0],
averageVote: movie.vote_average,
voteCount: movie.vote_count,
popularity: movie.popularity,
}))
data.results
.filter((movie) => movie?.poster_path)
.map((movie) => ({
id: movie.id,
posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
title: movie.title,
year: movie.release_date.split("-")[0],
averageVote: movie.vote_average / 2,
}))
)
}

2
src/pages/Movie.jsx
View file

@ -35,7 +35,7 @@ const Movie = () => {
title: data.title,
releaseDate: data.release_date,
year: data.release_date.split("-")[0],
averageVote: data.vote_average,
averageVote: data.vote_average / 2,
voteCount: data.vote_count,
popularity: data.popularity,
tagline: data.tagline,

3
src/styles/Actor.module.css
View file

@ -4,6 +4,7 @@
padding: 15px;
color: white;
}
.Name {
margin-top: 10px;
}
@ -35,13 +36,13 @@
.Collapse {
color: white;
text-decoration: none;
}
.Credits {
display: flex;
width: 100%;
gap: 20px;
height: 500px;
overflow: scroll;
}

11
src/styles/Card.module.css
View file

@ -13,8 +13,6 @@
}
.Card {
background-color: var(--primary);
padding: 12px 15px;
border-radius: 7px;
display: flex;
gap: 5px;
@ -23,15 +21,6 @@
flex-direction: column;
}
.Overview {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
white-space: normal;
}
.Title,
.Average {
margin: 0;

2
src/styles/Home.module.css
View file

@ -10,7 +10,7 @@
justify-items: center;
width: 85%;
margin: 0 100px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 20px;
text-align: center;
}

35
src/styles/TopBar.module.css
View file

@ -5,13 +5,32 @@
.Container {
display: grid;
width: 100%;
grid-template-columns: repeat(var(--cols, 2), 1fr);
padding: 0 30px;
align-items: center;
background: linear-gradient(to bottom, #00000090, #00000000);
grid-template-columns: 1fr;
padding: 10px 30px;
gap: 10px;
background: linear-gradient(to bottom, #00000090, #00000010);
color: white;
}
.Container h1 {
margin: 0;
}
@media (min-width: 1000px) {
.Container {
grid-template-columns: repeat(var(--cols, 2), 1fr);
}
.Ratings {
justify-self: end;
}
.Search {
justify-self: center;
width: 20em;
}
}
.Container.Absolute {
position: absolute;
}
@ -30,13 +49,9 @@
border: 2px solid white;
color: white;
font: inherit;
justify-self: center;
width: 20em;
width: 100%;
height: 3em;
margin-top: 10px;
border-radius: 10px;
background-color: var(--secondary);
}
.Ratings {
justify-self: end;
}