feat(reader): mobile-pattern toolbar — compact row + ⋯ overflow menu under 768px
Wrapping alone isn't how polished mobile readers work. Adopt the standard pattern (Kindle/Apple Books/Mihon) responsively: - >= 768px: the full fixed-layout toolbar stays (wrap still absorbs mid-size widths) — power users keep one-click zoom/fit/spread. - < 768px: single-line compact row — page back, back-to-location pin, slider, page forward, progress, and a ⋯ overflow button. No wrapping, no horizontal scroll. - ⋯ opens a glass menu anchored above the bar with LABELED rows (Zoom −/%/+, Fit, Page position/Recenter, Magnifier, Pointer Smart/Pan/Text, Double page, Contents) — labels beat mystery icons on touch. Pointer row hides for comics; menu scrolls if tall. - Dismissal: Esc, outside click (⋯ button exempt so it re-toggles cleanly), opening any drawer or TOC closes it; hides with the chrome. Compact slider registered in progressSliders() so all three stay in sync with relocate events.
This commit is contained in:
@@ -991,6 +991,55 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
.reader-tools-popover {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
min-width: 16rem;
|
||||
max-width: calc(100vw - 1.5rem);
|
||||
max-height: min(26rem, 65vh);
|
||||
overflow-y: auto;
|
||||
background-color: color-mix(in srgb, var(--bg-primary) 88%, transparent);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(1.3);
|
||||
backdrop-filter: blur(18px) saturate(1.3);
|
||||
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.35);
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.reader-tools-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.reader-tools-row + .reader-tools-row {
|
||||
border-top: 1px solid
|
||||
color-mix(in srgb, var(--border) 45%, transparent);
|
||||
}
|
||||
.reader-tools-row:hover {
|
||||
background-color: color-mix(in srgb, currentColor 6%, transparent);
|
||||
}
|
||||
|
||||
/* In-book search */
|
||||
.reader-search-bar {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user