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

refactor: simplify zoom control - transparent, monochrome, minimal

Browse Source 
UI Changes:
- Made control transparent by default (opacity: 0.3), fully visible on hover
- Removed all colors - pure monochrome gray design
- Removed search icon (magnify) - no search functionality
- Changed reset icon to simple "100" text button
- Simplified layout: just 50 - slider - 100 - 200 - reset
- Moved higher: bottom 70px (desktop), 50px (tablet), 40px (mobile)

Visual Design:
- Transparent gray background with subtle blur
- Gray slider track (no rainbow gradient)
- Smaller, minimal sizing
- Numbers without % symbol for cleaner look
- Reset button shows "100" instead of circular arrows

Code Cleanup:
- Removed .zoom-label and icon markup
- Removed .zoom-slider-container wrapper
- Updated updateZoomDisplay() to use correct ID
- Simplified CSS - removed unused label styles
- Updated mobile responsive breakpoints
This commit is contained in:
juanatsap
2025-11-12 11:09:42 +00:00
parent 93b471b7e3
commit 1c20a22522
3 changed files with 96 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+77 -154
View File
@@ -3468,106 +3468,65 @@ html {
.zoom-control { .zoom-control {
position: fixed; position: fixed;
bottom: 20px; bottom: 70px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 900; z-index: 900;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.5rem;
padding: 0.75rem 1.5rem; padding: 0.5rem 1rem;
background: rgba(43, 43, 43, 0.95); background: rgba(200, 200, 200, 0.15);
backdrop-filter: blur(10px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(8px);
border-radius: 50px; border-radius: 50px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.3s ease;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; opacity: 0.3;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
} }
.zoom-control:hover { .zoom-control:hover {
background: rgba(43, 43, 43, 0.98); opacity: 1;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4); background: rgba(200, 200, 200, 0.25);
} box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
/* Zoom Label with Icon */
.zoom-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: white;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
margin: 0;
}
.zoom-label iconify-icon {
color: var(--accent-blue);
flex-shrink: 0;
}
/* Screen Reader Only Text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* Slider Container */
.zoom-slider-container {
display: flex;
align-items: center;
gap: 0.75rem;
} }
/* Zoom Values (Labels) */ /* Zoom Values (Labels) */
.zoom-value { .zoom-value {
color: rgba(255, 255, 255, 0.7); color: rgba(100, 100, 100, 0.8);
font-size: 0.85rem; font-size: 0.75rem;
font-weight: 500; font-weight: 400;
min-width: 40px; min-width: 30px;
text-align: center; text-align: center;
} }
.zoom-value-current { .zoom-value-current {
color: white; color: rgba(60, 60, 60, 0.9);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.85rem;
min-width: 35px;
} }
/* Range Slider Styling */ /* Range Slider Styling */
.zoom-slider { .zoom-slider {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 200px; width: 180px;
height: 6px; height: 4px;
border-radius: 3px; border-radius: 2px;
background: linear-gradient( background: rgba(120, 120, 120, 0.3);
to right,
#e74c3c 0%,
#f39c12 25%,
var(--accent-blue) 50%,
#3498db 75%,
#27ae60 100%
);
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: opacity 0.2s; transition: all 0.2s ease;
} }
.zoom-slider:hover { .zoom-slider:hover {
opacity: 0.9; background: rgba(120, 120, 120, 0.5);
} }
.zoom-slider:focus { .zoom-slider:focus {
outline: 2px solid var(--accent-blue); outline: 2px solid rgba(100, 100, 100, 0.5);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -3575,60 +3534,55 @@ html {
.zoom-slider::-webkit-slider-thumb { .zoom-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 20px; width: 16px;
height: 20px; height: 16px;
border-radius: 50%; border-radius: 50%;
background: white; background: rgba(255, 255, 255, 0.95);
border: 2px solid var(--accent-blue); border: 2px solid rgba(100, 100, 100, 0.6);
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s ease;
} }
.zoom-slider::-webkit-slider-thumb:hover { .zoom-slider::-webkit-slider-thumb:hover {
transform: scale(1.15); transform: scale(1.1);
box-shadow: 0 3px 12px rgba(0, 102, 204, 0.5); background: white;
border-color: rgba(80, 80, 80, 0.8);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
} }
.zoom-slider::-webkit-slider-thumb:active { .zoom-slider::-webkit-slider-thumb:active {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.6);
} }
/* Firefox Slider Thumb */ /* Firefox Slider Thumb */
.zoom-slider::-moz-range-thumb { .zoom-slider::-moz-range-thumb {
width: 20px; width: 16px;
height: 20px; height: 16px;
border-radius: 50%; border-radius: 50%;
background: white; background: rgba(255, 255, 255, 0.95);
border: 2px solid var(--accent-blue); border: 2px solid rgba(100, 100, 100, 0.6);
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s ease;
} }
.zoom-slider::-moz-range-thumb:hover { .zoom-slider::-moz-range-thumb:hover {
transform: scale(1.15); transform: scale(1.1);
box-shadow: 0 3px 12px rgba(0, 102, 204, 0.5); background: white;
border-color: rgba(80, 80, 80, 0.8);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
} }
.zoom-slider::-moz-range-thumb:active { .zoom-slider::-moz-range-thumb:active {
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0, 102, 204, 0.6);
} }
/* Firefox Range Track */ /* Firefox Range Track */
.zoom-slider::-moz-range-track { .zoom-slider::-moz-range-track {
height: 6px; height: 4px;
border-radius: 3px; border-radius: 2px;
background: linear-gradient( background: rgba(120, 120, 120, 0.3);
to right,
#e74c3c 0%,
#f39c12 25%,
var(--accent-blue) 50%,
#3498db 75%,
#27ae60 100%
);
} }
/* Reset Button */ /* Reset Button */
@@ -3636,102 +3590,71 @@ html {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 36px; padding: 0.25rem 0.5rem;
height: 36px; background: rgba(120, 120, 120, 0.15);
padding: 0; border: 1px solid rgba(100, 100, 100, 0.3);
background: rgba(255, 255, 255, 0.1); border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(80, 80, 80, 0.9);
border-radius: 50%; font-size: 0.75rem;
color: white; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s ease;
flex-shrink: 0; flex-shrink: 0;
} }
.zoom-reset-btn:hover { .zoom-reset-btn:hover {
background: var(--accent-blue); background: rgba(120, 120, 120, 0.25);
border-color: var(--accent-blue); border-color: rgba(80, 80, 80, 0.5);
transform: rotate(180deg); color: rgba(60, 60, 60, 1);
} }
.zoom-reset-btn:active { .zoom-reset-btn:active {
transform: rotate(180deg) scale(0.95); transform: scale(0.95);
} }
.zoom-reset-btn:focus { .zoom-reset-btn:focus {
outline: 2px solid var(--accent-blue); outline: 2px solid rgba(100, 100, 100, 0.5);
outline-offset: 2px; outline-offset: 2px;
} }
.zoom-reset-btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
/* Mobile Responsive - Smaller on mobile */ /* Mobile Responsive - Smaller on mobile */
@media (max-width: 768px) { @media (max-width: 768px) {
.zoom-control { .zoom-control {
bottom: 15px; bottom: 50px;
padding: 0.6rem 1.2rem; padding: 0.4rem 0.8rem;
gap: 0.75rem; gap: 0.4rem;
border-radius: 40px;
}
.zoom-label {
font-size: 0.85rem;
}
.zoom-label iconify-icon {
width: 18px;
height: 18px;
} }
.zoom-slider { .zoom-slider {
width: 150px; width: 140px;
height: 5px;
}
.zoom-slider::-webkit-slider-thumb {
width: 18px;
height: 18px;
}
.zoom-slider::-moz-range-thumb {
width: 18px;
height: 18px;
} }
.zoom-value { .zoom-value {
font-size: 0.8rem; font-size: 0.7rem;
min-width: 35px; min-width: 25px;
} }
.zoom-value-current { .zoom-value-current {
font-size: 0.9rem; font-size: 0.8rem;
min-width: 30px;
} }
.zoom-reset-btn { .zoom-reset-btn {
width: 32px; font-size: 0.7rem;
height: 32px; padding: 0.2rem 0.4rem;
}
.zoom-reset-btn svg {
width: 14px;
height: 14px;
} }
} }
/* Very Small Screens - Ultra Compact */ /* Very Small Screens - Ultra Compact */
@media (max-width: 480px) { @media (max-width: 480px) {
.zoom-control { .zoom-control {
bottom: 10px; bottom: 40px;
padding: 0.5rem 1rem; padding: 0.35rem 0.7rem;
gap: 0.5rem; gap: 0.35rem;
} }
.zoom-slider { .zoom-slider {
width: 120px; width: 100px;
} }
/* Hide min/max labels on very small screens */ /* Hide min/max labels on very small screens */
static/js/main.js
+2 -2
View File
@@ -357,10 +357,10 @@
*/ */
function updateZoomDisplay(zoomValue) { function updateZoomDisplay(zoomValue) {
const slider = document.getElementById('zoom-slider'); const slider = document.getElementById('zoom-slider');
const display = document.getElementById('zoom-display'); const display = document.getElementById('zoom-value-current');
if (display) { if (display) {
display.textContent = `${zoomValue}%`; display.textContent = zoomValue;
} }
if (slider) { if (slider) {
templates/index.html
+17 -29
View File
@@ -456,44 +456,32 @@
<!-- Zoom Control (Fixed Bottom Center) --> <!-- Zoom Control (Fixed Bottom Center) -->
<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}"> <div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
<label for="zoom-slider" class="zoom-label"> <span class="zoom-value zoom-value-min" aria-hidden="true">50</span>
<iconify-icon icon="mdi:magnify" width="20" height="20" aria-hidden="true"></iconify-icon>
<span class="sr-only">{{if eq .Lang "es"}}Nivel de zoom{{else}}Zoom level{{end}}</span>
</label>
<div class="zoom-slider-container"> <input
<span class="zoom-value zoom-value-min" aria-hidden="true">50%</span> type="range"
id="zoom-slider"
class="zoom-slider"
min="50"
max="200"
step="5"
value="100"
aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
aria-valuemin="50"
aria-valuemax="200"
aria-valuenow="100"
aria-valuetext="100%">
<input <span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100</span>
type="range"
id="zoom-slider"
class="zoom-slider"
min="50"
max="200"
step="5"
value="100"
aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
aria-valuemin="50"
aria-valuemax="200"
aria-valuenow="100"
aria-valuetext="100%">
<span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100%</span> <span class="zoom-value zoom-value-max" aria-hidden="true">200</span>
<span class="zoom-value zoom-value-max" aria-hidden="true">200%</span>
</div>
<button <button
id="zoom-reset" id="zoom-reset"
class="zoom-reset-btn" class="zoom-reset-btn"
aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}" aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}"
title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}"> title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> 100
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
<path d="M21 3v5h-5"/>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
<path d="M3 21v-5h5"/>
</svg>
</button> </button>
</div> </div>