kamil/libnovel
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 157 Wiki Activity

fix: settings panel flex layout — voice grid scrolls, speed/toggles always pinned at bottom
Some checks failed
CI / Lint (push) Has been cancelled
Details
CI / Test (push) Has been cancelled
Details
CI / Build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Admin
2026-03-02 13:03:06 +05:00
parent 82d78bedb2
commit c717fcfe94
1 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
scraper/internal/server/ui.go
View File

@@ -2332,7 +2332,10 @@ const chapterTmpl = `
role="dialog"
aria-label="Reader settings"
hidden
class="fixed inset-x-4 top-1/2 -translate-y-1/2 max-h-[70vh] overflow-y-auto sm:absolute sm:inset-x-auto sm:top-auto sm:translate-y-0 sm:bottom-[calc(100%+0.25rem)] sm:right-[max(0.5rem,calc(50%-32rem+0.5rem))] sm:w-80 sm:max-h-[80vh] bg-zinc-900 border border-zinc-800 rounded-xl p-4 shadow-2xl z-[100]">
class="fixed inset-x-4 top-1/2 -translate-y-1/2 flex flex-col max-h-[80vh] sm:absolute sm:inset-x-auto sm:top-auto sm:translate-y-0 sm:bottom-[calc(100%+0.25rem)] sm:right-[max(0.5rem,calc(50%-32rem+0.5rem))] sm:w-80 sm:max-h-[80vh] bg-zinc-900 border border-zinc-800 rounded-xl shadow-2xl z-[100]">
<!-- scrollable body -->
<div class="flex-1 overflow-y-auto p-4 min-h-0">
<!-- hidden native select keeps existing JS working unchanged -->
<select id="tts-voice" class="sr-only" aria-hidden="true" tabindex="-1">
@@ -2343,7 +2346,7 @@ const chapterTmpl = `
<div class="mb-4">
<span class="block text-xs text-zinc-500 mb-2">Voice</span>
<div id="voice-grid" class="grid grid-cols-2 gap-1.5 max-h-64 sm:max-h-48 overflow-y-auto pr-0.5">
<div id="voice-grid" class="grid grid-cols-2 gap-1.5">
{{range .Voices}}
<button type="button"
data-voice="{{.ID}}"
@@ -2359,20 +2362,25 @@ const chapterTmpl = `
</div>
</div>
<label class="block mb-4">
<span class="block text-xs text-zinc-500 mb-1.5">Speed — <span id="tts-speed-label">1.0×</span></span>
<input id="tts-speed" type="range" min="0.5" max="2" step="0.1" value="1"
class="w-full accent-amber-500 cursor-pointer" />
</label>
</div><!-- end scrollable body -->
<!-- sticky footer: speed + toggles always visible -->
<div class="flex-shrink-0 border-t border-zinc-800 p-4 space-y-3">
<label class="block">
<span class="block text-xs text-zinc-500 mb-1.5">Speed — <span id="tts-speed-label">1.0×</span></span>
<input id="tts-speed" type="range" min="0.5" max="2" step="0.1" value="1"
class="w-full accent-amber-500 cursor-pointer" />
</label>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-play next chapter</span>
<span class="toggle-switch"><input id="tts-autoplay" type="checkbox" /><span class="toggle-track"></span></span>
</label>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
<span class="toggle-switch"><input id="tts-autoscroll" type="checkbox" checked /><span class="toggle-track"></span></span>
</label>
</div>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none mb-3">
<span class="text-sm text-zinc-300">Auto-play next chapter</span>
<span class="toggle-switch"><input id="tts-autoplay" type="checkbox" /><span class="toggle-track"></span></span>
</label>
<label class="flex items-center justify-between gap-3 cursor-pointer select-none">
<span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
<span class="toggle-switch"><input id="tts-autoscroll" type="checkbox" checked /><span class="toggle-track"></span></span>
</label>
</div>
<!-- Hidden native audio -->