From da3f4240195be13d6043e3974c76a0e9550f4b8c Mon Sep 17 00:00:00 2001
From: seriousm4x <maxi@quoss.org>
Date: Tue, 25 Jul 2023 18:35:36 +0200
Subject: [PATCH] add page transitions

---
 frontend/src/lib/components/Transition.svelte | 10 ++++++++++
 frontend/src/routes/+layout.svelte            |  9 ++++++---
 frontend/src/routes/device/[id]/+page.svelte  |  6 +++---
 3 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/lib/components/Transition.svelte

diff --git a/frontend/src/lib/components/Transition.svelte b/frontend/src/lib/components/Transition.svelte
new file mode 100644
index 00000000..0edaa225
--- /dev/null
+++ b/frontend/src/lib/components/Transition.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	export let url: URL;
+</script>
+
+{#key url}
+	<div in:fly={{ y: 50, duration: 300 }}>
+		<slot />
+	</div>
+{/key}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index e4bfb231..ac89d84b 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
 	import { pocketbase, backendUrl, devices } from '$lib/stores/pocketbase';
 	import { settingsPub } from '$lib/stores/settings';
 	import Navbar from '$lib/components/Navbar.svelte';
+	import Transition from '$lib/components/Transition.svelte';
 	import type { Device } from '$lib/types/device';
 
 	onMount(async () => {
@@ -68,6 +69,8 @@
 	<Navbar />
 {/if}
 
-<div class="container mx-auto p-2">
-	<slot />
-</div>
+<Transition url={$page.url}>
+	<div class="container mx-auto p-2 mb-4">
+		<slot />
+	</div>
+</Transition>
diff --git a/frontend/src/routes/device/[id]/+page.svelte b/frontend/src/routes/device/[id]/+page.svelte
index 208afa5f..3dbdc036 100644
--- a/frontend/src/routes/device/[id]/+page.svelte
+++ b/frontend/src/routes/device/[id]/+page.svelte
@@ -280,15 +280,15 @@
 					linux or
 					<span class="badge">curl</span> in general to make web requests.
 				</p>
-				<p class="my-2 font-bold">Example:</p>
-				<div class="alert text-sm bg-base-100 text-start">
+				<p class="my-2 font-bold">Examples:</p>
+				<div class="alert text-sm bg-base-100 text-start w-fit">
 					<div>
 						<span class="font-bold">Shutdown remote windows machine:</span>
 						<pre
 							class="break-words whitespace-pre-wrap">net rpc shutdown -I 192.168.1.13 -U "user%password"</pre>
 					</div>
 				</div>
-				<div class="alert text-sm my-2 bg-base-100 text-start">
+				<div class="alert text-sm my-2 bg-base-100 text-start w-fit">
 					<div>
 						<span class="font-bold">Shutdown remote linux machine:</span>
 						<pre