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
templates/index.html
+17 -29
View File
@@ -456,44 +456,32 @@
<!-- 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}}">
<label for="zoom-slider" class="zoom-label">
<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>
<span class="zoom-value zoom-value-min" aria-hidden="true">50</span>
<div class="zoom-slider-container">
<span class="zoom-value zoom-value-min" aria-hidden="true">50%</span>
<input
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
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 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>
</div>
<span class="zoom-value zoom-value-max" aria-hidden="true">200</span>
<button
id="zoom-reset"
class="zoom-reset-btn"
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}}">
<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">
<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>
100
</button>
</div>