toggleable timeline (#5)

* feat: beginnings for a silde-in timeline * feat: toggleTimeline function * feat: first go at open/closing the timeline * fix: now using "hidden" class instead of height * fix: "Timeline" now "Show Timeline" * fix: deleted useless code * feat: timeline now slides in and out with "hide timeline" button * style: format files --------- Co-authored-by: NateLydem <[email protected]> Co-authored-by: NateLydem <[email protected]>
flamingchickens1540 · Nov 9, 2024 · f5f2014 · f5f2014
1 parent 2eac10c
commit f5f2014
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
@@ -2,14 +2,28 @@
 	import type { ActionData } from '$lib/types';
 	import Action from './Action.svelte';
 
-	let { actions = $bindable() }: { actions: ActionData[] } = $props();
+	let {
+		actions = $bindable(),
+		displaying = $bindable()
+	}: { actions: ActionData[]; displaying: boolean } = $props();
 	// let latestActions: ActionData[] = $derived(actions.toReversed().slice(0, 5));
 </script>
 
 <h1 class="text-text_red">Timeline</h1>
 <div
-	class="flex flex-col items-center h-full bg-btn_grey border-solid border-2 border-text_red p-2 rounded gap-2 w-full overflow-auto"
+	class="flex flex-col items-center bg-btn_grey text-text_white p-1 rounded-t-lg transition-transform gap-2 fixed h-[50svh] inset-x-0 bottom-0
+{displaying ? '' : 'translate-y-full'}"
+	id="timeline"
 >
+	<button
+		class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray fixed bottom-0"
+		onclick={() => {
+			displaying = false;
+		}}
+	>
+		Hide Timeline
+	</button>
+
 	{#each actions as _, i}
 		<Action
 			bind:action={actions[i]}

diff --git a/src/routes/scout/+page.svelte b/src/routes/scout/+page.svelte
@@ -9,15 +9,25 @@
 		actions.push({ type: actionType.IntakeTote, result: actionResult.success });
 	}
 
-	let actions: ActionData[] = $state([]);
+	let timelineExtended = $state(false);
+	function toggleTimeline() {
+		timelineExtended = !timelineExtended;
+	}
+
+	let latestActions: ActionData[] = $state([]);
 </script>
 
 <main class="flex flex-col items-center gap-2 p-2 justify-center h-screen">
-	<Timeline bind:actions />
-
-	<!--to be changed in the future-->
-	<button
-		class="bg-btn_grey w-80 p-1 rounded border-2 border-text_red text-text_yellow"
-		onclick={addAction}>Add Action</button
-	>
+	<Timeline bind:actions={latestActions} bind:displaying={timelineExtended} />
+	<div class="flex flex-col grow justify-end">
+		<!--this button to be changed in the future (deleted)-->
+		<button
+			class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray static"
+			onclick={addAction}>Add Action</button
+		>
+		<button
+			class="bg-btn_grey w-80 p-1 rounded border-2 border-outline_gray static"
+			onclick={toggleTimeline}>Show Timeline</button
+		>
+	</div>
 </main>