From: PhiTux <redacted>
Date: Fri, 29 Aug 2025 17:34:31 +0000 (+0200)
Subject: added dropdown to settings for mobile screen
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=8ba9fd7d8a4420715b3014f224043c685878222d;p=DailyTxT.git

added dropdown to settings for mobile screen
---

diff --git a/frontend/src/routes/(authed)/+layout.svelte b/frontend/src/routes/(authed)/+layout.svelte
index 47c746d..ee35fb5 100644
--- a/frontend/src/routes/(authed)/+layout.svelte
+++ b/frontend/src/routes/(authed)/+layout.svelte
@@ -91,6 +91,31 @@
 	let removeScrollListener = null;
 	let lastComputedSection = 'appearance';
 
+	// Settings section metadata for mobile dropdown navigation
+	const settingsSectionsMeta = [
+		{ id: 'appearance', labelKey: 'settings.appearance' },
+		{ id: 'functions', labelKey: 'settings.functions' },
+		{ id: 'tags', labelKey: 'settings.tags' },
+		{ id: 'templates', labelKey: 'settings.templates' },
+		{ id: 'data', labelKey: 'settings.data' },
+		{ id: 'security', labelKey: 'settings.security' },
+		{ id: 'about', labelKey: 'settings.about' }
+	];
+
+	function scrollToSection(id) {
+		const container = document.getElementById('settings-content');
+		if (!container) return;
+		const target = container.querySelector(':scope > #' + CSS.escape(id));
+		if (!target) return;
+		// Calculate dynamic offset (mobile dropdown height if visible)
+		let offset = 4;
+		const mobileBar = container.querySelector('.mobile-settings-dropdown');
+		if (mobileBar && getComputedStyle(mobileBar).display !== 'none') {
+			offset = mobileBar.getBoundingClientRect().height + 6; // add small gap
+		}
+		container.scrollTo({ top: target.offsetTop - offset, behavior: 'smooth' });
+	}
+
 	function computeActiveSection(container) {
 		if (!container || settingsSections.length === 0) return;
 		// Activation line: a bit below the top to give stability
@@ -868,7 +893,7 @@
 			</div>
 			<div class="modal-body" id="modal-body">
 				<div class="row">
-					<div class="col-4 overflow-y-auto">
+					<div class="col-4 overflow-y-auto d-none d-md-block">
 						<nav class="flex-column align-items-stretch" id="settings-nav">
 							<nav class="nav nav-pills flex-column custom-scrollspy-nav">
 								<a
@@ -902,7 +927,7 @@
 							</nav>
 						</nav>
 					</div>
-					<div class="col-8">
+					<div class="col-12 col-md-8">
 						<div
 							class="settings-content overflow-y-auto"
 							data-bs-spy="scroll"
@@ -910,6 +935,19 @@
 							data-bs-smooth-scroll="true"
 							id="settings-content"
 						>
+							<!-- Mobile dropdown (visible on < md) -->
+							<div class="d-md-none position-sticky top-0 p-1 mobile-settings-dropdown">
+								<select
+									id="settingsSectionSelect"
+									class="form-select form-select-sm"
+									bind:value={activeSettingsSection}
+									onchange={() => scrollToSection(activeSettingsSection)}
+								>
+									{#each settingsSectionsMeta as sec}
+										<option value={sec.id}>{$t(sec.labelKey)}</option>
+									{/each}
+								</select>
+							</div>
 							<div id="appearance">
 								<h3 class="text-primary">🎨 {$t('settings.appearance')}</h3>
 								<div id="lightdark">
@@ -2061,4 +2099,19 @@
 	.custom-scrollspy-nav .nav-link:not(.active):hover {
 		background-color: rgba(13, 110, 253, 0.05);
 	}
+
+	/* Mobile settings dropdown styling */
+	.mobile-settings-dropdown {
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+		border-radius: 0.5rem;
+		z-index: 6;
+		backdrop-filter: blur(8px);
+		background: rgba(255, 255, 255, 0.85);
+	}
+	@media (max-width: 767.98px) {
+		/* Add a small spacer below dropdown to prevent content being fully hidden */
+		#settings-content > .mobile-settings-dropdown + div {
+			margin-top: 0.25rem;
+		}
+	}
 </style>