From: PhiTux <redacted>
Date: Tue, 7 Jan 2025 17:17:24 +0000 (+0100)
Subject: several (css) fixes and minar updates
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=35f17301f85ef4eb14400516ccc92f02792a1dd5;p=DailyTxT.git

several (css) fixes and minar updates
---

diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
new file mode 100644
index 0000000..81ff977
--- /dev/null
+++ b/frontend/jsconfig.json
@@ -0,0 +1,3 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json"
+}
diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
new file mode 100644
index 0000000..4386938
--- /dev/null
+++ b/frontend/src/lib/settingsStore.js
@@ -0,0 +1,3 @@
+import {writable} from 'svelte/store';
+
+export const readingMode = writable(true);
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 5f98abb..642d5e0 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -6,8 +6,18 @@
 	import { onMount } from 'svelte';
 	import '../scss/styles.scss';
 	import * as bootstrap from 'bootstrap';
+	import Fa from 'svelte-fa';
+	import { readingMode } from '$lib/settingsStore.js';
+	import { page } from '$app/state';
 
-	export let data;
+	import {
+		faRightFromBracket,
+		faGlasses,
+		faPencil,
+		faSliders
+	} from '@fortawesome/free-solid-svg-icons';
+
+	let { children } = $props();
 	let inDuration = 150;
 	let outDuration = 150;
 
@@ -39,41 +49,65 @@
 				dataSpyList.forEach((dataSpyEl) => {
 					bootstrap.ScrollSpy.getInstance(dataSpyEl).refresh();
 				});
-			}, 100);
+			}, 200);
 		});
 	});
 </script>
 
 <main class="d-flex flex-column">
 	<nav class="navbar navbar-expand-lg bg-body-tertiary">
-		<div class="container-fluid">
-			<button
-				class="btn d-md-none"
-				type="button"
-				data-bs-toggle="offcanvas"
-				data-bs-target="#sidenav"
-				aria-controls="sidenav">menü</button
-			>
-			<a class="nav-item" href="/">Navbar</a>
-			<a class="nav-item" href="/login">Navbar</a>
+		<div class="row w-100">
+			<div class="col-lg-4 col-sm-5 col d-flex flex-row justify-content-start">
+				<button
+					class="btn d-md-none"
+					type="button"
+					data-bs-toggle="offcanvas"
+					data-bs-target="#sidenav"
+					aria-controls="sidenav">menü</button
+				>
 
-			<button
-				class="btn btn-outline-secondary"
-				data-bs-toggle="modal"
-				data-bs-target="#settingsModal">Settings</button
-			>
-			<button class="btn btn-outline-secondary" onclick={logout}>Logout</button>
+				<div class="form-check form-switch d-flex flex-row">
+					<label class="me-3" for="flexSwitchCheckDefault"><Fa icon={faPencil} size="1.5x" /></label
+					>
+					<div class="form-check form-switch">
+						<input
+							class="form-check-input"
+							bind:checked={$readingMode}
+							type="checkbox"
+							role="switch"
+							id="flexSwitchCheckDefault"
+							style="transform: scale(1.3);"
+						/>
+					</div>
+					<label class="ms-2" for="flexSwitchCheckDefault"
+						><Fa icon={faGlasses} size="1.5x" /></label
+					>
+				</div>
+			</div>
+
+			<div class="col-lg-4 col-sm-2 col d-flex flex-row justify-content-center">Center-LOGO</div>
+
+			<div class="col-lg-4 col-sm-5 col d-flex flex-row justify-content-end">
+				<button
+					class="btn btn-outline-secondary"
+					data-bs-toggle="modal"
+					data-bs-target="#settingsModal"><Fa icon={faSliders} /></button
+				>
+				<button class="btn btn-outline-secondary" onclick={logout}
+					><Fa icon={faRightFromBracket} /></button
+				>
+			</div>
 		</div>
 	</nav>
 
 	<div class="wrapper h-100">
-		{#key data.pathname}
+		{#key page.data}
 			<div
 				class="transition-wrapper h-100"
 				out:blur={{ duration: outDuration }}
 				in:blur={{ duration: inDuration, delay: outDuration }}
 			>
-				<slot />
+				{@render children()}
 			</div>
 		{/key}
 	</div>
diff --git a/frontend/src/routes/Datepicker.svelte b/frontend/src/routes/Datepicker.svelte
index 522fd0b..f48645b 100644
--- a/frontend/src/routes/Datepicker.svelte
+++ b/frontend/src/routes/Datepicker.svelte
@@ -165,7 +165,7 @@
 
 	<div class="row mb-2">
 		<div class="col-4"></div>
-		<div class="col-4">
+		<div class="col-4 d-flex justify-content-center">
 			<button
 				class="btn btn-primary"
 				onclick={() => {
@@ -173,8 +173,8 @@
 				}}>Heute</button
 			>
 		</div>
-		<div class="col-4">
-			<button class="btn btn-secondary"> Mark </button>
+		<div class="col-4 d-flex justify-content-end">
+			<button class="btn btn-secondary me-2"> Mark </button>
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/test/+page.svelte b/frontend/src/routes/test/+page.svelte
new file mode 100644
index 0000000..9f16758
--- /dev/null
+++ b/frontend/src/routes/test/+page.svelte
@@ -0,0 +1,62 @@
+<div class="row" style="height: 100%; overflow: hidden;">
+	<div class="col-4" style="height: 100%; overflow-y: auto;">
+		<p class="my-4 focus-ring" contenteditable="true">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+	</div>
+	<div class="col-8">
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+		<p class="my-4">huhu</p>
+	</div>
+</div>