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

Some small improvements

Browse source
This commit is contained in:
“Henry-Hiles” 2022-11-08 15:43:47 -05:00
parent bac3b7e700
commit ebf8b8419a
6 changed files with 112 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/index.css
View file

@ -1,6 +1,7 @@
:root {
--primary: #14bbaa;
--secondary: #2c3c4c;
scroll-behavior: smooth;
}
*,
@ -14,6 +15,7 @@ body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", sans-serif;
margin: 0;
background-color: var(--secondary);
}

78
src/pages/Actor.jsx
View file

@ -66,50 +66,38 @@ const Actor = () => {
<>
<TopBar />
<div className={styles.Container}>
<hr />
<h1 className={styles.Name}>{actor?.name}</h1>
<div className={styles.Section}>
<h2>Biography</h2>
<div>
{actor?.biography ? (
<a
href="#"
className={styles.Collapse}
onClick={() =>
setCollapsed((collapsed) => !collapsed)
}
>
<p
className={
collapsed ? styles.Collapsed : ""
<div className={styles.Top}>
<h1 className={styles.Name}>{actor?.name}</h1>
<div className={styles.Section}>
<h2>Biography</h2>
<div>
{actor?.biography ? (
<a
href="#"
className={styles.Collapse}
onClick={() =>
setCollapsed((collapsed) => !collapsed)
}
>
{actor.biography}
</p>
<p
className={`${
collapsed ? styles.Collapsed : ""
} ${styles.Biography}`}
>
{actor.biography}
</p>
<p className={styles.ReadMore}>
{collapsed ? "Read More" : "Read Less"}
</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}`}
/>
))}
<p className={styles.ReadMore}>
{collapsed ? "Read More" : "Read Less"}
</p>
</a>
) : (
<p>No biography available.</p>
)}
</div>
</div>
</div>
<div className={styles.Section}>
<h2>Movies</h2>
<div className={styles.Credits}>
@ -125,6 +113,18 @@ const Actor = () => {
))}
</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>
</>
)

31
src/pages/Movie.jsx
View file

@ -65,15 +65,32 @@ const Movie = () => {
backgroundImage: `url(${movie?.backdropUrl})`,
}}
>
<img className={styles.Thumb} src={movie?.posterUrl} />
<div className={styles.Summary}>
<h2 className={styles.Title}>
<h1 className={styles.Title}>
{movie?.title} - {movie?.year}
</h2>
<p>{movie?.tagline}</p>
<p className={styles.Overview}>{movie?.overview}</p>
</h1>
<p className={styles.Tagline}>{movie?.tagline}</p>
<a href="#bottom" className={styles.More}>
<p>More info</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
/>
</svg>
</a>
</div>
</div>
<div className={styles.Bottom}>
<div className={styles.Bottom} id="bottom">
<div className={styles.Tags}>
{movie?.genres.map((genre) => (
<p key={genre}>{genre}</p>
@ -93,6 +110,10 @@ const Movie = () => {
</svg>
</p>
</div>
<div className={styles.Section}>
<h1 className={styles.Header}>Overview</h1>
<p className={styles.Overview}>{movie?.overview}</p>
</div>
<div className={styles.Section}>
<h1 className={styles.Header}>Your Rating</h1>
<Rate rating={rating} setRating={setRating} />

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

@ -9,6 +9,14 @@
margin-top: 10px;
}
.Biography {
-webkit-box-orient: vertical;
font-size: 1.3em;
white-space: pre-line;
display: -webkit-box;
overflow: hidden;
}
.Images {
display: flex;
overflow: scroll;
@ -27,11 +35,6 @@
.Collapsed {
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
}
.Collapse {

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

@ -12,13 +12,46 @@
justify-content: flex-end;
}
.Thumb {
position: absolute;
left: 40px;
bottom: 50px;
box-shadow: 5px 5px 50px #00000030;
}
.Summary {
background: linear-gradient(#00000035, black);
height: 15%;
height: 30%;
font-size: 20px;
overflow: scroll;
text-align: center;
}
.Overview {
font-size: 1.3em;
}
.More {
color: white;
font-size: 1.3em;
font-weight: bold;
}
.More:not(:hover) {
text-decoration: none;
}
.Title {
margin-top: 10px;
margin-bottom: 15px;
font-size: 70px;
}
.Tagline {
font-size: 30px;
font-weight: bold;
}
.Bottom {
background-color: black;
height: 100vh;

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

@ -6,9 +6,9 @@
display: grid;
width: 100%;
grid-template-columns: 1fr;
padding: 10px 30px;
padding: 20px 30px;
gap: 10px;
background: linear-gradient(to bottom, #00000090, #00000010);
background: #00000050;
color: white;
}
@ -33,6 +33,7 @@
.Container.Absolute {
position: absolute;
background: linear-gradient(to bottom, #00000090, #00000010);
}
.Container a {