txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct button order and restore smooth transitions

Browse Source 
Fixes:
1. ✅ Reversed button order - Info at bottom, Download at top
   - Desktop (bottom→top): Info → Shortcuts → Zoom → Print → Download
   - Mobile (left→right): Download → Print → Shortcuts → Info

2. ✅ Restored smooth morphing transitions
   - Added transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)
   - Container smoothly transforms from vertical to horizontal
   - Buttons smoothly reposition during responsive transition

3. ✅ Preserved all special hover behaviors
   - Zoom button: Blue hover + highlights zoom control
   - Print button: White bg + green icon on hover (synchronized)
   - Download button: Red bg on hover (synchronized)
   - All sync functions working: syncPdfHover, syncPrintHover, highlightZoomControl

The flexbox container now has the correct button order AND smooth animations!
This commit is contained in:
juanatsap
2025-11-16 14:26:49 +00:00
parent 8eea5a660a
commit 0edcf8c221
8 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/index.html
+5 -5
View File
@@ -136,13 +136,13 @@
</div> <!-- End zoom-wrapper -->
{{template "error-toast" .}}
<!-- Fixed buttons container - Flexbox layout (desktop: right side bottom-to-top, mobile: bottom center horizontal) -->
<!-- Fixed buttons container - Flexbox layout (desktop: left side bottom-to-top, mobile: bottom center horizontal) -->
<div class="fixed-buttons-container">
{{template "info-button" .}}
{{template "shortcuts-button" .}}
{{template "zoom-toggle-button" .}}
{{template "print-friendly-button" .}}
{{template "download-button" .}}
{{template "print-friendly-button" .}}
{{template "zoom-toggle-button" .}}
{{template "shortcuts-button" .}}
{{template "info-button" .}}
</div>
{{template "back-to-top" .}}
{{template "info-modal" .}}