Resume
/
movie-explorer
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix shifting chosenMovie image

This commit is contained in:
andrzej 2024-05-22 10:55:28 +02:00
parent f17b85a033
commit 05c9bb9d62
2 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.css
View File

@ -56,36 +56,38 @@ main {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
display: grid; display: grid;
grid-template-rows: 1fr 2fr 2fr 1fr; grid-template-rows: 1fr 2fr 2fr 1fr;
; align-items: center;
justify-content: center;
h1 { h1 {
font-size: 2em; font-size: 1.2em;
margin: 1rem 0 0 0;
font-family: RobotoBold; font-family: RobotoBold;
padding: 0.1em 0.2em 0.1em 0.2em;
grid-row: 1/ span 1; grid-row: 1/ span 1;
height: fit-content;
overflow: hidden; overflow: hidden;
} }
figure { a {
display: contents;
}
margin: 0;
grid-row: 2/ span 1;
.chosen-movie-poster {
object-fit: cover;
height: 100%;
width: 100%; width: 100%;
margin: 0; display: flex;
grid-row: 2/ span 1; justify-content: center;
place-self: center;
.chosen-movie-poster {
aspect-ratio: 2/3;
max-width: 100%;
max-height: 100%;
}
} }
#summary { #summary {
overflow: scroll; overflow: scroll;
max-height: 24rem; max-height: 100%;
grid-row: 3/ span 1; grid-row: 3/ span 1;
} }
@ -96,7 +98,9 @@ main {
} }
footer { footer {
font-size: 1.2rem;
grid-row: 4/ span 1; grid-row: 4/ span 1;
overflow: hidden;
} }
} }
@ -180,7 +184,7 @@ main {
border: 1rem white; border: 1rem white;
h1 { h1 {
font-size: 1.6rem; font-size: 1.4rem;
} }
} }

12
src/objects/sidebar.tsx
View File

@ -11,14 +11,10 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: SidebarProps) { export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: SidebarProps) {
return <div id="sidebar"> return <div id="sidebar">
<h1>{movie?.title ?? "loading"}</h1> <h1>{movie?.title ?? "loading"}</h1>
<figure> <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
<a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer"> <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
<CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" /> </a>
</a> {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
<figcaption>
{similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
</figcaption>
</figure>
<p id="summary">{movie.overview === null ? "Loading" <p id="summary">{movie.overview === null ? "Loading"
: movie.overview === "" ? "Resumen no disponible." : movie.overview === "" ? "Resumen no disponible."
: movie.overview} : movie.overview}