juanatsap
57 lines
2.6 KiB
HTML
57 lines
2.6 KiB
HTML
<!-- Primary response: Desktop length toggle -->
|
|
<div class="selector-group" id="desktop-length-toggle">
|
|
<label class="selector-label">{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}:</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
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
|
|
if my.checked
|
|
remove .cv-short from .cv-paper
|
|
add .cv-long to .cv-paper
|
|
set localStorage['cv-length'] to 'long'
|
|
else
|
|
remove .cv-long from .cv-paper
|
|
add .cv-short to .cv-paper
|
|
set localStorage['cv-length'] to 'short'
|
|
end">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Out-of-band swap: Mobile length toggle -->
|
|
<div class="menu-control-item" id="mobile-length-toggle" hx-swap-oob="true">
|
|
<label class="menu-control-label">
|
|
<iconify-icon icon="mdi:file-document-outline" width="20" height="20"></iconify-icon>
|
|
<span>{{if eq .Lang "es"}}Longitud{{else}}Length{{end}}</span>
|
|
</label>
|
|
<label class="icon-toggle">
|
|
<input type="checkbox"
|
|
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
|
|
if my.checked
|
|
remove .cv-short from .cv-paper
|
|
add .cv-long to .cv-paper
|
|
set localStorage['cv-length'] to 'long'
|
|
else
|
|
remove .cv-long from .cv-paper
|
|
add .cv-short to .cv-paper
|
|
set localStorage['cv-length'] to 'short'
|
|
end">
|
|
<span class="icon-toggle-slider">
|
|
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
|
|
<iconify-icon icon="mdi:file-document-multiple-outline" width="16" height="16" class="icon-right"></iconify-icon>
|
|
</span>
|
|
</label>
|
|
</div>
|