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)
27 lines
1.3 KiB
HTML
27 lines
1.3 KiB
HTML
{{define "action-buttons"}}
|
|
<!-- Right: Action buttons -->
|
|
<div class="action-buttons-right">
|
|
<button
|
|
id="action-bar-pdf-btn"
|
|
class="action-btn pdf-btn has-tooltip"
|
|
onclick="document.getElementById('pdf-modal').showModal()"
|
|
aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}"
|
|
data-tooltip="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}"
|
|
_="on mouseenter call syncPdfHover(true)
|
|
on mouseleave call syncPdfHover(false)">
|
|
<iconify-icon icon="catppuccin:pdf" width="24" height="24"></iconify-icon>
|
|
{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
|
|
</button>
|
|
<button
|
|
class="action-btn print-btn action-bar-print-btn has-tooltip"
|
|
aria-label="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}"
|
|
data-tooltip="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}"
|
|
_="on click call printFriendly()
|
|
on mouseenter call syncPrintHover(true)
|
|
on mouseleave call syncPrintHover(false)">
|
|
<iconify-icon icon="mdi:leaf" width="24" height="24"></iconify-icon>
|
|
{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
|
|
</button>
|
|
</div>
|
|
{{end}}
|