Some small improvements
This commit is contained in:
“Henry-Hiles”
parent
bac3b7e700
commit
ebf8b8419a
6 changed files with 112 additions and 52 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ const Actor = () => {
|
|||
<>
|
||||
<TopBar />
|
||||
<div className={styles.Container}>
|
||||
<hr />
|
||||
<div className={styles.Top}>
|
||||
<h1 className={styles.Name}>{actor?.name}</h1>
|
||||
<div className={styles.Section}>
|
||||
<h2>Biography</h2>
|
||||
|
|
@ -80,9 +80,9 @@ const Actor = () => {
|
|||
}
|
||||
>
|
||||
<p
|
||||
className={
|
||||
className={`${
|
||||
collapsed ? styles.Collapsed : ""
|
||||
}
|
||||
} ${styles.Biography}`}
|
||||
>
|
||||
{actor.biography}
|
||||
</p>
|
||||
|
|
@ -90,26 +90,14 @@ const Actor = () => {
|
|||
<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}`}
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Reference in a new issue