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
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) {