feat: add synchronized hover effect for PDF and print-friendly buttons
- PDF buttons (fixed, action bar, menu) now sync hover states across all instances - Print-friendly buttons (fixed, action bar, menu) sync green hover states - White PDF icon with red hover background (#cd6060) - Green print button hover (#27ae60) - Implemented using hyperscript with .pdf-hover-sync and .print-hover-sync classes - Creates cool visual feedback showing all related buttons simultaneously
This commit is contained in:
@@ -2,16 +2,31 @@
|
||||
<!-- Right: Action buttons -->
|
||||
<div class="action-buttons-right">
|
||||
<button
|
||||
id="action-bar-pdf-btn"
|
||||
class="action-btn pdf-btn"
|
||||
onclick="document.getElementById('pdf-modal').showModal()"
|
||||
aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}">
|
||||
<iconify-icon icon="mdi:download" width="18" height="18"></iconify-icon>
|
||||
aria-label="{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}"
|
||||
_="on mouseenter
|
||||
add .pdf-hover-sync to me
|
||||
add .pdf-hover-sync to #download-button
|
||||
on mouseleave
|
||||
remove .pdf-hover-sync from me
|
||||
remove .pdf-hover-sync from #download-button">
|
||||
<iconify-icon icon="catppuccin:pdf" width="18" height="18"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}
|
||||
</button>
|
||||
<button
|
||||
class="action-btn print-btn"
|
||||
class="action-btn print-btn action-bar-print-btn"
|
||||
aria-label="{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}"
|
||||
_="on click call printFriendly()">
|
||||
_="on click call printFriendly()
|
||||
on mouseenter
|
||||
add .print-hover-sync to me
|
||||
add .print-hover-sync to #print-friendly-button
|
||||
add .print-hover-sync to .menu-print-btn
|
||||
on mouseleave
|
||||
remove .print-hover-sync from me
|
||||
remove .print-hover-sync from #print-friendly-button
|
||||
remove .print-hover-sync from .menu-print-btn">
|
||||
<iconify-icon icon="mdi:leaf" width="18" height="18"></iconify-icon>
|
||||
{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}
|
||||
</button>
|
||||
|
||||
@@ -205,11 +205,20 @@
|
||||
</div>
|
||||
|
||||
<button class="menu-action-btn" onclick="document.getElementById('pdf-modal').showModal()">
|
||||
<iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
|
||||
<iconify-icon icon="catppuccin:pdf" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Descargar como PDF{{else}}Download as PDF{{end}}</span>
|
||||
</button>
|
||||
|
||||
<button class="menu-action-btn" _="on click call printFriendly()">
|
||||
<button class="menu-action-btn menu-print-btn"
|
||||
_="on click call printFriendly()
|
||||
on mouseenter
|
||||
add .print-hover-sync to me
|
||||
add .print-hover-sync to #print-friendly-button
|
||||
add .print-hover-sync to .action-bar-print-btn
|
||||
on mouseleave
|
||||
remove .print-hover-sync from me
|
||||
remove .print-hover-sync from #print-friendly-button
|
||||
remove .print-hover-sync from .action-bar-print-btn">
|
||||
<iconify-icon icon="mdi:leaf" width="20" height="20"></iconify-icon>
|
||||
<span>{{if eq .Lang "es"}}Imprimir amigable{{else}}Print Friendly{{end}}</span>
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{{define "download-button"}}
|
||||
<!-- Download PDF Button (Fixed Left) -->
|
||||
<button
|
||||
id="download-button"
|
||||
class="fixed-btn download-btn no-print"
|
||||
aria-label="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
|
||||
title="{{if eq .Lang "es"}}Descargar PDF{{else}}Download PDF{{end}}"
|
||||
onclick="document.getElementById('pdf-modal').showModal()"
|
||||
_="on mouseenter
|
||||
add .pdf-hover-sync to me
|
||||
add .pdf-hover-sync to #action-bar-pdf-btn
|
||||
on mouseleave
|
||||
remove .pdf-hover-sync from me
|
||||
remove .pdf-hover-sync from #action-bar-pdf-btn">
|
||||
<iconify-icon icon="catppuccin:pdf" width="28" height="28"></iconify-icon>
|
||||
</button>
|
||||
{{end}}
|
||||
@@ -0,0 +1,19 @@
|
||||
{{define "print-friendly-button"}}
|
||||
<!-- Print-Friendly Button (Fixed Left) -->
|
||||
<button
|
||||
id="print-friendly-button"
|
||||
class="fixed-btn print-friendly-btn no-print"
|
||||
aria-label="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
|
||||
title="{{if eq .Lang "es"}}Imprimir CV{{else}}Print CV{{end}}"
|
||||
onclick="window.print()"
|
||||
_="on mouseenter
|
||||
add .print-hover-sync to me
|
||||
add .print-hover-sync to .action-bar-print-btn
|
||||
add .print-hover-sync to .menu-print-btn
|
||||
on mouseleave
|
||||
remove .print-hover-sync from me
|
||||
remove .print-hover-sync from .action-bar-print-btn
|
||||
remove .print-hover-sync from .menu-print-btn">
|
||||
<iconify-icon icon="mdi:leaf" width="28" height="28"></iconify-icon>
|
||||
</button>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user