feat: adjust carousal responsive size

wevisdemo · May 30, 2024 · ba67403 · ba67403
1 parent f3bd443
commit ba67403
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 67 deletions.
diff --git a/src/components/Index/BillContent.svelte b/src/components/Index/BillContent.svelte
@@ -25,9 +25,6 @@
 	import Carousel from './Carousel.svelte';
 	import { Button } from 'carbon-components-svelte';
 
-	const MAX_ENACTED_BILL_PER_VIEW = 3.25;
-	const MAX_BILL_STATUS_PER_VIEW = 3;
-
 	const billStatusList = Object.values(BillStatus);
 
 	export let billByCategoryAndStatus: BillByCategoryAndStatus;
@@ -76,12 +73,10 @@
 	{#key selectedCategory}
 		<Carousel
 			options={{
-				loop: false,
-				slides: { perView: 'auto', spacing: 12 },
 				breakpoints: {
-					'(min-width: 1200px)': {
+					'(min-width: 672px)': {
 						slides: {
-							perView: MAX_BILL_STATUS_PER_VIEW,
+							perView: 3,
 							spacing: 12
 						}
 					}
@@ -114,20 +109,7 @@
 		</div>
 
 		{#key selectedCategory}
-			<Carousel
-				options={{
-					loop: false,
-					slides: { perView: 'auto', spacing: 12 },
-					breakpoints: {
-						'(min-width: 1300px)': {
-							slides: {
-								perView: MAX_ENACTED_BILL_PER_VIEW,
-								spacing: 12
-							}
-						}
-					}
-				}}
-			>
+			<Carousel>
 				{#each lastestEnactedBills as bill (bill.id)}
 					<BillCard class="keen-slider__slide min-w-72" orientation="portrait" {bill} />
 				{/each}

diff --git a/src/components/Index/Carousel.svelte b/src/components/Index/Carousel.svelte
@@ -28,17 +28,20 @@
 
 	onMount(() => {
 		slider = new KeenSlider(elCarousel, {
-			loop: true,
+			loop: false,
 			mode: 'free-snap',
-			slides: {
-				perView: 1,
-				spacing: 12
-			},
+			slides: { perView: 1.25, spacing: 12 },
 			renderMode: 'performance',
 			breakpoints: {
-				'(min-width: 672px)': {
+				'(min-width: 560px)': {
+					slides: {
+						perView: 2.25,
+						spacing: 12
+					}
+				},
+				'(min-width: 960px)': {
 					slides: {
-						perView: 3,
+						perView: 3.25,
 						spacing: 12
 					}
 				}

diff --git a/src/components/Index/VotingContent.svelte b/src/components/Index/VotingContent.svelte
@@ -10,7 +10,7 @@
 
 <div>
 	<h3 class="fluid-heading-04 mb-4">{latestVotings.length} ผลการลงมติล่าสุด</h3>
-	<Carousel options={{ loop: false }}>
+	<Carousel>
 		{#each latestVotings as { voting, highlightedVoteByGroups } (voting.id)}
 			<VoteCard class="keen-slider__slide" {voting} {highlightedVoteByGroups} />
 		{/each}

diff --git a/src/routes/bills/+page.svelte b/src/routes/bills/+page.svelte
@@ -10,8 +10,6 @@
 	import ArrowRight from 'carbon-icons-svelte/lib/ArrowRight.svelte';
 	import LawIcom from '../../components/icons/LawIcon.svelte';
 
-	const MAX_ENACTED_BILL_PER_VIEW = 5;
-
 	export let data;
 
 	let searchResults: SearchResults | null;
@@ -60,19 +58,17 @@
 		</header>
 		<Carousel
 			options={{
-				loop: false,
-				slides: { perView: 'auto', spacing: 12 },
 				breakpoints: {
-					'(min-width: 1200px)': {
+					'(min-width: 672px)': {
 						slides: {
-							perView: data.byStatus.length,
+							perView: 3,
 							spacing: 12
 						}
 					}
 				}
 			}}
 		>
-			{#each data.byStatus as bill}
+			{#each data.byStatus as bill (bill.status)}
 				<LawStatusCard totalCount={data.totalCount} {bill} />
 			{/each}
 		</Carousel>
@@ -82,29 +78,16 @@
 			<h2 class="fluid-heading-03">สำรวจตามหมวด</h2>
 			<p class="body-01">ร่างกฎหมาย 1 ฉบับมีได้มากกว่า 1 หมวด</p>
 		</header>
-		<Carousel options={{ loop: false, slides: { perView: 'auto', spacing: 12 }, breakpoints: {} }}>
+		<Carousel>
 			{#each data.byCategory as bill}
 				<LawStatusCard totalCount={data.totalCount} {bill} />
 			{/each}
 		</Carousel>
 	</section>
 	<section class="mx-auto flex max-w-[1280px] flex-col gap-3 px-4 py-6">
 		<h2 class="fluid-heading-03">สำรวจตามประเภทผู้เสนอ</h2>
-		<Carousel
-			options={{
-				loop: false,
-				slides: { perView: 'auto', spacing: 12 },
-				breakpoints: {
-					'(min-width: 900px)': {
-						slides: {
-							perView: data.byProposerType.length,
-							spacing: 12
-						}
-					}
-				}
-			}}
-		>
-			{#each data.byProposerType as bill}
+		<Carousel>
+			{#each data.byProposerType as bill (bill.proposerType)}
 				<LawStatusCard totalCount={data.totalCount} {bill} />
 			{/each}
 		</Carousel>
@@ -115,21 +98,8 @@
 		<h2 class="fluid-heading-03 text-white">
 			{data.latestEnactedBills.length} ฉบับล่าสุดที่ได้ออกเป็นกฏหมาย
 		</h2>
-		<Carousel
-			options={{
-				loop: false,
-				slides: { perView: 'auto', spacing: 12 },
-				breakpoints: {
-					'(min-width: 1300px)': {
-						slides: {
-							perView: MAX_ENACTED_BILL_PER_VIEW,
-							spacing: 12
-						}
-					}
-				}
-			}}
-		>
-			{#each data.latestEnactedBills as bill}
+		<Carousel>
+			{#each data.latestEnactedBills as bill (bill.id)}
 				<BillCard class="keen-slider__slide min-w-72" orientation="portrait" {bill} />
 			{/each}
 		</Carousel>