From: PhiTux <redacted>
Date: Sun, 6 Apr 2025 11:00:20 +0000 (+0200)
Subject: css-fixes and sidenav closes on selected searchresult
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=fc98c630a4d92359aa79d80c410c824ac8fce472;p=DailyTxT.git

css-fixes and sidenav closes on selected searchresult
---

diff --git a/frontend/src/lib/Datepicker.svelte b/frontend/src/lib/Datepicker.svelte
index b2dbaf7..c6a10f6 100644
--- 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 a20eb7a..25e42d5 100644
--- 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 a091aae..82fd3e8 100644
--- 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 8258716..ad8f715 100644
--- 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 e2bece4..e77d74c 100644
--- 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>