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

expand text area
Gitea/movie-explorer/pipeline/head There was a failure building this commit Details

This commit is contained in:
andrzej 2024-10-07 18:33:40 +02:00
parent 02884fef4d
commit 453cc9458d
2 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/index.css
View File

@ -1,3 +1,25 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #444;
border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

20
src/objects/sidebar.tsx
View File

@ -19,21 +19,27 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
"Summary unavailable." : "Summary unavailable." :
"" ""
return <div id="sidebar" className={className}> return <div id="sidebar" className={className}>
<h1 className="font-bold text-base sm:text-lg text-nowrap sm:text-wrap my-1 sm:my-4 sm:h-14 overflow-hidden">{movie?.title ?? "loading"}</h1> <div className="sm:h-14 w-fit flex justify-center items-center">
<h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
</div>
<div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center"> <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
<a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center"> <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
<CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{ <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
objectFit: "clip", objectFit: "clip",
height: "100%" height: "100%",
apectRatio: "2 / 3"
}} /> }} />
</a> </a>
{similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."} {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
<div className="h-32 sm:h-56 w-64 sm:w-full overflow-scroll sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg "> <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
{/* TODO: make the apology vertically centered */} {/* TODO: make the apology vertically centered */}
<p id="summary" className="self-start">{movie.overview === null ? "Loading" {movie.overview === null ?
: movie.overview === "" ? apology <p>Loading...</p>
: movie.overview} : movie.overview === "" ?
</p> <p>{apology}</p>
:
<p className="self-start">{movie.overview}</p>
}
</div> </div>
</div> </div>
<WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" /> <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />