css-fixes and sidenav closes on selected searchresult

diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index b2dbaf7c1acbb4cc140177e46aa14517ea134613..c6a10f6a675b977119147e5296feddb343423253 100644 (file)
--- a/frontend/src/lib/Datepicker.svelte
+++ b/frontend/src/lib/Datepicker.svelte
@@ -2,6 +2,8 @@
        import { cal, selectedDate, readingDate } from '$lib/calendarStore.js';
        import { onMount } from 'svelte';
        import { fly } from 'svelte/transition';
+       import * as bootstrap from 'bootstrap';
+       import { offcanvasIsOpen } from '$lib/helpers.js';
 
        let days = $state([]);
 
@@ -69,12 +71,30 @@
                $cal.currentYear += increment;
        };
 
+       let oc;
+
        const onDateClick = (date) => {
                $selectedDate = date;
+
+               // close offcanvas/sidenav if open
+               if (oc) {
+                       const bsOffcanvas = bootstrap.Offcanvas.getInstance(oc);
+                       if ($offcanvasIsOpen) {
+                               bsOffcanvas.hide();
+                       }
+               }
        };
 
        onMount(() => {
                days = updateCalendar();
+
+               oc = document.querySelector('.offcanvas');
+               oc.addEventListener('hidden.bs.offcanvas', () => {
+                       $offcanvasIsOpen = false;
+               });
+               oc.addEventListener('shown.bs.offcanvas', () => {
+                       $offcanvasIsOpen = true;
+               });
        });
 
        let months = Array.from({ length: 12 }, (_, i) =>

diff --git a/frontend/src/lib/Sidenav.svelte b/frontend/src/lib/Sidenav.svelte
index a20eb7ad57baceda82c0a3aca4370fec2135ec99..25e42d5808e35ee2801069eae74073fa33adfb1a 100644 (file)
--- a/frontend/src/lib/Sidenav.svelte
+++ b/frontend/src/lib/Sidenav.svelte
@@ -8,6 +8,7 @@
        import { onMount } from 'svelte';
        import * as bootstrap from 'bootstrap';
        import Tag from './Tag.svelte';
+       import { offcanvasIsOpen } from '$lib/helpers.js';
 
        let { searchForString, searchForTag } = $props();
 
@@ -17,6 +18,14 @@
                        (popoverTriggerEl) =>
                                new bootstrap.Popover(popoverTriggerEl, { html: true, trigger: 'focus' })
                );
+
+               oc = document.querySelector('.offcanvas');
+               oc.addEventListener('hidden.bs.offcanvas', () => {
+                       $offcanvasIsOpen = false;
+               });
+               oc.addEventListener('shown.bs.offcanvas', () => {
+                       $offcanvasIsOpen = true;
+               });
        });
 
        let searchInput = $state(null);
@@ -128,6 +137,19 @@
                $searchTag = {};
                $searchResults = [];
        }
+
+       let oc;
+       function selectDate(date) {
+               $selectedDate = date;
+
+               // close offcanvas/sidenav if open
+               if (oc) {
+                       const bsOffcanvas = bootstrap.Offcanvas.getInstance(oc);
+                       if ($offcanvasIsOpen) {
+                               bsOffcanvas.hide();
+                       }
+               }
+       }
 </script>
 
 <svelte:window onkeydown={on_key_down} onkeyup={on_key_up} />
@@ -228,7 +250,8 @@
                                        <button
                                                type="button"
                                                onclick={() => {
-                                                       $selectedDate = new Date(Date.UTC(result.year, result.month - 1, result.day));
+                                                       /* $selectedDate = new Date(Date.UTC(result.year, result.month - 1, result.day)); */
+                                                       selectDate(new Date(Date.UTC(result.year, result.month - 1, result.day)));
                                                }}
                                                class="list-group-item list-group-item-action {$selectedDate.toDateString() ===
                                                new Date(Date.UTC(result.year, result.month - 1, result.day)).toDateString()

diff --git a/frontend/src/lib/helpers.js b/frontend/src/lib/helpers.js
index a091aae21507ddebe9c8f393a14177d11ebd321f..82fd3e890f06784e8bd978597fa4e0f9fcae76c8 100644 (file)
--- a/frontend/src/lib/helpers.js
+++ b/frontend/src/lib/helpers.js
@@ -4,7 +4,6 @@ function formatBytes(bytes) {
        if (!+bytes) return '0 Bytes';
 
        const k = 1024;
-       //const dm = 2; // decimal places
        const sizes = ['B', 'KB', 'MB', 'GB'];
 
        const i = Math.floor(Math.log(bytes) / Math.log(k));
@@ -12,7 +11,9 @@ function formatBytes(bytes) {
        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(0))} ${sizes[i]}`;
 }
 
-export let alwaysShowSidenav = writable(true);
-
 export { formatBytes };
 
+export let alwaysShowSidenav = writable(true);
+
+// check if offcanvas/sidenav is open
+export let offcanvasIsOpen = writable(false);
\ No newline at end of file

diff --git a/frontend/src/lib/settingsStore.js b/frontend/src/lib/settingsStore.js
index 82587168dfc608606f660bc1211147d0e97075e6..ad8f715035b64c060e6a6a4468e4e6b47fe4dd7d 100644 (file)
--- a/frontend/src/lib/settingsStore.js
+++ b/frontend/src/lib/settingsStore.js
@@ -6,4 +6,15 @@ export const useTrianglify = writable(true);
 export const trianglifyOpacity = writable(0.4);
 export const trianglifyColor = writable('');
 export const backgroundColor = writable('');
-export const autoLoadImages = writable(true);
\ No newline at end of file
+export const autoLoadImages = writable(true);
+
+export const settings = writable({
+  useTrianglify: true,
+  trianglifyOpacity: 0.4,
+  trianglifyColor: '',
+  backgroundColor: '',
+  autoloadImagesDefault: true,
+  saveAutoloadImagesPerDevice: true,
+});
+
+export const tempSettings = writable({});
\ No newline at end of file

diff --git a/frontend/src/routes/write/+page.svelte b/frontend/src/routes/write/+page.svelte
index e2bece4adcf1c462dbb4882d358beb3fc617a5ca..e77d74c2ce3adbf80d746646c94d5472c40cbe3d 100644 (file)
--- a/frontend/src/routes/write/+page.svelte
+++ b/frontend/src/routes/write/+page.svelte
@@ -1124,6 +1124,7 @@
                .middle-right {
                        flex-direction: column !important;
                        align-items: center;
+                       justify-content: start !important;
                }
 
                #middle {
@@ -1135,14 +1136,27 @@
                }
        }
 
+       @media (max-width: 500px) {
+               #right {
+                       max-width: 100% !important;
+                       padding-left: 1rem !important;
+                       padding-right: 1rem !important;
+               }
+       }
+
+       @media (min-width: 1400px) {
+               #right {
+                       width: 500px !important;
+               }
+       }
+
        .main-row {
                max-width: 100vw;
-               flex-wrap: wrap;
+               /* flex-wrap: wrap; */
        }
 
        .middle-right {
                flex: 1 0;
-               /* flex-wrap: wrap; */
                justify-content: center;
                width: 100%;
        }
@@ -1192,7 +1206,6 @@
        .tags {
                z-index: 10;
                padding: 0.5rem;
-               /* margin-right: 2rem; */
                margin-bottom: 2rem;
                backdrop-filter: blur(8px) saturate(150%);
                background-color: rgba(219, 219, 219, 0.45);
@@ -1306,8 +1319,9 @@
 
        #right {
                margin-top: 1.5rem !important;
-               min-width: 300px;
-               max-width: 400px;
+               /* min-width: 300px;
+               max-width: 400px; */
+               width: 400px;
                padding-right: 2rem;
        }
 </style>