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

feat: enhance shortcuts modal and complete logos-to-icons rename

Browse Source 
This commit includes graphical keyboard icons integration, modal styling
improvements, and comprehensive "Logos" to "Icons" terminology update.

Changes:
- Add graphical keyboard icons using Iconify MDI (Tab, Ctrl, Cmd, Esc, etc.)
- Implement color scheme: black title, green subtitle/headers, blue kbd elements
- Add visual boxes with borders and shadows for section grouping
- Change modal from 3-column to 2-column grid layout (900px width)
- Fix critical bug: all 5 sections now render (was only showing 2)

Rename "Logos" to "Icons" across entire codebase:
- Go models: ToggleLogos → ToggleIcons, ShowLogos → ShowIcons
- Routes: /toggle/logos → /toggle/icons
- Templates: desktop-logo-toggle → desktop-icon-toggle, #logoToggle → #iconToggle
- JavaScript: logoToggles → iconToggles, sync logic updated
- CSS: .show-logos → .show-icons
- UI JSON: toggleLogos → toggleIcons
- Comments and labels updated

Technical details:
- Rebuilt Go binary to fix template rendering error
- Fixed JSON struct tag: json:"toggleLogos" → json:"toggleIcons"
- Updated kbd element styling for icon alignment (inline-flex)
- Added margin-bottom to subtitle (0.5rem)
- Grid now 2 columns for better 5-section layout

