txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2c7a467149385427237afd7d8a9a45153db4dca0
cv-site/templates/partials/modals/shortcuts-modal.html
T
juanatsap a8d6805e27 feat: enhance shortcuts modal and complete logos-to-icons rename 
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
2025-11-15 18:42:35 +00:00

162 lines
8.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{define "shortcuts-modal"}}
<!-- Keyboard Shortcuts Modal - Native Dialog -->
<dialog id="shortcuts-modal" class="info-modal no-print"
_="on click
if event.target is me
call me.close()
end">
<div class="info-modal-content">
<button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
</button>
<div class="info-modal-header">
<h2>{{.UI.ShortcutsModal.Title}}</h2>
<div class="info-modal-cv-title">
<span class="keyboard-icon-wrapper">
<iconify-icon icon="mdi:keyboard-outline" width="32" height="32"></iconify-icon>
</span>
{{if eq .Lang "es"}}Aprende los Atajos{{else}}Learn the Shortcuts{{end}}
</div>
</div>
<div class="info-modal-body">
<!-- Zoom Shortcuts -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Zoom.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>+</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomIn.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>−</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomOut.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>0</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomReset.Description}}</span>
</div>
</div>
</div>
<!-- View Controls -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:tune-variant" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.ViewControls.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Length
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLength.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<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.ToggleIcons.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to View
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleTheme.Description}}</span>
</div>
</div>
</div>
<!-- Navigation -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:compass-outline" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Navigation.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
Menu → Expand All
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ExpandAll.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
Menu → Collapse All
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.CollapseAll.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
Click <kbd>↑</kbd> Button
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ScrollToTop.Description}}</span>
</div>
</div>
</div>
<!-- Actions -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:lightning-bolt" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Actions.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>P</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.Print.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-esc" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CloseModal.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd>?</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.ShowHelp.Description}}</span>
</div>
</div>
</div>
<!-- Browser Defaults -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Browser.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Tab.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-return" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:keyboard-space" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Enter.Description}}</span>
</div>
</div>
</div>
</div>
</div>
</dialog>
{{end}}
Reference in New Issue View Git Blame Copy Permalink