txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
533 Commits 1 Branch 2 Tags
33fd31d246cf3a35806805b6a306f5fa44f9892a
Commit Graph

3 Commits

Author SHA1 Message Date
juanatsap ca758882ef fix: Position theme switcher and info button tooltips on TOP for mobile 
The theme switcher and info button tooltips were appearing on the RIGHT
in mobile view instead of on TOP (like macOS Dock style) because they
didn't have the .fixed-btn class and weren't included in the mobile
media query rules.

Changes:
- static/css/04-interactive/_tooltips.css: Add .color-theme-switcher and
  .info-button selectors to mobile @media (max-width: 900px) rules
- Now tooltips appear ABOVE these buttons on mobile with bottom: calc(100% + 8px)

Testing:
- Added mobile tooltip position test
- Verified theme switcher and info tooltips now positioned on top on mobile
- Desktop behavior unchanged (tooltips still on right)

Mobile tooltip positioning now consistent across ALL buttons:
✅ All bottom dock buttons show tooltips on TOP (macOS Dock style)
 2025-11-20 20:01:57 +00:00
juanatsap 2497dbaa3e fix: Correct fixed button tooltip positioning and add mobile support 
- Remove tooltip-left class from zoom and shortcuts buttons (all left-side buttons show tooltips on RIGHT)
- Add mobile CSS rules for fixed-btn tooltips to appear on TOP (like macOS Dock)
- Update button template comments to reflect correct positioning
- Mobile: All fixed buttons now show tooltips above (top position)
- Desktop: All left-side fixed buttons show tooltips on right
 2025-11-20 18:31:31 +00:00
juanatsap dfbe45881f feat: Add macOS Dock-style tooltips and fix PDF modal text colors in dark theme 
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)
 2025-11-20 17:52:07 +00:00