Merge pull request #66 from pvdthings/web-thing-details

Web: (Fixes) Thing Details - Iteration 1

Author: dillonfagan

apps/web/src/lib/components/Drawer/Contents.svelte

@@ -25,13 +25,13 @@
 
 <div class="drawer drawer-end">
 	<input id="drawer-toggle" type="checkbox" class="drawer-toggle" />
-	<div class="flex flex-col w-screen h-screen overflow-hidden drawer-content">
+	<div class="flex flex-col h-dvh w-screen overflow-hidden drawer-content">
 		<label bind:this={drawerToggle} for="drawer-toggle" />
 		<slot />
 	</div>
 	<div class="drawer-side z-50">
     <label for="drawer-toggle" aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="bg-base-200 text-base-content h-screen">
+    <div class="bg-base-200 text-base-content flex flex-col h-dvh w-screen overflow-hidden md:w-80 lg:w-96 relative">
       <svelte:component this={drawerContent} {...drawerContentProps} />
     </div>
   </div>

apps/web/src/lib/components/Drawer/index.ts

@@ -2,31 +2,30 @@
 	import AbsoluteCenter from '$lib/components/AbsoluteCenter.svelte';
 	import { things } from '$lib/stores/things';
 	import LoadingSpinner from '$lib/components/LoadingSpinner.svelte';
-	import Contents from '$lib/components/Drawer';
 	import Details from './Details.svelte';
+	import { locale } from '$lib/language/translate';
 
 	export let id: string;
 
 	$: details = things.details(id);
 	$: loading = $details.loading;
 	$: thing = $details.value;
+	$: thingName = $locale === 'en' ? thing?.name : thing?.spanishName ?? thing?.name;
 </script>
 
-<Contents>
-	{#if loading}
-		<AbsoluteCenter>
-			<LoadingSpinner />
-		</AbsoluteCenter>
-	{:else}
-		<Details
-			id={thing.id}
-			name={thing.name}
-			image={thing.image}
-			categories={thing.categories}
-			stock={thing.stock}
-			available={thing.available}
-			availableDate={thing.availableDate}
-			items={thing.items}
-		/>
-	{/if}
-</Contents>
+{#if loading}
+	<AbsoluteCenter>
+		<LoadingSpinner />
+	</AbsoluteCenter>
+{:else}
+	<Details
+		id={thing.id}
+		name={thingName}
+		image={thing.image}
+		categories={thing.categories}
+		stock={thing.stock}
+		available={thing.available}
+		availableDate={thing.availableDate}
+		items={thing.items}
+	/>
+{/if}