All 5 sections now render correctly:
1. Zoom Control
2. View Controls
3. Navigation
4. Actions
5. Browser Defaults
This commit is contained in:
juanatsap
2025-11-15 18:42:35 +00:00
parent 1f7757c848
commit a8d6805e27
13 changed files with 108 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/ui-en.json
+3 -3
View File
@@ -36,9 +36,9 @@
"key": "Tab to Length",
"description": "Toggle CV length (Short/Long)"
},
"toggleLogos": {
"key": "Tab to Logos",
"description": "Show/hide company logos"
"toggleIcons": {
"key": "Tab to Icons",
"description": "Show/hide company icons"
},
"toggleTheme": {
"key": "Tab to View",
data/ui-es.json
+3 -3
View File
@@ -36,9 +36,9 @@
"key": "Tab a Longitud",
"description": "Alternar longitud CV (Corto/Largo)"
},
"toggleLogos": {
"key": "Tab a Logos",
"description": "Mostrar/ocultar logos de empresas"
"toggleIcons": {
"key": "Tab a Iconos",
"description": "Mostrar/ocultar iconos de empresas"
},
"toggleTheme": {
"key": "Tab a Vista",
internal/handlers/cv.go
+12 -12
View File
@@ -86,7 +86,7 @@ func (h *CVHandler) Home(w http.ResponseWriter, r *http.Request) {
// Read user preferences from cookies
cvLength := getPreferenceCookie(r, "cv-length", "short")
cvLogos := getPreferenceCookie(r, "cv-logos", "show")
cvIcons := getPreferenceCookie(r, "cv-icons", "show")
cvTheme := getPreferenceCookie(r, "cv-theme", "default")
// Prepare CV length class
@@ -108,7 +108,7 @@ func (h *CVHandler) Home(w http.ResponseWriter, r *http.Request) {
"AlternateEN": "https://juan.andres.morenorub.io/?lang=en",
"AlternateES": "https://juan.andres.morenorub.io/?lang=es",
"CVLengthClass": cvLengthClass,
"ShowLogos": (cvLogos == "show"),
"ShowIcons": (cvIcons == "show"),
"ThemeClean": (cvTheme == "clean"),
}
@@ -712,24 +712,24 @@ func (h *CVHandler) ToggleLength(w http.ResponseWriter, r *http.Request) {
}
}
// ToggleLogos handles logo visibility toggle using atomic out-of-band swaps
func (h *CVHandler) ToggleLogos(w http.ResponseWriter, r *http.Request) {
// ToggleIcons handles icon visibility toggle using atomic out-of-band swaps
func (h *CVHandler) ToggleIcons(w http.ResponseWriter, r *http.Request) {
if r.Method != http.MethodPost {
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
return
}
// Get current state
currentLogos := getPreferenceCookie(r, "cv-logos", "show")
currentIcons := getPreferenceCookie(r, "cv-icons", "show")
// Toggle state
newLogos := "hide"
if currentLogos == "hide" {
newLogos = "show"
newIcons := "hide"
if currentIcons == "hide" {
newIcons = "show"
}
// Save new state
setPreferenceCookie(w, "cv-logos", newLogos)
setPreferenceCookie(w, "cv-icons", newIcons)
// Get language
lang := r.URL.Query().Get("lang")
@@ -740,7 +740,7 @@ func (h *CVHandler) ToggleLogos(w http.ResponseWriter, r *http.Request) {
// Prepare template data with logo state
data := map[string]interface{}{
"Lang": lang,
"ShowLogos": (newLogos == "show"),
"ShowIcons": (newIcons == "show"),
}
// Render logo-toggle template with out-of-band swaps
@@ -785,7 +785,7 @@ func (h *CVHandler) SwitchLanguage(w http.ResponseWriter, r *http.Request) {
// Preserve current length and logo preferences
cvLength := getPreferenceCookie(r, "cv-length", "short")
cvLogos := getPreferenceCookie(r, "cv-logos", "show")
cvIcons := getPreferenceCookie(r, "cv-icons", "show")
cvTheme := getPreferenceCookie(r, "cv-theme", "default")
// Add preferences to data
@@ -794,7 +794,7 @@ func (h *CVHandler) SwitchLanguage(w http.ResponseWriter, r *http.Request) {
} else {
data["CVLengthClass"] = "cv-short"
}
data["ShowLogos"] = (cvLogos == "show")
data["ShowIcons"] = (cvIcons == "show")
data["ThemeClean"] = (cvTheme == "clean")
// Render language-switch template with out-of-band swaps
internal/models/cv.go
+1 -1
View File
@@ -195,7 +195,7 @@ type ShortcutGroup struct {
ZoomOut *ShortcutItem `json:"zoomOut,omitempty"`
ZoomReset *ShortcutItem `json:"zoomReset,omitempty"`
ToggleLength *ShortcutItem `json:"toggleLength,omitempty"`
ToggleLogos *ShortcutItem `json:"toggleLogos,omitempty"`
ToggleIcons *ShortcutItem `json:"toggleIcons,omitempty"`
ToggleTheme *ShortcutItem `json:"toggleTheme,omitempty"`
ExpandAll *ShortcutItem `json:"expandAll,omitempty"`
CollapseAll *ShortcutItem `json:"collapseAll,omitempty"`
internal/routes/routes.go
+1 -1
View File
@@ -20,7 +20,7 @@ func Setup(cvHandler *handlers.CVHandler, healthHandler *handlers.HealthHandler)
// HTMX endpoints for interactive controls
mux.HandleFunc("/switch-language", cvHandler.SwitchLanguage)
mux.HandleFunc("/toggle/length", cvHandler.ToggleLength)
mux.HandleFunc("/toggle/logos", cvHandler.ToggleLogos)
mux.HandleFunc("/toggle/icons", cvHandler.ToggleIcons)
mux.HandleFunc("/toggle/theme", cvHandler.ToggleTheme)
// Protected PDF endpoint with rate limiting (3 requests/minute per IP)
static/css/logo-toggle.css
+10 -10
View File
@@ -125,8 +125,8 @@
padding-bottom: 0;
}
/* Adjust gap when logos are hidden */
.cv-paper:not(.show-logos) .experience-item {
/* Adjust gap when icons are hidden */
.cv-paper:not(.show-icons) .experience-item {
gap: 0;
}
@@ -163,7 +163,7 @@
min-width: 0; /* Prevents flex item from overflowing */
}
/* Animate logos with fade and scale */
/* Animate icons with fade and scale */
.company-logo,
.award-logo {
overflow: hidden;
@@ -174,9 +174,9 @@
height: auto;
}
/* Hide logos when toggle is OFF - with animation */
.cv-paper:not(.show-logos) .company-logo,
.cv-paper:not(.show-logos) .award-logo {
/* Hide icons when toggle is OFF - with animation */
.cv-paper:not(.show-icons) .company-logo,
.cv-paper:not(.show-icons) .award-logo {
opacity: 0;
transform: scale(0.8);
width: 0;
@@ -187,16 +187,16 @@
overflow: hidden;
}
/* Show logos when toggle is ON (default) - with animation */
.show-logos .company-logo,
.show-logos .award-logo {
/* Show icons when toggle is ON (default) - with animation */
.show-icons .company-logo,
.show-icons .award-logo {
opacity: 1;
transform: scale(1);
width: auto;
height: auto;
}
/* Company logos visible in print - styling controlled by print.css */
/* Company icons visible in print - styling controlled by print.css */
/* Mobile responsiveness */
@media (max-width: 768px) {
static/css/main.css
+28 -28
View File
@@ -1082,7 +1082,7 @@ iconify-icon {
color: var(--text-gray);
}
/* Responsibilities with company logos (similar to main experience layout) */
/* Responsibilities with company icons (similar to main experience layout) */
.responsibilities li:has(img),
.responsibilities li:has(iconify-icon) {
display: grid;
@@ -1806,63 +1806,63 @@ a:focus {
/* Keep border on all award items including last one */
/* ========================================
HIDE LOGOS, ICONS, AND BADGES MODE
HIDE ICONS, ICONS, AND BADGES MODE
======================================== */
/* Adjust gap when logos are hidden */
.cv-paper:not(.show-logos) .award-item {
/* Adjust gap when icons are hidden */
.cv-paper:not(.show-icons) .award-item {
gap: 0;
}
/* Hide all logos when .show-logos is not present */
.cv-paper:not(.show-logos) .company-logo,
.cv-paper:not(.show-logos) .award-logo,
.cv-paper:not(.show-logos) .project-icon,
.cv-paper:not(.show-logos) .course-icon {
/* Hide all icons when .show-icons is not present */
.cv-paper:not(.show-icons) .company-logo,
.cv-paper:not(.show-icons) .award-logo,
.cv-paper:not(.show-icons) .project-icon,
.cv-paper:not(.show-icons) .course-icon {
display: none !important;
}
/* Hide logos inside responsibilities (Drolosoft sub-clients, Third Party projects) */
.cv-paper:not(.show-logos) .responsibilities li img,
.cv-paper:not(.show-logos) .responsibilities li iconify-icon.default-company-icon {
/* Hide icons inside responsibilities (Drolosoft sub-clients, Third Party projects) */
.cv-paper:not(.show-icons) .responsibilities li img,
.cv-paper:not(.show-icons) .responsibilities li iconify-icon.default-company-icon {
display: none !important;
}
/* Adjust layout for responsibilities without logos */
.cv-paper:not(.show-logos) .responsibilities li:has(img),
.cv-paper:not(.show-logos) .responsibilities li:has(iconify-icon) {
/* Adjust layout for responsibilities without icons */
.cv-paper:not(.show-icons) .responsibilities li:has(img),
.cv-paper:not(.show-icons) .responsibilities li:has(iconify-icon) {
display: block !important;
grid-template-columns: none !important;
padding-left: 1.2rem !important;
}
/* Restore bullet points for responsibilities without logos */
.cv-paper:not(.show-logos) .responsibilities li:has(img):before,
.cv-paper:not(.show-logos) .responsibilities li:has(iconify-icon):before {
/* Restore bullet points for responsibilities without icons */
.cv-paper:not(.show-icons) .responsibilities li:has(img):before,
.cv-paper:not(.show-icons) .responsibilities li:has(iconify-icon):before {
display: block !important;
}
/* Hide all section icons */
.cv-paper:not(.show-logos) .section-icon {
.cv-paper:not(.show-icons) .section-icon {
display: none !important;
}
/* Hide all badges (Current, Expired, Maintained By) */
.cv-paper:not(.show-logos) .current-badge,
.cv-paper:not(.show-logos) .expired-badge,
.cv-paper:not(.show-logos) .maintained-badge {
.cv-paper:not(.show-icons) .current-badge,
.cv-paper:not(.show-icons) .expired-badge,
.cv-paper:not(.show-icons) .maintained-badge {
display: none !important;
}
/* Adjust experience items layout when logos are hidden */
.cv-paper:not(.show-logos) .experience-item {
/* Adjust experience items layout when icons are hidden */
.cv-paper:not(.show-icons) .experience-item {
display: block !important;
}
/* Adjust project and course items layout when icons are hidden */
.cv-paper:not(.show-logos) .project-item,
.cv-paper:not(.show-logos) .course-item,
.cv-paper:not(.show-logos) .award-item {
.cv-paper:not(.show-icons) .project-item,
.cv-paper:not(.show-icons) .course-item,
.cv-paper:not(.show-icons) .award-item {
display: block !important;
gap: 0 !important;
}
@@ -3856,7 +3856,7 @@ html {
#shortcuts-modal .info-modal-body {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns - less tall! */
grid-template-columns: 1fr 1fr; /* 2 columns for 5 sections (3+2) */
gap: 1.2rem 1.5rem; /* row gap, column gap */
margin-top: 1.5rem; /* Increased spacing since no description */
}
static/css/print.css
+4 -4
View File
@@ -45,7 +45,7 @@
}
/* ===================================
SHOW ALL ICONS, LOGOS, AND BADGES - Print Default
SHOW ALL ICONS, ICONS, AND BADGES - Print Default
=================================== */
/* Section title icons - smaller for print */
@@ -56,7 +56,7 @@
margin-right: 4px !important;
}
/* Company/Project/Course logos - compact for print */
/* Company/Project/Course icons - compact for print */
.company-logo,
.project-icon,
.course-icon,
@@ -304,7 +304,7 @@
EXPERIENCE - REDUCED SPACING (60px → 26px)
=================================== */
.experience-item {
display: flex !important; /* Show logos side-by-side with content */
display: flex !important; /* Show icons side-by-side with content */
gap: 12px !important;
margin-bottom: 4mm !important; /* ~15px, down from 40px */
padding-bottom: 3mm !important; /* ~11px, down from 32px */
@@ -365,7 +365,7 @@
.project-item,
.course-item,
.award-item {
display: flex !important; /* Show logos side-by-side with content */
display: flex !important; /* Show icons side-by-side with content */
gap: 12px !important;
margin-bottom: 4mm !important;
padding-bottom: 3mm !important;
static/js/main.js
+19 -19
View File
@@ -84,7 +84,7 @@
/**
* Initialize user preferences from localStorage
* Handles language, theme, length, and logos persistence across sessions
* Handles language, theme, length, and icons persistence across sessions
*/
function initPreferences() {
// Language preference
@@ -105,7 +105,7 @@
// This ensures client-side preferences override server defaults
const savedTheme = localStorage.getItem('cv-theme');
const savedLength = localStorage.getItem('cv-length');
const savedLogos = localStorage.getItem('cv-logos');
const savedIcons = localStorage.getItem('cv-icons');
// Apply theme preference
if (savedTheme === 'clean') {
@@ -134,16 +134,16 @@
}
}
// Apply logos preference
if (cvPaper && savedLogos !== null) {
if (savedLogos === 'true') {
cvPaper.classList.add('show-logos');
const logoToggles = document.querySelectorAll('#logoToggle, #logoToggleMenu');
logoToggles.forEach(toggle => toggle.checked = true);
// Apply icons preference
if (cvPaper && savedIcons !== null) {
if (savedIcons === 'true') {
cvPaper.classList.add('show-icons');
const iconToggles = document.querySelectorAll('#iconToggle, #iconToggleMenu');
iconToggles.forEach(toggle => toggle.checked = true);
} else {
cvPaper.classList.remove('show-logos');
const logoToggles = document.querySelectorAll('#logoToggle, #logoToggleMenu');
logoToggles.forEach(toggle => toggle.checked = false);
cvPaper.classList.remove('show-icons');
const iconToggles = document.querySelectorAll('#iconToggle, #iconToggleMenu');
iconToggles.forEach(toggle => toggle.checked = false);
}
}
}
@@ -271,14 +271,14 @@
console.log(`Toggle sync - Length: desktop=${isLong}, mobile=${isLong}`);
}
// Sync logo toggles
const desktopLogoToggle = document.getElementById('logoToggle');
const mobileLogoToggle = document.getElementById('logoToggleMenu');
if (desktopLogoToggle && mobileLogoToggle) {
const showLogos = target.classList.contains('show-logos');
desktopLogoToggle.checked = showLogos;
mobileLogoToggle.checked = showLogos;
console.log(`Toggle sync - Logos: desktop=${showLogos}, mobile=${showLogos}`);
// Sync icon toggles
const desktopIconToggle = document.getElementById('iconToggle');
const mobileIconToggle = document.getElementById('iconToggleMenu');
if (desktopIconToggle && mobileIconToggle) {
const showIcons = target.classList.contains('show-icons');
desktopIconToggle.checked = showIcons;
mobileIconToggle.checked = showIcons;
console.log(`Toggle sync - Icons: desktop=${showIcons}, mobile=${showIcons}`);
}
}
} catch (e) {
templates/cv-content.html
+1 -1
View File
@@ -1,5 +1,5 @@
<main id="cv-content"
class="cv-paper {{.CVLengthClass}} {{if .ShowLogos}}show-logos{{end}}"
class="cv-paper {{.CVLengthClass}} {{if .ShowIcons}}show-icons{{end}}"
role="main"
aria-live="polite">
<!-- PAGE 1 -->
templates/partials/modals/shortcuts-modal.html
+2 -2
View File
@@ -65,9 +65,9 @@
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Logos
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Icons
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLogos.Description}}</span>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleIcons.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
templates/partials/navigation/hamburger-menu.html
+12 -12
View File
@@ -122,27 +122,27 @@
</label>
</div>
<!-- Logo toggle -->
<div class="menu-control-item" id="mobile-logo-toggle">
<!-- Icon toggle -->
<div class="menu-control-item" id="mobile-icon-toggle">
<label class="menu-control-label">
<iconify-icon icon="mdi:image-multiple-outline" width="20" height="20"></iconify-icon>
<span>{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}</span>
<span>{{if eq .Lang "es"}}Iconos{{else}}Icons{{end}}</span>
</label>
<label class="icon-toggle">
<input type="checkbox"
id="logoToggleMenu"
{{if .ShowLogos}}checked{{end}}
hx-post="/toggle/logos?lang={{.Lang}}"
id="iconToggleMenu"
{{if .ShowIcons}}checked{{end}}
hx-post="/toggle/icons?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
add .show-logos to .cv-paper
set localStorage['cv-logos'] to 'true'
set #logoToggle's checked to true
add .show-icons to .cv-paper
set localStorage['cv-icons'] to 'true'
set #iconToggle's checked to true
else
remove .show-logos from .cv-paper
set localStorage['cv-logos'] to 'false'
set #logoToggle's checked to false
remove .show-icons from .cv-paper
set localStorage['cv-icons'] to 'false'
set #iconToggle's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
templates/partials/navigation/view-controls.html
+12 -12
View File
@@ -29,24 +29,24 @@
</label>
</div>
<!-- Logo toggle -->
<div class="selector-group" id="desktop-logo-toggle">
<label class="selector-label">{{if eq .Lang "es"}}Logos{{else}}Logos{{end}}:</label>
<!-- Icon toggle -->
<div class="selector-group" id="desktop-icon-toggle">
<label class="selector-label">{{if eq .Lang "es"}}Iconos{{else}}Icons{{end}}:</label>
<label class="icon-toggle">
<input type="checkbox"
id="logoToggle"
{{if .ShowLogos}}checked{{end}}
hx-post="/toggle/logos?lang={{.Lang}}"
id="iconToggle"
{{if .ShowIcons}}checked{{end}}
hx-post="/toggle/icons?lang={{.Lang}}"
hx-swap="none"
_="on change
if my.checked
add .show-logos to .cv-paper
set localStorage['cv-logos'] to 'true'
set #logoToggleMenu's checked to true
add .show-icons to .cv-paper
set localStorage['cv-icons'] to 'true'
set #iconToggleMenu's checked to true
else
remove .show-logos from .cv-paper
set localStorage['cv-logos'] to 'false'
set #logoToggleMenu's checked to false
remove .show-icons from .cv-paper
set localStorage['cv-icons'] to 'false'
set #iconToggleMenu's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>