Optimizations for touch devices

src/lib/components/layout/navigation/Navbar.svelte

@@ -19,7 +19,7 @@
 			</a>
 		</div>
 
-		<div class="flex w-fit items-center justify-evenly sm:w-fit">
+		<div class="flex w-full items-center justify-evenly sm:w-fit">
 			{#each $navEntries as navTarget}
 				<NavigationButton target={navTarget} />
 			{/each}

src/lib/components/panes/Panes.svelte

@@ -50,8 +50,11 @@
 				isDragging = false;
 				if (percentage >= 70) setShowSideBar(false);
 
-				percentage = 0;
-				setPercentages(percentage);
+				const intervalId = setInterval(() => {
+					percentage -= 2
+					setPercentages(percentage);
+					if (percentage <= 0) clearInterval(intervalId);
+				}, 2);
 			};
 
 			document.addEventListener('mousemove', handleMouseMoveOrTouchMove);
@@ -89,7 +92,7 @@
 	class:grid-cols-1={!showSidebar}
 	style:--w={`${position}px`}
 >
-	<div class="relative flex h-full flex-col gap-2 px-2 py-1" class:hidden={!showSidebar}>
+	<div class="relative flex h-full flex-col gap-2 px-2 py-1 scale-x-[--effect]" class:hidden={!showSidebar}>
 		<div class="hidden md:inline-block">
 			<QuickAction
 				icon={ChevronLeft}

src/lib/components/settings/color/ColorPicker.svelte

@@ -7,14 +7,50 @@
 			height: rect.bottom - rect.top
 		};
 	}
+
+	const getCoordinates = (e: TouchEvent | MouseEvent) => {
+		const data = 'touches' in e ? e.touches[0] : e;
+
+		return {
+			x: data.clientX,
+			y: data.clientY
+		};
+	};
+
+	interface Props {
+		getCanvas: () => HTMLCanvasElement | undefined;
+		coords: Writable<{ x: number; y: number }>;
+		setHsl: (color: HSL) => void;
+		getHsl: () => HSL;
+	}
+
+	const handler =
+		({ getCanvas, coords, setHsl, getHsl }: Props) =>
+		(e: TouchEvent | MouseEvent) => {
+			e.preventDefault()
+			const canvas = getCanvas()
+
+			if (!canvas) return;
+			const rect = canvas.getBoundingClientRect();
+			const { height, width } = size(canvas);
+
+			const { x: rawX, y: rawY } = getCoordinates(e);
+
+			const x = calculatePercentage(rawX - rect.left, width);
+			const y = 100 - calculatePercentage(rawY - rect.top, height);
+
+			coords.set({ x, y });
+			setHsl([getHsl()[0], x, y]);
+		};
 </script>
 
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { writable } from 'svelte/store';
+	import { writable, type Writable } from 'svelte/store';
 	import { drawGradient } from './drawGradient';
 	import convert from 'color-convert';
 	import { calculatePercentage } from '$lib/utils/math/percentages';
+	import type { HSL } from 'color-convert/conversions';
 
 	export let hexColor: string;
 	export let hsl = convert.hex.hsl(hexColor);
@@ -28,6 +64,13 @@
 		y: hsl[2]
 	});
 
