Started adding responsiveness
This commit is contained in:
“Henry-Hiles”
parent
93c6bc7e80
commit
7b2bd29f62
13 changed files with 230 additions and 173 deletions
|
|
@ -3,6 +3,7 @@ import config from "config"
|
|||
import styles from "styles/Actor.module.css"
|
||||
import { Link, useParams } from "react-router-dom"
|
||||
import { GENRES } from "../constants"
|
||||
import TopBar from "components/TopBar"
|
||||
|
||||
const Actor = () => {
|
||||
const { actorId } = useParams()
|
||||
|
|
@ -62,63 +63,70 @@ const Actor = () => {
|
|||
}, [actorId])
|
||||
|
||||
return (
|
||||
<div className={styles.Container}>
|
||||
<hr />
|
||||
<h1 className={styles.Name}>{actor?.name}</h1>
|
||||
<div className={styles.Section}>
|
||||
<h2>Biography</h2>
|
||||
<div className={styles.Description}>
|
||||
{actor?.biography ? (
|
||||
<a
|
||||
href="#"
|
||||
className={styles.Collapse}
|
||||
onClick={() =>
|
||||
setCollapsed((collapsed) => !collapsed)
|
||||
}
|
||||
>
|
||||
<p className={collapsed ? styles.Collapsed : ""}>
|
||||
{actor.biography}
|
||||
</p>
|
||||
<>
|
||||
<TopBar />
|
||||
<div className={styles.Container}>
|
||||
<hr />
|
||||
<h1 className={styles.Name}>{actor?.name}</h1>
|
||||
<div className={styles.Section}>
|
||||
<h2>Biography</h2>
|
||||
<div className={styles.Description}>
|
||||
{actor?.biography ? (
|
||||
<a
|
||||
href="#"
|
||||
className={styles.Collapse}
|
||||
onClick={() =>
|
||||
setCollapsed((collapsed) => !collapsed)
|
||||
}
|
||||
>
|
||||
<p
|
||||
className={
|
||||
collapsed ? styles.Collapsed : ""
|
||||
}
|
||||
>
|
||||
{actor.biography}
|
||||
</p>
|
||||
|
||||
<p className={styles.ReadMore}>
|
||||
{collapsed ? "Read More" : "Read Less"}
|
||||
</p>
|
||||
<p className={styles.ReadMore}>
|
||||
{collapsed ? "Read More" : "Read Less"}
|
||||
</p>
|
||||
|
||||
<p>{collapsed}</p>
|
||||
</a>
|
||||
) : (
|
||||
<p>No biography available.</p>
|
||||
)}
|
||||
<p>{collapsed}</p>
|
||||
</a>
|
||||
) : (
|
||||
<p>No biography available.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h2>Images</h2>
|
||||
<div className={styles.Images}>
|
||||
{images?.profiles.map((image) => (
|
||||
<img
|
||||
key={image.file_path}
|
||||
className={styles.Image}
|
||||
src={`https://image.tmdb.org/t/p/w300${image.file_path}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h2>Movies</h2>
|
||||
<div className={styles.Credits}>
|
||||
{credits?.map((movie) => (
|
||||
<Link
|
||||
to={`/movie/${movie.id}`}
|
||||
key={movie.id}
|
||||
className={styles.Movie}
|
||||
>
|
||||
<img src={movie.posterUrl} />
|
||||
<span>{movie.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h2>Images</h2>
|
||||
<div className={styles.Images}>
|
||||
{images?.profiles.map((image) => (
|
||||
<img
|
||||
key={image.file_path}
|
||||
className={styles.Image}
|
||||
src={`https://image.tmdb.org/t/p/w300${image.file_path}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h2>Movies</h2>
|
||||
<div className={styles.Credits}>
|
||||
{credits?.map((movie) => (
|
||||
<Link
|
||||
to={`/movie/${movie.id}`}
|
||||
key={movie.id}
|
||||
className={styles.Movie}
|
||||
>
|
||||
<img src={movie.posterUrl} />
|
||||
<span>{movie.title}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,14 +47,7 @@ const Home = () => {
|
|||
|
||||
return (
|
||||
<div className={styles.Container}>
|
||||
<input
|
||||
type="text"
|
||||
className={styles.Search}
|
||||
value={search}
|
||||
autoFocus
|
||||
placeholder="Search for movies..."
|
||||
onChange={({ target }) => setSearch(target.value)}
|
||||
/>
|
||||
<TopBar search={search} setSearch={setSearch} />
|
||||
<div className={styles.CardList}>
|
||||
{movies?.map((movie) => (
|
||||
<Card key={movie.id} movie={movie} />
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import styles from "styles/Movie.module.css"
|
|||
import config from "config"
|
||||
import useLocalStorage from "hooks/useLocalStorage"
|
||||
import Rate from "components/Rate"
|
||||
import TopBar from "components/TopBar"
|
||||
|
||||
const Movie = () => {
|
||||
const { movieId } = useParams()
|
||||
|
|
@ -54,77 +55,78 @@ const Movie = () => {
|
|||
run()
|
||||
}, [movieId])
|
||||
|
||||
return movie ? (
|
||||
<div className={styles.Container}>
|
||||
<div
|
||||
className={styles.Top}
|
||||
style={{
|
||||
backgroundImage: `url(${movie.backdropUrl})`,
|
||||
}}
|
||||
>
|
||||
<div className={styles.Summary}>
|
||||
<h2 className={styles.Title}>
|
||||
{movie.title} - {movie.year}
|
||||
</h2>
|
||||
<p>{movie.tagline}</p>
|
||||
<p className={styles.Overview}>{movie.overview}</p>
|
||||
return (
|
||||
<>
|
||||
<TopBar absolute />
|
||||
<div className={styles.Container}>
|
||||
<div
|
||||
className={styles.Top}
|
||||
style={{
|
||||
backgroundImage: `url(${movie?.backdropUrl})`,
|
||||
}}
|
||||
>
|
||||
<div className={styles.Summary}>
|
||||
<h2 className={styles.Title}>
|
||||
{movie?.title} - {movie?.year}
|
||||
</h2>
|
||||
<p>{movie?.tagline}</p>
|
||||
<p className={styles.Overview}>{movie?.overview}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.Bottom}>
|
||||
<div className={styles.Tags}>
|
||||
{movie.genres.map((genre) => (
|
||||
<p key={genre}>{genre}</p>
|
||||
))}
|
||||
<p className={styles.Average}>
|
||||
<span>
|
||||
Average Rating: {movie.averageVote.toFixed(1)}
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h1 className={styles.Header}>Your Rating</h1>
|
||||
<Rate rating={rating} setRating={setRating} />
|
||||
<br />
|
||||
<Link to="/ratings" className={styles.RatingsLink}>
|
||||
Go to ratings
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h1 className={styles.Header}>Actors</h1>
|
||||
<div className={styles.Actors}>
|
||||
{cast?.map((actor) => (
|
||||
<Link
|
||||
key={actor.id}
|
||||
to={`/actor/${actor.id}`}
|
||||
className={styles.Actor}
|
||||
>
|
||||
{actor.profile_path ? (
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w200${actor.profile_path}`}
|
||||
alt={actor.name}
|
||||
/>
|
||||
) : (
|
||||
<p>Image Unavailable</p>
|
||||
)}
|
||||
|
||||
<h3>{actor.name}</h3>
|
||||
</Link>
|
||||
<div className={styles.Bottom}>
|
||||
<div className={styles.Tags}>
|
||||
{movie?.genres.map((genre) => (
|
||||
<p key={genre}>{genre}</p>
|
||||
))}
|
||||
<p className={styles.Average}>
|
||||
<span>
|
||||
Average Rating: {movie?.averageVote.toFixed(1)}
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h1 className={styles.Header}>Your Rating</h1>
|
||||
<Rate rating={rating} setRating={setRating} />
|
||||
<br />
|
||||
<Link to="/ratings" className={styles.RatingsLink}>
|
||||
Go to ratings
|
||||
</Link>
|
||||
</div>
|
||||
<div className={styles.Section}>
|
||||
<h1 className={styles.Header}>Actors</h1>
|
||||
<div className={styles.Actors}>
|
||||
{cast?.map((actor) => (
|
||||
<Link
|
||||
key={actor.id}
|
||||
to={`/actor/${actor.id}`}
|
||||
className={styles.Actor}
|
||||
>
|
||||
{actor.profile_path ? (
|
||||
<img
|
||||
src={`https://image.tmdb.org/t/p/w200${actor.profile_path}`}
|
||||
alt={actor.name}
|
||||
/>
|
||||
) : (
|
||||
<p>Image Unavailable</p>
|
||||
)}
|
||||
|
||||
<h3>{actor.name}</h3>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div></div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import Card from "components/Card"
|
||||
import TopBar from "components/TopBar"
|
||||
import useLocalStorage from "hooks/useLocalStorage"
|
||||
import styles from "styles/Ratings.module.css"
|
||||
|
||||
|
|
@ -11,18 +12,21 @@ const Ratings = () => {
|
|||
])
|
||||
|
||||
return (
|
||||
<div className={styles.Container}>
|
||||
<hr />
|
||||
<div className={styles.CardList}>
|
||||
{ratings?.map((movie) => (
|
||||
<Card
|
||||
key={movie.id}
|
||||
movie={movie}
|
||||
setRating={(rating) => setRating(rating, movie)}
|
||||
/>
|
||||
))}
|
||||
<>
|
||||
<TopBar />
|
||||
<div className={styles.Container}>
|
||||
<hr />
|
||||
<div className={styles.CardList}>
|
||||
{ratings?.map((movie) => (
|
||||
<Card
|
||||
key={movie.id}
|
||||
movie={movie}
|
||||
setRating={(rating) => setRating(rating, movie)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Reference in a new issue