Restructure cases and controls

src/routes/+page.svelte

@@ -42,7 +42,7 @@
 	let metrics = [];
 	let gdelt = [];
 	let maxAttribution = 0;
-	let metaData
+	let metaData;
 
 	onMount(async function () {
 		const response = await csv(
@@ -119,26 +119,31 @@
 			'https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/gdelt_volume_timeline.csv'
 		);
 
-		gdelt = gdeltResponse.map(d => {
+		gdelt = gdeltResponse
+			.map((d) => {
 				let obj = {};
 				obj.date = new Date(d.Date);
 				obj.value = +d.Value;
-			obj.country = d.Country
+				obj.country = d.Country;
-			return obj
+				return obj;
-		}).filter(d => !['North Korea', 'Israel'].includes(d.country))
+			})
+			.filter((d) => !['North Korea', 'Israel'].includes(d.country));
 		gdelt.sort((a, b) => {
 			return a.date - b.date;
 		});
 
-		metaData = await json('https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/fiat-metadata.json')
+		metaData = await json(
-		let overviewIndex = copy.intro.map(d => d.id).indexOf('overview')
+			'https://fiat-2024-processed-data.s3.us-west-2.amazonaws.com/fiat-metadata.json'
-		let parsToProcess = copy.intro[overviewIndex].paragraphs
+		);
+		let overviewIndex = copy.intro.map((d) => d.id).indexOf('overview');
+		let parsToProcess = copy.intro[overviewIndex].paragraphs;
 		let processedPars = parsToProcess.map((d) =>
-			d.replace('{{number_of_cases}}', metaData.number_of_cases)
+			d
+				.replace('{{number_of_cases}}', metaData.number_of_cases)
 				.replace('{{number_of_nations}}', metaData.number_of_nations)
 				.replace('{{last_modified}}', metaData.last_modified)
-				)
+		);
-		copy.intro[overviewIndex].paragraphs = processedPars
+		copy.intro[overviewIndex].paragraphs = processedPars;
 
 		if ($page.url.searchParams.has('filters')) {
 			const urlFilters = parseUrl($page.url.searchParams.get('filters'));
@@ -167,8 +172,7 @@
 				}
 				if (b[option.id] > a[option.id] && sortOrder == 'Ascending') {
 					return -1;
-				}
+				} else {
-				else {
 					return 0;
 				}
 			}
@@ -184,8 +188,7 @@
 				}
 				if (b[option.id][0] > a[option.id][0] && sortOrder == 'Ascending') {
 					return -1;
-				}
+				} else {
-				else {
 					return 0;
 				}
 			}
@@ -215,7 +218,7 @@
 	};
 
 	let selectedSorting = { id: 'attribution_date', label: 'Attribution Date', type: 'date' };
-	let sortingOrder = 'Descending'
+	let sortingOrder = 'Descending';
 
 	let modalOpen = false;
 	let activeCaseData;
@@ -288,10 +291,10 @@
 	</div>
 </section>
 
-{#if displayDataAs == 'Cards'}
 <section class="section">
 	<div class="container">
 		<CasesControls bind:displayDataAs bind:selectedSorting bind:sortingOrder></CasesControls>
+		{#if displayDataAs == 'Cards'}
 			<div class="grid is-col-min-12">
 				{#each sortedCases as attrCase}
 					{#if attrCase.show}
@@ -302,23 +305,17 @@
 					{/if}
 				{/each}
 			</div>
-		</div>
-	</section>
 		{/if}
-
 		{#if displayDataAs == 'Table' && sortedCases.length > 0}
-	<section class="section">
-		<div class="container">
-			<CasesControls bind:displayDataAs bind:selectedSorting bind:sortingOrder></CasesControls>
 			<CaseTable cases={sortedCases}></CaseTable>
+		{/if}
 	</div>
 </section>
-{/if}
 
 <section class="section">
 	<div class="container">
 		{#each copy.moreInfo as block}
-		<div class={block.type == 'text' ? "about" : ""}>
+			<div class={block.type == 'text' ? 'about' : ''}>
 				{#if block.type == 'text'}
 					<h3 class="is-size-3">{block.title}</h3>
 					{#each block.paragraphs as par}
@@ -339,7 +336,8 @@
 	section {
 		font-family: var(--font-02);
 	}
-	.intro, .about {
+	.intro,
+	.about {
 		max-width: 800px;
 		margin: auto;
 	}
@@ -374,4 +372,7 @@
 		padding: 1rem;
 		z-index: 750;
 	}
+	.cases-controls {
+		margin-bottom: -2rem;
+	}
 </style>