several (css) fixes and minar updates

diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
new file mode 100644 (file)
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 (file)
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 5f98abb21c8b809e4ae3bca90ceeeab302ac6f85..642d5e0d6eeede82e7fec0f9efb27de967c4df8a 100644 (file)
--- 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 522fd0bf6d4849e88bf0b5116b660456ee5331ca..f48645bca0c06c2a196847caa2572085edbfea96 100644 (file)
--- 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 (file)
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>