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

feat: Episode carousel -> Episode grid

Browse Source
This commit is contained in:
Aleksi Lassila
2024-04-18 02:49:05 +03:00
parent c7b80060f2
commit d1a7b3b7e6
8 changed files with 196 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/components/CardGrid.svelte
View File

@@ -1,18 +1,33 @@
<script lang="ts">
import Container from '../../Container.svelte';
import { onMount } from 'svelte';
import classNames from 'classnames';
export let direction: 'horizontal' | 'vertical' = 'vertical';
let cols: number = 1;
const calculateRows = () => {
const width = window.innerWidth;
if (width >= 1536) {
cols = 5;
} else if (width >= 1280) {
cols = 4;
} else if (width >= 768) {
cols = 3;
if (direction === 'vertical') {
if (width >= 1536) {
cols = 6;
} else if (width >= 1280) {
cols = 5;
} else if (width >= 768) {
cols = 4;
} else {
cols = 3;
}
} else {
cols = 2;
if (width >= 1536) {
cols = 4;
} else if (width >= 1280) {
cols = 3;
} else if (width >= 768) {
cols = 2;
} else {
cols = 1;
}
}
};
@@ -24,7 +39,16 @@
<Container
direction="grid"
gridCols={cols}
class="grid gap-x-4 gap-y-8 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
class={classNames(
'grid gap-x-4 gap-y-8',
{
'grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4': direction === 'horizontal',
'grid-cols-4 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6': direction === 'vertical'
},
$$restProps.class
)}
on:mount
>
<slot />
</Container>