Merge pull request #22 from OneBusAway/components

Couple small improvements

src/components/navigation/ModalPane.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { fly } from 'svelte/transition';
+	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
+	import { faX } from '@fortawesome/free-solid-svg-icons';
+	import { keybinding } from '$lib/keybinding';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function closePane() {
+		dispatch('close');
+	}
+</script>
+
+<div class="modal-pane" in:fly={{ y: 200, duration: 500 }} out:fly={{ y: 200, duration: 500 }}>
+	<div class="py-1 text-right">
+		<button
+			type="button"
+			on:click={closePane}
+			use:keybinding={{ code: 'Escape' }}
+			class="close-button"
+		>
+			<FontAwesomeIcon icon={faX} class="font-black text-black dark:text-white" />
+			<span class="sr-only">Close</span>
+		</button>
+	</div>
+
+	<slot></slot>
+</div>
+
+<style lang="postcss">
+	.modal-pane {
+		@apply absolute bottom-0 left-0 z-40 w-full bg-transparent px-2 shadow-lg md:max-w-prose;
+		@apply rounded-lg bg-[#F3F2F8] dark:bg-black;
+	}
+
+	.close-button {
+		@apply rounded px-4 py-2;
+		@apply transition duration-300 ease-in-out hover:bg-neutral-200 dark:hover:bg-neutral-200/50;
+	}
+</style>

src/components/oba/StopPane.svelte

@@ -1,27 +1,22 @@
 <script>
-	import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
-	import { faX } from '@fortawesome/free-solid-svg-icons';
-	import { createEventDispatcher } from 'svelte';
-	import { keybinding } from '$lib/keybinding';
 	import ArrivalDeparture from '../ArrivalDeparture.svelte';
 
 	export let stop;
 	let arrivalsAndDepartures;
 	let loading = false;
 	let error;
-
-	const dispatch = createEventDispatcher();
-
-	function closePane() {
-		dispatch('closePane');
-	}
+	let routeShortNames = null;
 
 	async function loadData(stopID) {
 		loading = true;
 		const response = await fetch(`/api/oba/arrivals-and-departures-for-stop/${stopID}`);
 		if (response.ok) {
 			const json = await response.json();
 			arrivalsAndDepartures = json.data.entry;
+			routeShortNames = json.data.references.routes
+				.filter((r) => stop.routeIds.includes(r.id))
+				.map((r) => r.nullSafeShortName)
+				.sort();
 		} else {
 			error = 'Unable to fetch arrival/departure data';
 		}
@@ -34,7 +29,7 @@
 	})(stop);
 </script>
 
-<div class="relative rounded-lg bg-[#F3F2F8] p-6 dark:bg-black">
+<div>
 	{#if loading}
 		<div
 			class="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-[#1C1C1E] bg-opacity-80"
@@ -65,17 +60,13 @@
 
 	{#if arrivalsAndDepartures}
 		<div>
-			<div class="relative">
+			<div>
 				<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
 					<h1 class="text-xl font-semibold text-white">{stop.name}</h1>
-					<h1 class="text-lg text-white">Stop #{stop.name}</h1>
-					<h1 class="text-lg text-white">Routes: {stop.name}</h1>
-				</div>
-				<div class="absolute -right-4 -top-6">
-					<button type="button" on:click={closePane} use:keybinding={{ code: 'Escape' }}>
-						<FontAwesomeIcon icon={faX} class="text-black dark:text-white" />
-						<span class="sr-only">Close</span>
-					</button>
+					<h1 class="text-lg text-white">Stop #{stop.id}</h1>
+					{#if routeShortNames}
+						<h1 class="text-lg text-white">Routes: {routeShortNames.join(', ')}</h1>
+					{/if}
 				</div>
 			</div>
 			<div>

src/routes/+page.svelte

@@ -1,6 +1,6 @@
 <script>
-	import { fly } from 'svelte/transition';
 	import GoogleMap from '../components/map/GoogleMap.svelte';
+	import ModalPane from '../components/navigation/ModalPane.svelte';
 	import StopPane from '../components/oba/StopPane.svelte';
 
 	let stop;
@@ -15,13 +15,9 @@
 </script>
 
 {#if stop}
-	<div
-		class="absolute bottom-0 left-0 z-40 w-full bg-transparent px-2 shadow-lg md:max-w-prose"
-		in:fly={{ y: 200, duration: 500 }}
-		out:fly={{ y: 200, duration: 500 }}
-	>
-		<StopPane {stop} on:closePane={closePane} />
-	</div>
+	<ModalPane on:close={closePane}>
+		<StopPane {stop} />
+	</ModalPane>
 {/if}
 
 <GoogleMap on:stopSelected={stopSelected} />

svelte.config.js

@@ -1,4 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -10,7 +11,8 @@ const config = {
 		alias: {
 			$images: './src/assets/images'
 		}
-	}
+	},
+	preprocess: vitePreprocess()
 };
 
 export default config;