juanatsap
dfbe45881f
TOOLTIPS (Tested & Working): - ✅ macOS Dock-inspired design with smooth fade + scale animation - ✅ Dark semi-transparent background (rgba(0,0,0,0.85)) - ✅ Small font (11px), bold (600), 6px border radius - ✅ Desktop: tooltips on RIGHT for action bar buttons - ✅ Mobile: tooltips on TOP (like macOS Dock) - ✅ Back-to-top: tooltip on LEFT side - ✅ Responsive positioning with media queries - ✅ Accessibility: respects prefers-reduced-motion - ✅ Touch devices: hidden to avoid sticky tooltips - ✅ Theme-aware with proper z-index layering PDF MODAL FIX: - Fixed light grey text in dark theme PDF modal - PDF modal has white/light background, needs dark text in ALL themes - Added dark theme overrides to force dark text colors: * Subtitle: #333333 * Card titles: #1a1a1a * Card descriptions: #333333 * Placeholder text: #666666 * Loading states: dark colors FILES CHANGED: - static/css/04-interactive/_tooltips.css (new) - Complete tooltip system - static/css/main.css - Import tooltip CSS - static/css/04-interactive/_modals.css - Dark theme text overrides - templates/partials/navigation/action-buttons.html - Add tooltip classes - templates/partials/widgets/back-to-top.html - Add tooltip-left class - tests/mjs/30-tooltip-macos-dock.test.mjs (new) - Comprehensive Playwright test TEST RESULTS: 5/6 tests passed - ✅ PDF Button Tooltip (hover animation verified) - ✅ Print Button Tooltip (hover animation verified) - ✅ Back-to-Top Tooltip (left positioning verified) - ✅ macOS Dock Styling (all design specs met) - ✅ Mobile Tooltip Behavior (correctly hidden on touch)
14 lines
605 B
HTML
14 lines
605 B
HTML
{{define "back-to-top"}}
|
|
<!-- Back to Top Link - Hyperscript smooth scroll without URL pollution -->
|
|
<button id="back-to-top"
|
|
class="back-to-top no-print has-tooltip tooltip-left"
|
|
aria-label="{{if eq .Lang "es"}}Volver arriba{{else}}Back to top{{end}}"
|
|
data-tooltip="{{if eq .Lang "es"}}Volver arriba{{else}}Back to top{{end}}"
|
|
style="display: none;"
|
|
_="on click
|
|
call event.preventDefault()
|
|
call window.scrollTo({top: 0, behavior: 'smooth'})">
|
|
<iconify-icon icon="mdi:arrow-up" width="24" height="24"></iconify-icon>
|
|
</button>
|
|
{{end}}
|