frontend: linting

Author: schmolldechse

frontend/src/components/svg/Clock.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
-	let {width = "75px", height = "75px"} = $props();
+	let { width = "75px", height = "75px" } = $props();
 </script>
 
-<svg
-        {width}
-        {height}
-        viewBox="0 0 24 24"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
->
-    <path d="M5.06152 12C5.55362 8.05369 8.92001 5 12.9996 5C17.4179 5 20.9996 8.58172 20.9996 13C20.9996 17.4183 17.4179 21 12.9996 21H8M13 13V9M11 3H15M3 15H8M5 18H10"
-          stroke="currentColor" stroke-width="2" stroke-linecap="round"
-          stroke-linejoin="round"/>
-</svg>
+<svg {width} {height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path
+		d="M5.06152 12C5.55362 8.05369 8.92001 5 12.9996 5C17.4179 5 20.9996 8.58172 20.9996 13C20.9996 17.4183 17.4179 21 12.9996 21H8M13 13V9M11 3H15M3 15H8M5 18H10"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

frontend/src/components/timetable/TimePicker.svelte

@@ -74,16 +74,16 @@
 		type="button"
 		class:ring-2={isOpen}
 		class:ring-accent={isOpen}
-		class="flex flex-row items-center gap-x-2 rounded-md p-0.5 md:p-2 text-center md:text-2xl hover:ring-2 hover:ring-accent"
-		onclick={() => isOpen = true}
+		class="flex flex-row items-center gap-x-2 rounded-md p-0.5 text-center hover:ring-2 hover:ring-accent md:p-2 md:text-2xl"
+		onclick={() => (isOpen = true)}
 	>
 		<Calendar />
 		<span>{selectedDate.toFormat("dd.MM.yyyy - HH:mm")}</span>
 	</button>
 
 	{#if isOpen}
 		<div
-			class="absolute left-1/2 top-1/2 z-10 mt-8 w-80 -translate-x-1/4 transform rounded bg-primary p-4 shadow-lg md:left-auto md:top-full md:mt-2 md:w-128 md:transform-none"
+			class="md:w-128 absolute left-1/2 top-1/2 z-10 mt-8 w-80 -translate-x-1/4 transform rounded bg-primary p-4 shadow-lg md:left-auto md:top-full md:mt-2 md:transform-none"
 		>
 			<!-- header -->
 			<div class="mb-4 flex items-center justify-between">
@@ -156,10 +156,7 @@
 			</div>
 
 			<!-- select button -->
-			<button
-				class="mt-4 w-full rounded bg-accent py-2 font-bold text-black"
-				onclick={() => isOpen = false}
-			>
+			<button class="mt-4 w-full rounded bg-accent py-2 font-bold text-black" onclick={() => (isOpen = false)}>
 				Select
 			</button>
 		</div>

frontend/src/components/timetable/TimeTable.svelte

@@ -18,7 +18,7 @@
 	};
 </script>
 
-<div class="flex flex-col md:w-[40%] gap-y-2">
+<div class="flex flex-col gap-y-2 md:w-[40%]">
 	<div class="flex flex-row items-center justify-end gap-x-2">
 		<button
 			type="button"
@@ -53,23 +53,24 @@
 		<TimePicker bind:selectedDate={dateSelected} />
 
 		<div class="ml-auto flex gap-1 md:gap-3">
-		<!-- Reset time -->
-		<button class="flex flex-row items-center bg-primary rounded-3xl px-2 md:px-4"
-				onclick={() => (dateSelected = DateTime.now().set({ second: 0, millisecond: 0 }))}>
-			<Clock height="25px" width="25px" />
-			<span class="hidden md:block text-xl">Now</span>
-		</button>
+			<!-- Reset time -->
+			<button
+				class="flex flex-row items-center rounded-3xl bg-primary px-2 md:px-4"
+				onclick={() => (dateSelected = DateTime.now().set({ second: 0, millisecond: 0 }))}
+			>
+				<Clock height="25px" width="25px" />
+				<span class="hidden text-xl md:block">Now</span>
+			</button>
 
-		<!-- Query departures/ arrivals of a station -->
-		<button
-			class="{stationSelected && dateSelected
-			? 'bg-accent text-black'
-			: 'bg-primary text-text'} flex items-center justify-center rounded-3xl px-4 text-background md:text-2xl font-bold"
-			onclick={gotoRequest}
-		>
-			Search
-		</button>
+			<!-- Query departures/ arrivals of a station -->
+			<button
+				class="{stationSelected && dateSelected
+					? 'bg-accent text-black'
+					: 'bg-primary text-text'} flex items-center justify-center rounded-3xl px-4 font-bold text-background md:text-2xl"
+				onclick={gotoRequest}
+			>
+				Search
+			</button>
 		</div>
 	</div>
-
 </div>

frontend/src/routes/+layout.svelte

@@ -15,12 +15,12 @@
 	<a href="/">
 		<div class="flex cursor-pointer flex-row items-center">
 			<Logo />
-			<h1 class="relative top-[-0.25rem] hidden md:inline text-[2rem] font-bold">NAVIGATOR</h1>
+			<h1 class="relative top-[-0.25rem] hidden text-[2rem] font-bold md:inline">NAVIGATOR</h1>
 		</div>
 	</a>
 
 	<Navbar bind:type />
 </div>
 
 <!-- Content -->
-{@render children()}
+{@render children()}