fix(reader): both toolbars showed below 768px — cascade-layer conflict
The display:none for the full toolbar lived in @layer components while the div also carried Tailwind's flex utility (@layer utilities). Layer order beats specificity, so the utilities layer always won and the full bar never hid below the breakpoint (the compact row only worked because it had no display utility of its own). Switch to Tailwind's own responsive utilities in the markup — full toolbar 'hidden md:flex', compact row 'flex md:hidden' — and delete the custom rules; responsive display now resolves inside a single layer where source order (responsive variants after base) guarantees the right winner.
This commit is contained in:
john-okeefe committed
1 parent
6cd0fb226a
commit
dc68d03360
4 files changed
+10
-21
No files matched your search
@@ -306,8 +306,8 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
|
||||
</div>
|
||||
<!-- Fixed-layout row (comics, PDFs, manga) -->
|
||||
<div x-show="isFixedLayout">
|
||||
<!-- Full toolbar: desktop/tablet (>= 768px). Wraps gracefully in between. -->
|
||||
<div class="fx-tools-full flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
|
||||
<!-- Full toolbar: desktop/tablet (>= 768px, md). Wraps gracefully in between. -->
|
||||
<div class="hidden md:flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1">
|
||||
<div class="flex items-center gap-0.5">
|
||||
<button @click="goLeft()" class="p-1.5 sm:p-2 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
|
||||
<svg class="reader-icon" width="24" height="24" aria-hidden="true">
|
||||
@@ -404,7 +404,7 @@ templ ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) {
|
||||
<!-- Compact row (phone-sized windows): single line + ⋯ overflow.
|
||||
Standard mobile-reader pattern: paging, slider, progress stay;
|
||||
power tools move into a labeled menu. -->
|
||||
<div class="fx-compact items-center gap-1 px-1.5 py-1.5">
|
||||
<div class="flex md:hidden items-center gap-1 px-1.5 py-1.5">
|
||||
<button @click="goLeft()" class="p-1.5 rounded-lg hover:bg-gray-700" title="Go Left (←)" aria-label="Go left">
|
||||
<svg class="reader-icon" width="24" height="24" aria-hidden="true">
|
||||
<path d="M 15 6 L 9 12 L 15 18"></path>
|
||||
|
||||
@@ -257,7 +257,7 @@ func ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) templ.Compo
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span></div><div class=\"w-px h-6 reader-sep\"></div><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents (t)\">📖</button></div></div><!-- Fixed-layout row (comics, PDFs, manga) --><div x-show=\"isFixedLayout\"><!-- Full toolbar: desktop/tablet (>= 768px). Wraps gracefully in between. --><div class=\"fx-tools-full flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1\"><div class=\"flex items-center gap-0.5\"><button @click=\"goLeft()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Go Left (←)\" aria-label=\"Go left\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 15 6 L 9 12 L 15 18\"></path></svg></button> <button x-show=\"backStack.length > 0\" @click=\"goBackToLocation()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Return to previous location (Alt+←)\" aria-label=\"Return to previous location\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 12 21 C 9 18 5 14.4 5 9.5 C 5 6.5 8 4 12 4 C 16 4 19 6.5 19 9.5 C 19 14.4 15 18 12 21 Z\"></path> <circle cx=\"12\" cy=\"9.5\" r=\"2\"></circle></svg></button></div><input id=\"progress-slider-fx\" type=\"range\" min=\"0\" max=\"1\" step=\"any\" @input=\"goToFraction($event.target.value)\" class=\"grow min-w-[3rem]\"> <button @click=\"goRight()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Go Right (→)\" aria-label=\"Go right\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 9 6 L 15 12 L 9 18\"></path></svg></button><div class=\"w-px h-6 mx-1 reader-sep\"></div><!-- Fit mode + zoom cluster --><div class=\"flex items-center gap-1\"><select @change=\"applyFitMode($event.target.value)\" class=\"reader-select text-xs px-1.5 py-1 rounded-lg shrink-0\" title=\"Fit mode\" aria-label=\"Fit mode\"><option value=\"fit-page\">Fit Page</option> <option value=\"fit-width\">Fit Width</option></select> <button @click=\"zoomOut()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom Out (-)\" aria-label=\"Zoom out\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 5 10 L 15 10\"></path></svg></button> <button @click=\"resetZoom()\" class=\"text-xs px-1 rounded-lg hover:bg-gray-700 min-w-[3rem]\" title=\"Reset Zoom (0)\" aria-label=\"Reset zoom\"><span x-text=\"zoomPercent + '%'\">100%</span></button> <button @click=\"zoomIn()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom In (+)\" aria-label=\"Zoom in\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 10 5 L 10 15 M 5 10 L 15 10\"></path></svg></button><!-- Recenter: reset pan, keep zoom --><button @click=\"recenterView()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Recenter page (reset pan, keep zoom)\" aria-label=\"Recenter page\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle> <path d=\"M 12 2 V 5 M 12 19 V 22 M 2 12 H 5 M 19 12 H 22\"></path></svg></button><!-- Magnifier --><button @click=\"toggleMagnifier()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" :class=\"magnifierEnabled ? 'bg-blue-600 hover:bg-blue-700' : ''\" title=\"Magnifier\" aria-label=\"Toggle magnifier\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"5\"></circle> <path d=\"M 13 13 L 18 18\"></path></svg></button></div><!-- Pointer mode (PDF only): Smart / Pan / Text --><div class=\"reader-seg shrink-0\" x-show=\"isPDF\" role=\"group\" aria-label=\"Pointer mode\" title=\"Smart: drag text to select, drag blank to pan · Pan: drag anywhere to move · Text: selection only. Shift always force-pans.\"><button :class=\"interactionMode === 'select' ? 'active' : ''\" @click=\"setInteractionMode('select')\" title=\"Smart: drag text to select, drag blank to pan\">Smart</button> <button :class=\"interactionMode === 'pan' ? 'active' : ''\" @click=\"setInteractionMode('pan')\" title=\"Pan: drag anywhere to move\">Pan</button> <button :class=\"interactionMode === 'text' ? 'active' : ''\" @click=\"setInteractionMode('text')\" title=\"Text: selection only, never pan (Shift overrides)\">Text</button></div><!-- Double page spread --><button @click=\"toggleSpread()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" :class=\"doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''\" title=\"Double Page Spread\" aria-label=\"Toggle double page spread\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 3 5 h 6 v 14 h -6 z M 15 5 h 6 v 14 h -6 z\"></path></svg></button><!-- Progress + TOC --><div class=\"flex items-center gap-1\"><div id=\"progress-display-fx\" @click=\"cycleProgressMode()\" :title=\"progressTooltip()\" class=\"text-sm min-w-[3.5rem] textLine truncated
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</span></div><div class=\"w-px h-6 reader-sep\"></div><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents (t)\">📖</button></div></div><!-- Fixed-layout row (comics, PDFs, manga) --><div x-show=\"isFixedLayout\"><!-- Full toolbar: desktop/tablet (>= 768px, md). Wraps gracefully in between. --><div class=\"hidden md:flex flex-wrap items-center gap-x-1 gap-y-1 px-1.5 py-1.5 sm:px-2 sm:py-2 sm:gap-1\"><div class=\"flex items-center gap-0.5\"><button @click=\"goLeft()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Go Left (←)\" aria-label=\"Go left\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 15 6 L 9 12 L 15 18\"></path></svg></button> <button x-show=\"backStack.length > 0\" @click=\"goBackToLocation()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Return to previous location (Alt+←)\" aria-label=\"Return to previous location\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 12 21 C 9 18 5 14.4 5 9.5 C 5 6.5 8 4 12 4 C 16 4 19 6.5 19 9.5 C 19 14.4 15 18 12 21 Z\"></path> <circle cx=\"12\" cy=\"9.5\" r=\"2\"></circle></svg></button></div><input id=\"progress-slider-fx\" type=\"range\" min=\"0\" max=\"1\" step=\"any\" @input=\"goToFraction($event.target.value)\" class=\"grow min-w-[3rem]\"> <button @click=\"goRight()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Go Right (→)\" aria-label=\"Go right\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 9 6 L 15 12 L 9 18\"></path></svg></button><div class=\"w-px h-6 mx-1 reader-sep\"></div><!-- Fit mode + zoom cluster --><div class=\"flex items-center gap-1\"><select @change=\"applyFitMode($event.target.value)\" class=\"reader-select text-xs px-1.5 py-1 rounded-lg shrink-0\" title=\"Fit mode\" aria-label=\"Fit mode\"><option value=\"fit-page\">Fit Page</option> <option value=\"fit-width\">Fit Width</option></select> <button @click=\"zoomOut()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom Out (-)\" aria-label=\"Zoom out\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 5 10 L 15 10\"></path></svg></button> <button @click=\"resetZoom()\" class=\"text-xs px-1 rounded-lg hover:bg-gray-700 min-w-[3rem]\" title=\"Reset Zoom (0)\" aria-label=\"Reset zoom\"><span x-text=\"zoomPercent + '%'\">100%</span></button> <button @click=\"zoomIn()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Zoom In (+)\" aria-label=\"Zoom in\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 10 5 L 10 15 M 5 10 L 15 10\"></path></svg></button><!-- Recenter: reset pan, keep zoom --><button @click=\"recenterView()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Recenter page (reset pan, keep zoom)\" aria-label=\"Recenter page\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"></circle> <path d=\"M 12 2 V 5 M 12 19 V 22 M 2 12 H 5 M 19 12 H 22\"></path></svg></button><!-- Magnifier --><button @click=\"toggleMagnifier()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" :class=\"magnifierEnabled ? 'bg-blue-600 hover:bg-blue-700' : ''\" title=\"Magnifier\" aria-label=\"Toggle magnifier\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"9\" r=\"5\"></circle> <path d=\"M 13 13 L 18 18\"></path></svg></button></div><!-- Pointer mode (PDF only): Smart / Pan / Text --><div class=\"reader-seg shrink-0\" x-show=\"isPDF\" role=\"group\" aria-label=\"Pointer mode\" title=\"Smart: drag text to select, drag blank to pan · Pan: drag anywhere to move · Text: selection only. Shift always force-pans.\"><button :class=\"interactionMode === 'select' ? 'active' : ''\" @click=\"setInteractionMode('select')\" title=\"Smart: drag text to select, drag blank to pan\">Smart</button> <button :class=\"interactionMode === 'pan' ? 'active' : ''\" @click=\"setInteractionMode('pan')\" title=\"Pan: drag anywhere to move\">Pan</button> <button :class=\"interactionMode === 'text' ? 'active' : ''\" @click=\"setInteractionMode('text')\" title=\"Text: selection only, never pan (Shift overrides)\">Text</button></div><!-- Double page spread --><button @click=\"toggleSpread()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" :class=\"doublePageSpread ? 'bg-blue-600 hover:bg-blue-700' : ''\" title=\"Double Page Spread\" aria-label=\"Toggle double page spread\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 3 5 h 6 v 14 h -6 z M 15 5 h 6 v 14 h -6 z\"></path></svg></button><!-- Progress + TOC --><div class=\"flex items-center gap-1\"><div id=\"progress-display-fx\" @click=\"cycleProgressMode()\" :title=\"progressTooltip()\" class=\"text-sm min-w-[3.5rem] textLine truncated
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
@@ -282,7 +282,7 @@ func ReaderChrome(metadata ReaderMetadata, progress ReadingProgress) templ.Compo
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
}
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</span></div><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents (t)\">📖</button></div></div><!-- Compact row (phone-sized windows): single line + ⋯ overflow.\n\t\t\t\t Standard mobile-reader pattern: paging, slider, progress stay;\n\t\t\t\t power tools move into a labeled menu. --><div class=\"fx-compact items-center gap-1 px-1.5 py-1.5\"><button @click=\"goLeft()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" title=\"Go Left (←)\" aria-label=\"Go left\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 15 6 L 9 12 L 15 18\"></path></svg></button> <button x-show=\"backStack.length > 0\" @click=\"goBackToLocation()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" title=\"Return to previous location (Alt+←)\" aria-label=\"Return to previous location\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 12 21 C 9 18 5 14.4 5 9.5 C 5 6.5 8 4 12 4 C 16 4 19 6.5 19 9.5 C 19 14.4 15 18 12 21 Z\"></path> <circle cx=\"12\" cy=\"9.5\" r=\"2\"></circle></svg></button> <input id=\"progress-slider-fx-compact\" type=\"range\" min=\"0\" max=\"1\" step=\"any\" @input=\"goToFraction($event.target.value)\" class=\"grow min-w-[3rem]\"> <button @click=\"goRight()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" title=\"Go Right (→)\" aria-label=\"Go right\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 9 6 L 15 12 L 9 18\"></path></svg></button><div @click=\"cycleProgressMode()\" :title=\"progressTooltip()\" class=\"text-sm min-w-[3rem] text-center cursor-pointer truncate shrink-0\"><span x-text=\"progressMain\">0/0</span></div><button data-tools-toggle @click=\"toggleTools()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" :title=\"toolsOpen ? 'Close tools' : 'More tools'\" aria-label=\"More tools\" :aria-expanded=\"toolsOpen ? 'true' : 'false'\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle> <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle> <circle cx=\"19\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle></svg></button></div><!-- Tools overflow menu: labeled rows (mobile-reader pattern —\n\t\t\t\t labels beat mystery icons). Anchored above the bottom bar. --><div x-show=\"toolsOpen\" x-transition:enter=\"transition ease-out duration-150\" x-transition:enter-start=\"opacity-0 translate-y-2\" x-transition:enter-end=\"opacity-100 translate-y-0\" x-transition:leave=\"transition ease-in duration-100\" x-transition:leave-start=\"opacity-100 translate-y-0\" x-transition:leave-end=\"opacity-0 translate-y-2\" class=\"reader-tools-popover\" role=\"menu\" aria-label=\"Reader tools\" @pointerdown.stop><div class=\"reader-tools-row\"><span>Zoom</span><div class=\"flex items-center gap-1\"><button @click=\"zoomOut()\" class=\"reader-popover-btn\" title=\"Zoom out\">−</button> <button @click=\"resetZoom()\" class=\"text-xs px-1 min-w-[3rem] text-center\" title=\"Reset zoom\"><span x-text=\"zoomPercent + '%'\">100%</span></button> <button @click=\"zoomIn()\" class=\"reader-popover-btn\" title=\"Zoom in\">+</button></div></div><div class=\"reader-tools-row\"><span>Fit</span> <select @change=\"applyFitMode($event.target.value)\" class=\"reader-select text-xs px-1.5 py-1 rounded-lg\" aria-label=\"Fit mode\"><option value=\"fit-page\">Fit Page</option> <option value=\"fit-width\">Fit Width</option></select></div><div class=\"reader-tools-row\"><span>Page position</span> <button @click=\"recenterView()\" class=\"reader-popover-btn text-xs px-2\" title=\"Reset pan, keep zoom\">Recenter</button></div><div class=\"reader-tools-row\"><span>Magnifier</span> <button @click=\"toggleMagnifier()\" class=\"reader-popover-btn text-xs px-2\" :class=\"magnifierEnabled ? 'text-blue-400' : ''\" x-text=\"magnifierEnabled ? 'On' : 'Off'\">Off</button></div><div class=\"reader-tools-row\" x-show=\"isPDF\"><span>Pointer</span><div class=\"reader-seg\" role=\"group\" aria-label=\"Pointer mode\"><button :class=\"interactionMode === 'select' ? 'active' : ''\" @click=\"setInteractionMode('select')\">Smart</button> <button :class=\"interactionMode === 'pan' ? 'active' : ''\" @click=\"setInteractionMode('pan')\">Pan</button> <button :class=\"interactionMode === 'text' ? 'active' : ''\" @click=\"setInteractionMode('text')\">Text</button></div></div><div class=\"reader-tools-row\"><span>Double page</span> <button @click=\"toggleSpread()\" class=\"reader-popover-btn text-xs px-2\" :class=\"doublePageSpread ? 'text-blue-400' : ''\" x-text=\"doublePageSpread ? 'On' : 'Off'\">Off</button></div><div class=\"reader-tools-row\"><span>Contents</span> <button @click=\"toggleTOC()\" class=\"reader-popover-btn text-xs px-2\">Open</button></div></div></div></div></div>")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</span></div><button @click=\"toggleTOC()\" class=\"p-1.5 sm:p-2 rounded-lg hover:bg-gray-700\" title=\"Table of Contents (t)\">📖</button></div></div><!-- Compact row (phone-sized windows): single line + ⋯ overflow.\n\t\t\t\t Standard mobile-reader pattern: paging, slider, progress stay;\n\t\t\t\t power tools move into a labeled menu. --><div class=\"flex md:hidden items-center gap-1 px-1.5 py-1.5\"><button @click=\"goLeft()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" title=\"Go Left (←)\" aria-label=\"Go left\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 15 6 L 9 12 L 15 18\"></path></svg></button> <button x-show=\"backStack.length > 0\" @click=\"goBackToLocation()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" title=\"Return to previous location (Alt+←)\" aria-label=\"Return to previous location\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><path d=\"M 12 21 C 9 18 5 14.4 5 9.5 C 5 6.5 8 4 12 4 C 16 4 19 6.5 19 9.5 C 19 14.4 15 18 12 21 Z\"></path> <circle cx=\"12\" cy=\"9.5\" r=\"2\"></circle></svg></button> <input id=\"progress-slider-fx-compact\" type=\"range\" min=\"0\" max=\"1\" step=\"any\" @input=\"goToFraction($event.target.value)\" class=\"grow min-w-[3rem]\"> <button @click=\"goRight()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" title=\"Go Right (→)\" aria-label=\"Go right\"><svg class=\"reader-icon\" width=\"24\" height=\"24\" aria-hidden=\"true\"><path d=\"M 9 6 L 15 12 L 9 18\"></path></svg></button><div @click=\"cycleProgressMode()\" :title=\"progressTooltip()\" class=\"text-sm min-w-[3rem] text-center cursor-pointer truncate shrink-0\"><span x-text=\"progressMain\">0/0</span></div><button data-tools-toggle @click=\"toggleTools()\" class=\"p-1.5 rounded-lg hover:bg-gray-700\" :title=\"toolsOpen ? 'Close tools' : 'More tools'\" aria-label=\"More tools\" :aria-expanded=\"toolsOpen ? 'true' : 'false'\"><svg class=\"reader-icon\" width=\"20\" height=\"20\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle> <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle> <circle cx=\"19\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle></svg></button></div><!-- Tools overflow menu: labeled rows (mobile-reader pattern —\n\t\t\t\t labels beat mystery icons). Anchored above the bottom bar. --><div x-show=\"toolsOpen\" x-transition:enter=\"transition ease-out duration-150\" x-transition:enter-start=\"opacity-0 translate-y-2\" x-transition:enter-end=\"opacity-100 translate-y-0\" x-transition:leave=\"transition ease-in duration-100\" x-transition:leave-start=\"opacity-100 translate-y-0\" x-transition:leave-end=\"opacity-0 translate-y-2\" class=\"reader-tools-popover\" role=\"menu\" aria-label=\"Reader tools\" @pointerdown.stop><div class=\"reader-tools-row\"><span>Zoom</span><div class=\"flex items-center gap-1\"><button @click=\"zoomOut()\" class=\"reader-popover-btn\" title=\"Zoom out\">−</button> <button @click=\"resetZoom()\" class=\"text-xs px-1 min-w-[3rem] text-center\" title=\"Reset zoom\"><span x-text=\"zoomPercent + '%'\">100%</span></button> <button @click=\"zoomIn()\" class=\"reader-popover-btn\" title=\"Zoom in\">+</button></div></div><div class=\"reader-tools-row\"><span>Fit</span> <select @change=\"applyFitMode($event.target.value)\" class=\"reader-select text-xs px-1.5 py-1 rounded-lg\" aria-label=\"Fit mode\"><option value=\"fit-page\">Fit Page</option> <option value=\"fit-width\">Fit Width</option></select></div><div class=\"reader-tools-row\"><span>Page position</span> <button @click=\"recenterView()\" class=\"reader-popover-btn text-xs px-2\" title=\"Reset pan, keep zoom\">Recenter</button></div><div class=\"reader-tools-row\"><span>Magnifier</span> <button @click=\"toggleMagnifier()\" class=\"reader-popover-btn text-xs px-2\" :class=\"magnifierEnabled ? 'text-blue-400' : ''\" x-text=\"magnifierEnabled ? 'On' : 'Off'\">Off</button></div><div class=\"reader-tools-row\" x-show=\"isPDF\"><span>Pointer</span><div class=\"reader-seg\" role=\"group\" aria-label=\"Pointer mode\"><button :class=\"interactionMode === 'select' ? 'active' : ''\" @click=\"setInteractionMode('select')\">Smart</button> <button :class=\"interactionMode === 'pan' ? 'active' : ''\" @click=\"setInteractionMode('pan')\">Pan</button> <button :class=\"interactionMode === 'text' ? 'active' : ''\" @click=\"setInteractionMode('text')\">Text</button></div></div><div class=\"reader-tools-row\"><span>Double page</span> <button @click=\"toggleSpread()\" class=\"reader-popover-btn text-xs px-2\" :class=\"doublePageSpread ? 'text-blue-400' : ''\" x-text=\"doublePageSpread ? 'On' : 'Off'\">Off</button></div><div class=\"reader-tools-row\"><span>Contents</span> <button @click=\"toggleTOC()\" class=\"reader-popover-btn text-xs px-2\">Open</button></div></div></div></div></div>")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
||||
+4
-15
@@ -991,21 +991,10 @@
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
/* Fixed-layout toolbar responsiveness:
|
||||
- >= 768px: full toolbar (flex-wrap absorbs mid-size widths)
|
||||
- < 768px: compact single line + ⋯ overflow menu (mobile-reader
|
||||
pattern: paging/slider/progress stay, power tools get a labeled menu) */
|
||||
.fx-compact {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.fx-tools-full {
|
||||
display: none;
|
||||
}
|
||||
.fx-compact {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
/* Fixed-layout toolbar responsiveness is handled with Tailwind responsive
|
||||
utilities in reader.templ (hidden md:flex for the full toolbar,
|
||||
flex md:hidden for the compact row) — custom layer rules here would
|
||||
lose the cascade to the flex utility anyway. */
|
||||
.reader-tools-popover {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
|
||||
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated
|
||||
/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Noto Sans SC,Noto Sans TC,Noto Sans JP,Noto Sans KR,PingFang SC,Microsoft YaHei,Hiragino Sans,Apple SD Gothic Neo,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}input:where(:not([type])),input:where([type=date]),input:where([type=datetime-local]),input:where([type=email]),input:where([type=month]),input:where([type=number]),input:where([type=password]),input:where([type=search]),input:where([type=tel]),input:where([type=text]),input:where([type=time]),input:where([type=url]),input:where([type=week]),select,select:where([multiple]),textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow:0 0 #0000}input:where(:not([type])):focus,input:where([type=date]):focus,input:where([type=datetime-local]):focus,input:where([type=email]):focus,input:where([type=month]):focus,input:where([type=number]):focus,input:where([type=password]):focus,input:where([type=search]):focus,input:where([type=tel]):focus,input:where([type=text]):focus,input:where([type=time]):focus,input:where([type=url]):focus,input:where([type=week]):focus,select:focus,select:where([multiple]):focus,textarea:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath Line truncated
|
||||
Reference in new issue
Block a user