juanatsap
fd734635d9
- Add closeOnBackdrop(modal, evt) to utils._hs for modal backdrop clicks - Add scrollToTop(evt) to utils._hs for smooth scroll to top - Simplify 3 modal templates (shortcuts, info, pdf) from 4 lines to 1 - Simplify back-to-top button from 3 lines to 1
159 lines
8.7 KiB
HTML
159 lines
8.7 KiB
HTML
{{define "shortcuts-modal"}}
|
||
<!-- Keyboard Shortcuts Modal - Native Dialog -->
|
||
<dialog id="shortcuts-modal" class="info-modal no-print"
|
||
_="on click call closeOnBackdrop(me, event)">
|
||
<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}}
|