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/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 */
}