From 7b2bd29f62bedbbdf5d4e4652a050d6035825040 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CHenry-Hiles=E2=80=9D?= <“henry@henryhiles.com”> Date: Thu, 3 Nov 2022 14:12:52 -0400 Subject: [PATCH] Started adding responsiveness --- index.html | 2 +- public/icon.svg | 5 ++ src/App.jsx | 2 - src/components/TopBar.jsx | 49 ++++++++++--- src/pages/Actor.jsx | 114 +++++++++++++++-------------- src/pages/Home.jsx | 9 +-- src/pages/Movie.jsx | 134 +++++++++++++++++----------------- src/pages/Ratings.jsx | 26 ++++--- src/styles/Actor.module.css | 1 - src/styles/Home.module.css | 12 --- src/styles/Movie.module.css | 5 +- src/styles/Ratings.module.css | 1 - src/styles/TopBar.module.css | 43 +++++++++-- 13 files changed, 230 insertions(+), 173 deletions(-) create mode 100644 public/icon.svg diff --git a/index.html b/index.html index 4353c17..6af7f14 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + React movie viewer diff --git a/public/icon.svg b/public/icon.svg new file mode 100644 index 0000000..57f2ce9 --- /dev/null +++ b/public/icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/App.jsx b/src/App.jsx index e831b61..4f9d556 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -4,11 +4,9 @@ import Movie from "pages/Movie" import Actor from "pages/Actor" import Ratings from "pages/Ratings" import styles from "styles/App.module.css" -import TopBar from "components/TopBar" const App = () => (
- } /> } /> diff --git a/src/components/TopBar.jsx b/src/components/TopBar.jsx index b1a27a8..e95c156 100644 --- a/src/components/TopBar.jsx +++ b/src/components/TopBar.jsx @@ -1,15 +1,44 @@ +import { useEffect, useState } from "react" import { Link } from "react-router-dom" import styles from "styles/TopBar.module.css" -const TopBar = () => ( -
- -

React Movie Finder

- - -

Your ratings

- -
-) +const TopBar = ({ search, setSearch, absolute }) => { + const [width, setWidth] = useState(window.innerWidth) + + useEffect(() => { + const handleResize = () => setWidth(window.innerWidth) + + window.addEventListener("resize", handleResize) + + return () => window.removeEventListener("resize", handleResize) + }, []) + + return ( +
1000 ? styles.Absolute : "" + } ${setSearch ? styles.HasSearch : ""}`} + > + +

React Movie Finder

+ + + {setSearch && ( + setSearch(target.value)} + /> + )} + + +

Your ratings

+ +
+ ) +} export default TopBar diff --git a/src/pages/Actor.jsx b/src/pages/Actor.jsx index 411c814..bde1403 100644 --- a/src/pages/Actor.jsx +++ b/src/pages/Actor.jsx @@ -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 ( -
-
-

{actor?.name}

-
-

Biography

-
- {actor?.biography ? ( - - setCollapsed((collapsed) => !collapsed) - } - > -

- {actor.biography} -

+ <> + +
+
+

{actor?.name}

+ +
+

Images

+
+ {images?.profiles.map((image) => ( + + ))} +
+
+
+

Movies

+
+ {credits?.map((movie) => ( + + + {movie.title} + + ))} +
-
-

Images

-
- {images?.profiles.map((image) => ( - - ))} -
-
-
-

Movies

-
- {credits?.map((movie) => ( - - - {movie.title} - - ))} -
-
-
+ ) } diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 26f91b2..2551ab4 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -47,14 +47,7 @@ const Home = () => { return (
- setSearch(target.value)} - /> +
{movies?.map((movie) => ( diff --git a/src/pages/Movie.jsx b/src/pages/Movie.jsx index 2f76673..b910d8e 100644 --- a/src/pages/Movie.jsx +++ b/src/pages/Movie.jsx @@ -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 ? ( -
-
-
-

- {movie.title} - {movie.year} -

-

{movie.tagline}

-

{movie.overview}

+ return ( + <> + +
+
+
+

+ {movie?.title} - {movie?.year} +

+

{movie?.tagline}

+

{movie?.overview}

+
-
-
-
- {movie.genres.map((genre) => ( -

{genre}

- ))} -

- - Average Rating: {movie.averageVote.toFixed(1)} - - - - -

-
-
-

Your Rating

- -
- - Go to ratings - -
-
-

Actors

-
- {cast?.map((actor) => ( - - {actor.profile_path ? ( - {actor.name} - ) : ( -

Image Unavailable

- )} - -

{actor.name}

- +
+
+ {movie?.genres.map((genre) => ( +

{genre}

))} +

+ + Average Rating: {movie?.averageVote.toFixed(1)} + + + + +

+
+
+

Your Rating

+ +
+ + Go to ratings + +
+
+

Actors

+
+ {cast?.map((actor) => ( + + {actor.profile_path ? ( + {actor.name} + ) : ( +

Image Unavailable

+ )} + +

{actor.name}

+ + ))} +
-
- ) : ( -
+ ) } diff --git a/src/pages/Ratings.jsx b/src/pages/Ratings.jsx index e85dabb..5a878aa 100644 --- a/src/pages/Ratings.jsx +++ b/src/pages/Ratings.jsx @@ -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 ( -
-
-
- {ratings?.map((movie) => ( - setRating(rating, movie)} - /> - ))} + <> + +
+
+
+ {ratings?.map((movie) => ( + setRating(rating, movie)} + /> + ))} +
-
+ ) } diff --git a/src/styles/Actor.module.css b/src/styles/Actor.module.css index 19a77e9..0b433d6 100644 --- a/src/styles/Actor.module.css +++ b/src/styles/Actor.module.css @@ -3,7 +3,6 @@ flex-direction: column; padding: 15px; color: white; - padding-top: 80px; } .Name { margin-top: 10px; diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css index da286f9..e70b607 100644 --- a/src/styles/Home.module.css +++ b/src/styles/Home.module.css @@ -3,7 +3,6 @@ align-items: center; flex-direction: column; gap: 1.5em; - padding-top: 30px; } .CardList { @@ -15,14 +14,3 @@ gap: 20px; 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); -} diff --git a/src/styles/Movie.module.css b/src/styles/Movie.module.css index c83f0df..63d032f 100644 --- a/src/styles/Movie.module.css +++ b/src/styles/Movie.module.css @@ -5,7 +5,6 @@ .Top { height: 100vh; display: flex; - background-size: cover; background-position: center; background-repeat: no-repeat; @@ -16,6 +15,7 @@ .Summary { background: linear-gradient(#00000035, black); height: 15%; + overflow: scroll; text-align: center; } @@ -50,12 +50,15 @@ .Tags { display: flex; gap: 10px; + width: 100%; + overflow: scroll; } .Tags > * { background-color: var(--primary); padding: 5px 7px; border-radius: 10px; + white-space: nowrap; } .Average { diff --git a/src/styles/Ratings.module.css b/src/styles/Ratings.module.css index 39e2851..0fabf03 100644 --- a/src/styles/Ratings.module.css +++ b/src/styles/Ratings.module.css @@ -5,7 +5,6 @@ gap: 1.5em; color: white; padding: 10px; - padding-top: 90px; } .CardList { diff --git a/src/styles/TopBar.module.css b/src/styles/TopBar.module.css index ab768b1..7f8f519 100644 --- a/src/styles/TopBar.module.css +++ b/src/styles/TopBar.module.css @@ -1,13 +1,42 @@ +.Container.HasSearch { + --cols: 3; +} + .Container { - display: flex; + display: grid; width: 100%; - justify-content: space-between; - padding: 10px 20px; - background-color: transparent; - position: absolute; + grid-template-columns: repeat(var(--cols, 2), 1fr); + padding: 0 30px; + align-items: center; + background: linear-gradient(to bottom, #00000090, #00000000); color: white; } -.Container h1 { - color: white; +.Container.Absolute { + 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; }