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

refactor: move zoom toggle to hamburger menu and make close button subtle

Browse Source 
- Moved "Zoom" button from action bar to hamburger menu under "Acciones Rápidas"
- Close button (X) now grey/subtle by default (opacity: 0.7)
- Close button turns red only on hover for clear indication
- Updated JavaScript to reference show-zoom-menu-btn instead of show-zoom-btn
- Added preventDefault to showZoomControl to prevent link navigation
This commit is contained in:
juanatsap
2025-11-12 15:16:21 +00:00
parent b34ef54048
commit 3ea0d5598e
3 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+6 -3
View File
@@ -3501,10 +3501,10 @@ html {
right: -8px;
width: 24px;
height: 24px;
background: rgba(220, 53, 69, 0.9);
background: rgba(128, 128, 128, 0.6); /* Subtle grey */
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: white;
color: rgba(255, 255, 255, 0.8); /* Light grey icon */
cursor: pointer;
display: flex;
align-items: center;
@@ -3512,10 +3512,13 @@ html {
padding: 0;
transition: all 0.2s ease;
z-index: 1;
opacity: 0.7; /* Subtle by default */
}
.zoom-close-btn:hover {
background: rgba(220, 53, 69, 1);
background: rgba(220, 53, 69, 0.9); /* Red on hover */
color: white; /* White icon on hover */
opacity: 1; /* Fully visible on hover */
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}
static/js/main.js
+8 -6
View File
@@ -485,7 +485,7 @@
*/
function hideZoomControl() {
const zoomControl = document.getElementById('zoom-control');
const showButton = document.getElementById('show-zoom-btn');
const showButton = document.getElementById('show-zoom-menu-btn');
if (zoomControl) {
zoomControl.style.display = 'none';
@@ -493,16 +493,18 @@
}
if (showButton) {
showButton.style.display = 'inline-flex';
showButton.style.display = 'block';
}
}
/**
* Show zoom control and hide menu button (global function for onclick)
*/
window.showZoomControl = function() {
window.showZoomControl = function(event) {
if (event) event.preventDefault(); // Prevent default link behavior
const zoomControl = document.getElementById('zoom-control');
const showButton = document.getElementById('show-zoom-btn');
const showButton = document.getElementById('show-zoom-menu-btn');
if (zoomControl) {
zoomControl.style.display = 'flex';
@@ -521,13 +523,13 @@
if (isMobileView()) return; // Always hidden on mobile
const zoomControl = document.getElementById('zoom-control');
const showButton = document.getElementById('show-zoom-btn');
const showButton = document.getElementById('show-zoom-menu-btn');
const isVisible = localStorage.getItem('cv-zoom-visible');
// Default to visible if not set
if (isVisible === 'false') {
if (zoomControl) zoomControl.style.display = 'none';
if (showButton) showButton.style.display = 'inline-flex';
if (showButton) showButton.style.display = 'block';
} else {
if (zoomControl) zoomControl.style.display = 'flex';
if (showButton) showButton.style.display = 'none';