starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-22 00:35:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added max widths for movie & series pages

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-09 00:14:31 +03:00
parent a953f27c31
commit 536d11cf78
4 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/EpisodeCard/EpisodeCard.svelte
View File

@@ -63,7 +63,7 @@
<button
on:click
class={classNames(
'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative selectable flex-shrink-0 placeholder-image',
'aspect-video bg-center bg-cover bg-no-repeat rounded-lg overflow-hidden transition-all shadow-lg relative selectable flex-shrink-0 placeholder-image flex',
{
'h-40': size === 'md',
'h-full': size === 'dynamic',
@@ -77,7 +77,7 @@
>
<div
class={classNames(
'flex flex-col justify-between h-full group-hover:opacity-0 transition-all',
'flex-1 flex flex-col justify-between group-hover:opacity-0 transition-all',
{
'px-2 lg:px-3 pt-2': true,
'pb-4 lg:pb-6': progress,

72
src/lib/components/TitlePageLayout.svelte
View File

@@ -5,7 +5,7 @@
import Carousel from './Carousel/Carousel.svelte';
import CarouselPlaceholderItems from './Carousel/CarouselPlaceholderItems.svelte';
export let backdropPath: string;
export let backdropUriCandidates: string[];
export let posterPath: string;
export let title: string;
@@ -16,6 +16,10 @@
let windowHeight: number;
let imageHeight: number;
$: imageHeight = windowHeight - bottomHeight * 0.3;
function getBackdropUri(uris: string[]) {
return uris[Math.max(2, Math.floor(uris.length / 8))] || uris[uris.length - 1] || '';
}
</script>
<svelte:window bind:innerHeight={windowHeight} />
@@ -23,7 +27,7 @@
<div
style={"background-image: url('" +
TMDB_IMAGES_ORIGINAL +
backdropPath +
getBackdropUri(backdropUriCandidates) +
"'); height: " +
imageHeight.toFixed() +
'px'}
@@ -34,8 +38,8 @@
<div class="flex flex-col h-screen" transition:fade>
<div class="flex-1 relative flex pt-24 px-4 sm:px-8">
<div class="absolute inset-0 bg-gradient-to-t from-black to-30%" />
<div class="z-[1] flex-1 flex justify-end gap-8 items-end">
<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-30%" />
<div class="z-[1] flex-1 flex justify-end gap-8 items-end max-w-screen-2xl mx-auto">
<div
class="aspect-[2/3] w-52 bg-center bg-cover rounded-md hidden sm:block"
style={"background-image: url('" + TMDB_POSTER_SMALL + posterPath + "')"}
@@ -63,14 +67,18 @@
</div>
</div>
</div>
<div class="py-6 bg-black" bind:clientHeight={bottomHeight}>
<slot name="episodes-carousel" />
<div bind:clientHeight={bottomHeight} class="py-6 bg-stone-950">
<div class="max-w-screen-2xl mx-auto">
<div class="2xl:-mx-8">
<slot name="episodes-carousel" />
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-8 bg-black">
<div class="flex flex-col gap-6 bg-stone-950">
<div
class="mx-4 sm:mx-8 py-4 sm:py-6 px-6 sm:px-10 grid grid-cols-4 sm:grid-cols-6 gap-4 sm:gap-x-8 bg-stone-900 rounded-xl"
class="mx-4 sm:mx-8 grid grid-cols-4 sm:grid-cols-6 gap-4 sm:gap-x-8 rounded-xl py-6 max-w-screen-2xl 2xl:mx-auto"
>
<slot name="info-description">
<div
@@ -118,28 +126,34 @@
</div>
</slot>
</div>
<div>
<Carousel gradientFromColor="from-black">
<slot name="cast-crew-carousel-title" slot="title" />
<slot name="cast-crew-carousel">
<CarouselPlaceholderItems />
</slot>
</Carousel>
<div class="max-w-screen-2xl 2xl:mx-auto">
<div class="2xl:-mx-8">
<Carousel gradientFromColor="from-stone-950">
<slot name="cast-crew-carousel-title" slot="title" />
<slot name="cast-crew-carousel">
<CarouselPlaceholderItems />
</slot>
</Carousel>
</div>
</div>
<div>
<Carousel gradientFromColor="from-black">
<slot name="recommendations-carousel-title" slot="title" />
<slot name="recommendations-carousel">
<CarouselPlaceholderItems />
</slot>
</Carousel>
<div class="max-w-screen-2xl 2xl:mx-auto">
<div class="2xl:-mx-8">
<Carousel gradientFromColor="from-stone-950">
<slot name="recommendations-carousel-title" slot="title" />
<slot name="recommendations-carousel">
<CarouselPlaceholderItems />
</slot>
</Carousel>
</div>
</div>
<div>
<Carousel gradientFromColor="from-black">
<slot name="similar-carousel-title" slot="title" />
<slot name="similar-carousel">
<CarouselPlaceholderItems />
</slot>
</Carousel>
<div class="max-w-screen-2xl 2xl:mx-auto">
<div class="2xl:-mx-8">
<Carousel gradientFromColor="from-stone-950">
<slot name="similar-carousel-title" slot="title" />
<slot name="similar-carousel">
<CarouselPlaceholderItems />
</slot>
</Carousel>
</div>
</div>
</div>