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

fix: Issues with grid item sizing

Browse Source
This commit is contained in:
Aleksi Lassila
2024-05-31 19:53:39 +03:00
parent 8acfd0f4d9
commit f6b9ac41ba
6 changed files with 78 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,46 +4,49 @@
import classNames from 'classnames';
import { getCardDimensions } from '../utils';
export let direction: 'horizontal' | 'vertical' = 'vertical';
// export let direction: 'horizontal' | 'vertical' = 'vertical';
export let type: 'portrait' | 'landscape' = 'portrait';
let cols = getCardDimensions(window.innerWidth).columns;
let cols = getCardDimensions(window.innerWidth, type).columns;
$: console.log('cols', cols);
// let cols: number = 1;
const calculateRows = () => {
const width = window.innerWidth;
if (direction === 'vertical') {
if (width >= 1536) {
cols = 6;
} else if (width >= 1280) {
cols = 5;
} else if (width >= 768) {
cols = 4;
} else {
cols = 3;
}
} else {
// if (width >= 1920) {
// cols = 4;
// } else
if (width >= 1536) {
cols = 3;
} else if (width >= 1280) {
cols = 2;
} else if (width >= 768) {
cols = 1;
} else {
cols = 1;
}
}
};
// const calculateRows = () => {
// const width = window.innerWidth;
// if (direction === 'vertical') {
// if (width >= 1536) {
// cols = 6;
// } else if (width >= 1280) {
// cols = 5;
// } else if (width >= 768) {
// cols = 4;
// } else {
// cols = 3;
// }
// } else {
// // if (width >= 1920) {
// // cols = 4;
// // } else
// if (width >= 1536) {
// cols = 3;
// } else if (width >= 1280) {
// cols = 2;
// } else if (width >= 768) {
// cols = 1;
// } else {
// cols = 1;
// }
// }
// };
// onMount(() => {
// calculateRows();
// });
</script>
<svelte:window on:resize={(e) => (cols = getCardDimensions(e.currentTarget.innerWidth).columns)} />
<svelte:window
on:resize={(e) => (cols = getCardDimensions(e.currentTarget.innerWidth, type).columns)}
/>
<Container
direction="grid"
@@ -51,8 +54,8 @@
class={classNames(
'grid gap-x-8 gap-y-8',
{
'grid-cols-1 md:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4':
direction === 'horizontal'
// 'grid-cols-1 md:grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4':
// direction === 'horizontal'
// 'grid-cols-4 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6': direction === 'vertical'
},