+	const defaultHandler = handler({
+		coords,
+		getCanvas: () => canvas,
+		getHsl: () => hsl,
+		setHsl: (h) => (hsl = h)
+	});
+
 	onMount(() => {
 		const ctx = canvas?.getContext('2d');
 		if (!canvas) return;
@@ -49,23 +92,15 @@
 	<canvas
 		bind:this={canvas}
 		class="h-full w-full"
-		on:click={(e) => {
-			if (!canvas) return;
-			const rect = canvas.getBoundingClientRect();
-			const { height, width } = size(canvas);
-
-			const x = calculatePercentage(e.clientX - rect.left, width);
-			const y = 100 - calculatePercentage(e.clientY - rect.top, height);
-
-			coords.set({ x, y });
-			hsl = [hsl[0], x, y];
-		}}
+		on:click={defaultHandler}
+		on:touchstart={defaultHandler}
+		on:touchmove={defaultHandler}
 	/>
 	<div
 		style:--top={`${100 - $coords.y}%`}
 		style:--left={`${$coords.x}%`}
 		style="transform: translate(-50%, -50%);"
-		class="absolute left-[--left] top-[--top] h-3 w-3 rounded-full bg-white outline outline-2 outline-black"
+		class="absolute left-[--left] top-[--top] h-3 w-3 rounded-full bg-white outline outline-2 outline-black pointer-events-none"
 	/>
 </div>
 
@@ -74,7 +109,7 @@
 	min="0"
 	max="360"
 	bind:value={$hue}
-	class="hue-slider h-3 w-full appearance-none rounded-full outline-none focus:outline-none"
+	class="hue-slider h-3 w-full appearance-none rounded-full outline-none focus:outline-none touch:h-5"
 />
 
 <style>

src/lib/constants/launcher.ts

@@ -13,7 +13,8 @@ import {
 	Calendar,
 	Cog,
 	UserMinus,
-	type IconSource
+	PaintBrush,
+	type IconSource,
 } from 'svelte-hero-icons';
 import { derived, type Readable } from 'svelte/store';
 
@@ -141,14 +142,24 @@ export const launcherItems: LauncherItem[] = [
 		searchTerms: split(i('launcher.settings.terms'))
 	},
 	{
-		label: i('launcher.logout'),
+		label: i('launcher.settings.color'),
 		description: null,
-		icon: UserMinus,
-		callback: async () => {
-			logoutListener({ postValidation: closeLauncher });
+		icon: PaintBrush,
+		callback: () => {
+			goto('/settings/color');
+			closeLauncher();
 		},
-		searchTerms: split(i('launcher.logout.terms')),
-		enabled: derived(svocal('auth.access.generatedBy'), (gb) => gb === 'login')
+		searchTerms: split(i('launcher.settings.color.terms'))
+	},
+	{
+		label: i('launcher.settings.timetable'),
+		description: null,
+		icon: Calendar,
+		callback: () => {
+			goto('/settings/timetable');
+			closeLauncher();
+		},
+		searchTerms: split(i('launcher.settings.timetable.terms'))
 	},
 	{
 		label: i('launcher.holidays'),
@@ -159,5 +170,15 @@ export const launcherItems: LauncherItem[] = [
 			closeLauncher();
 		},
 		searchTerms: split(i('launcher.holidays.terms'))
-	}
+	},
+	{
+		label: i('launcher.logout'),
+		description: null,
+		icon: UserMinus,
+		callback: async () => {
+			logoutListener({ postValidation: closeLauncher });
+		},
+		searchTerms: split(i('launcher.logout.terms')),
+		enabled: derived(svocal('auth.access.generatedBy'), (gb) => gb === 'login')
+	},
 ];

src/lib/locales/de.ts

@@ -47,6 +47,10 @@ const de = {
 	'launcher.calendar.terms': 'Arbeiten\nTest\nTermin\nKlausur\nKlassenarbeit\nLernkontrolle\nEvent',
 	'launcher.settings': 'Einstellungen',
 	'launcher.settings.terms': 'Option \nKonfiguration\nPräferenzen',
+	'launcher.settings.color': 'Farb-Einstellungen',
+	'launcher.settings.color.terms': 'Farben\nBunt',
+	'launcher.settings.timetable': 'Stundenplan',
+	'launcher.settings.timetable.terms': 'Stundenplan\nZeit',
 	'launcher.logout': 'Ausloggen',
 	'launcher.logout.terms': 'Signout\nAnonymous',
 	'launcher.holidays': 'Ferien',

src/lib/locales/en.ts

@@ -45,6 +45,10 @@ const en = {
 	'launcher.calendar.terms': 'Exam\nTest\nAppointment',
 	'launcher.settings': 'Settings',
 	'launcher.settings.terms': 'Option\nConfiguration\nPreference',
+	'launcher.settings.color': 'Color-Settings',
+	'launcher.settings.color.terms': 'Colors',
+	'launcher.settings.timetable': 'Timetable',
+	'launcher.settings.timetable.terms': 'Timetable\nSchedule',
 	'launcher.logout': 'Ausloggen',
 	'launcher.logout.terms': 'Abmelden\nAnonym',
 	'launcher.holidays': 'Holidays',