good
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
{{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 Logos
|
||||
</div>
|
||||
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLogos.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}}
|
||||
@@ -102,17 +102,18 @@
|
||||
id="lengthToggleMenu"
|
||||
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
|
||||
hx-post="/toggle/length?lang={{.Lang}}"
|
||||
hx-target="#mobile-length-toggle"
|
||||
hx-swap="outerHTML"
|
||||
_="on htmx:afterRequest
|
||||
hx-swap="none"
|
||||
_="on change
|
||||
if my.checked
|
||||
remove .cv-short from .cv-paper
|
||||
add .cv-long to .cv-paper
|
||||
set localStorage['cv-length'] to 'long'
|
||||
set #lengthToggle's checked to true
|
||||
else
|
||||
remove .cv-long from .cv-paper
|
||||
add .cv-short to .cv-paper
|
||||
set localStorage['cv-length'] to 'short'
|
||||
set #lengthToggle's checked to false
|
||||
end">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
@@ -132,15 +133,16 @@
|
||||
id="logoToggleMenu"
|
||||
{{if .ShowLogos}}checked{{end}}
|
||||
hx-post="/toggle/logos?lang={{.Lang}}"
|
||||
hx-target="#mobile-logo-toggle"
|
||||
hx-swap="outerHTML"
|
||||
_="on htmx:afterRequest
|
||||
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
|
||||
else
|
||||
remove .show-logos from .cv-paper
|
||||
set localStorage['cv-logos'] to 'false'
|
||||
set #logoToggle'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>
|
||||
@@ -160,15 +162,16 @@
|
||||
id="themeToggleMenu"
|
||||
{{if .ThemeClean}}checked{{end}}
|
||||
hx-post="/toggle/theme?lang={{.Lang}}"
|
||||
hx-target="#mobile-theme-toggle"
|
||||
hx-swap="outerHTML"
|
||||
_="on htmx:afterRequest
|
||||
hx-swap="none"
|
||||
_="on change
|
||||
if my.checked
|
||||
add .theme-clean to the body
|
||||
set localStorage['cv-theme'] to 'clean'
|
||||
set #themeToggle's checked to true
|
||||
else
|
||||
remove .theme-clean from the body
|
||||
set localStorage['cv-theme'] to 'default'
|
||||
set #themeToggle's checked to false
|
||||
end">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
|
||||
@@ -9,17 +9,18 @@
|
||||
id="lengthToggle"
|
||||
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
|
||||
hx-post="/toggle/length?lang={{.Lang}}"
|
||||
hx-target="#desktop-length-toggle"
|
||||
hx-swap="outerHTML"
|
||||
_="on htmx:afterRequest
|
||||
hx-swap="none"
|
||||
_="on change
|
||||
if my.checked
|
||||
remove .cv-short from .cv-paper
|
||||
add .cv-long to .cv-paper
|
||||
set localStorage['cv-length'] to 'long'
|
||||
set #lengthToggleMenu's checked to true
|
||||
else
|
||||
remove .cv-long from .cv-paper
|
||||
add .cv-short to .cv-paper
|
||||
set localStorage['cv-length'] to 'short'
|
||||
set #lengthToggleMenu's checked to false
|
||||
end">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
@@ -36,15 +37,16 @@
|
||||
id="logoToggle"
|
||||
{{if .ShowLogos}}checked{{end}}
|
||||
hx-post="/toggle/logos?lang={{.Lang}}"
|
||||
hx-target="#desktop-logo-toggle"
|
||||
hx-swap="outerHTML"
|
||||
_="on htmx:afterRequest
|
||||
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
|
||||
else
|
||||
remove .show-logos from .cv-paper
|
||||
set localStorage['cv-logos'] to 'false'
|
||||
set #logoToggleMenu'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>
|
||||
@@ -61,15 +63,16 @@
|
||||
id="themeToggle"
|
||||
{{if .ThemeClean}}checked{{end}}
|
||||
hx-post="/toggle/theme?lang={{.Lang}}"
|
||||
hx-target="#desktop-theme-toggle"
|
||||
hx-swap="outerHTML"
|
||||
_="on htmx:afterRequest
|
||||
hx-swap="none"
|
||||
_="on change
|
||||
if my.checked
|
||||
add .theme-clean to the body
|
||||
set localStorage['cv-theme'] to 'clean'
|
||||
set #themeToggleMenu's checked to true
|
||||
else
|
||||
remove .theme-clean from the body
|
||||
set localStorage['cv-theme'] to 'default'
|
||||
set #themeToggleMenu's checked to false
|
||||
end">
|
||||
<span class="icon-toggle-slider">
|
||||
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
style="display: none;"
|
||||
_="on click
|
||||
call event.preventDefault()
|
||||
set window.scrollTo({top: 0, behavior: 'smooth'})">
|
||||
call window.scrollTo({top: 0, behavior: 'smooth'})">
|
||||
<iconify-icon icon="mdi:arrow-up" width="24" height="24"></iconify-icon>
|
||||
</button>
|
||||
{{end}}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
{{define "shortcuts-button"}}
|
||||
<!-- Keyboard Shortcuts Button (Fixed Right) -->
|
||||
<button
|
||||
id="shortcuts-button"
|
||||
class="fixed-btn shortcuts-btn no-print"
|
||||
onclick="document.getElementById('shortcuts-modal').showModal()"
|
||||
aria-label="{{if eq .Lang "es"}}Atajos de teclado{{else}}Keyboard shortcuts{{end}}"
|
||||
title="{{if eq .Lang "es"}}Atajos de teclado (?){{else}}Keyboard shortcuts (?){{end}}">
|
||||
<iconify-icon icon="mdi:keyboard-outline" width="28" height="28"></iconify-icon>
|
||||
</button>
|
||||
{{end}}
|
||||
@@ -123,29 +123,10 @@
|
||||
set inverseZoom to 1 / zoomLevel
|
||||
set #back-to-top's *zoom to inverseZoom
|
||||
set #info-button's *zoom to inverseZoom
|
||||
set #shortcuts-button's *zoom to inverseZoom
|
||||
|
||||
-- Save to localStorage
|
||||
set localStorage['cv-zoom'] to zoomValue
|
||||
|
||||
on keydown[ctrlKey or metaKey] from document
|
||||
if event.shiftKey exit end
|
||||
if event.key is '+' or event.key is '='
|
||||
halt the event
|
||||
set currentZoom to my value as a Number
|
||||
set newZoom to Math.min(175, currentZoom + 10)
|
||||
set my value to newZoom
|
||||
send input to me
|
||||
else if event.key is '-'
|
||||
halt the event
|
||||
set currentZoom to my value as a Number
|
||||
set newZoom to Math.max(25, currentZoom - 10)
|
||||
set my value to newZoom
|
||||
send input to me
|
||||
else if event.key is '0'
|
||||
halt the event
|
||||
set my value to 100
|
||||
send input to me
|
||||
end">
|
||||
set localStorage['cv-zoom'] to zoomValue">
|
||||
|
||||
<span class="zoom-value zoom-value-max" aria-hidden="true">175</span>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user