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
-			let obj = {};
+			.map((d) => {
-			obj.date = new Date(d.Date);
+				let obj = {};
-			obj.value = +d.Value;
+				obj.date = new Date(d.Date);
-			obj.country = d.Country
+				obj.value = +d.Value;
-			return obj
+				obj.country = d.Country;
-		}).filter(d => !['North Korea', 'Israel'].includes(d.country))
+				return obj;
+			})
+			.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 processedPars = parsToProcess.map((d) => 
+		let overviewIndex = copy.intro.map((d) => d.id).indexOf('overview');
-			d.replace('{{number_of_cases}}', metaData.number_of_cases)
+		let parsToProcess = copy.intro[overviewIndex].paragraphs;
+		let processedPars = parsToProcess.map((d) =>
+			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'));
@@ -161,14 +166,13 @@
 				}
 				if (b[option.id] > a[option.id] && sortOrder == 'Descending') {
 					return 1;
-				} 
+				}
 				if (a[option.id] > b[option.id] && sortOrder == 'Ascending') {
 					return 1;
 				}
 				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;
@@ -248,14 +251,14 @@
 <section class="section">
 	<div class="container has-text-centered">
 		<div class="intro">
-		{#each copy.intro as block}
+			{#each copy.intro as block}
-			{#if block.type == 'text'}
+				{#if block.type == 'text'}
-				{#each block.paragraphs as par}
+					{#each block.paragraphs as par}
-					<p class="mb-4">{@html par}</p>
+						<p class="mb-4">{@html par}</p>
-				{/each}
+					{/each}
-			{/if}
+				{/if}
-		{/each}
+			{/each}
-	</div>
+		</div>
 	</div>
 	<div class="container">
 		{#each copy.intro as block}
@@ -288,10 +291,10 @@
 	</div>
 </section>
 
-{#if displayDataAs == 'Cards'}
+<section class="section">
-	<section class="section">
+	<div class="container">
-		<div class="container">
+		<CasesControls bind:displayDataAs bind:selectedSorting bind:sortingOrder></CasesControls>
-			<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,30 +305,24 @@
 					{/if}
 				{/each}
 			</div>
-		</div>
+		{/if}
-	</section>
+		{#if displayDataAs == 'Table' && sortedCases.length > 0}
-{/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>
-		</div>
+		{/if}
-	</section>
+	</div>
-{/if}
+</section>
 
 <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'}
+				{#if block.type == 'text'}
-			<h3 class="is-size-3">{block.title}</h3>
+					<h3 class="is-size-3">{block.title}</h3>
-				{#each block.paragraphs as par}
+					{#each block.paragraphs as par}
-					<p class="mb-4">{@html par}</p>
+						<p class="mb-4">{@html par}</p>
-				{/each}
+					{/each}
-			{/if}
+				{/if}
-		</div>
+			</div>
 			{#if block.type == 'concealed-text'}
 				<Collapsible title={block.title} paragraphs={block.paragraphs} id={block.id} />
 			{/if}
@@ -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>