Simple mobile support

This commit is contained in:
Cadence Ember 2025-04-09 17:42:51 +12:00
parent 924c7395cf
commit 852a053e2b
17 changed files with 207 additions and 93 deletions

View file

@ -1,5 +1,5 @@
mixin navi(key, value, icon, text)
a.s-navigation--item(href=and({[key]: value}) class={"is-selected": query[key] === value})&attributes(attributes)
a.s-navigation--item(href="./" + and({shape: query && query.shape || "grid", [key]: value}) class={"is-selected": query && query[key] === value})&attributes(attributes)
if icon
!= icons.get(icon)
if text
@ -19,7 +19,7 @@ html
- title = `${searchText} | ${title}`
title#title= title
link(rel="icon" href="/favicon.png")
link(rel="stylesheet" type="text/css" href="/static/stacks.min.css")
link(rel="stylesheet" type="text/css" href="/static/stacks.css")
link(rel="stylesheet" type="text/css" href="/static/style.css")
script(src="/static/htmx.js")
script(src="/static/wordcloud.js")
@ -60,7 +60,7 @@ html
each currency in currencies
option(selected=(currency === count.displayCurrency))= currency
.fl-grow1
nav
nav.d-block(class="md:d-none")
ul.s-navigation
li: +navi("arrange", "album", "album", "Album")
li: +navi("arrange", "artist", "people-tag", "Artist")
@ -68,16 +68,38 @@ html
//- asana, flower, component, circle-spark, rhombus, sphere, union-alt, color-wheel, community, combine
li: +navi("arrange", "tag", "label", "Tag")
li: +navi("arrange", "track", "music-note", "Track")
.px16
nav
ul.s-navigation.s-navigation__toggle.g0
li: +navi("shape", "grid").brr0!= icons.get("view-grid")
li: +navi("shape", "list").blr0!= icons.get("align-justify")
li.d-none(class="md:d-block")
a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage})
!= icons.get("graph-up")
span.ml4 Stats
ul.s-navigation.s-navigation__toggle.d-none(class="md:d-block")
button.s-navigation--item.s-navigation--item__dropdown(popovertarget="arranges")
!= icons.get("lens")
span.ml4 Arrange
#arranges(popover data-popper-placement="bottom" style="display: revert;").s-popover.overflow-visible
.s-popover--arrow.s-popover--arrow__tc
ul.s-navigation.s-navigation__vertical
li: +navi("arrange", "album", "album", "Album")
li: +navi("arrange", "artist", "people-tag", "Artist")
li: +navi("arrange", "label", "flower", "Label")
li: +navi("arrange", "tag", "label", "Tag")
li: +navi("arrange", "track", "music-note", "Track")
li
a.s-navigation--item(href="collection-stats" class={"is-selected": isStatsPage})
!= icons.get("graph-up")
span.ml4 Stats
if !isStatsPage
.px16(class="md:px4")
nav
ul.s-navigation.s-navigation__toggle.g0
li: +navi("shape", "grid").brr0!= icons.get("view-grid")
li: +navi("shape", "list").blr0!= icons.get("align-justify")
.fl-grow1
button#toggle-player.s-btn.s-btn__xs.d-none.mr4(class="md:d-block")!= icons.get("playlist")
.d-flex.py24.px16.g24.fs-body1.fd-row-reverse
.d-flex.py24.px16.g24.fs-body1.fd-row-reverse(class="md:fd-column")
aside.ws340.fl-shrink0
.ps-fixed.ws340.d-flex.fd-column.g12(style="top: 80px")
.ps-fixed.ws340.d-flex.fd-column.g12(class="md:ps-static md:jc-center" style="top: 80px")
if arrange === "tag"
include tag-status.pug
@ -99,14 +121,15 @@ html
input(type="hidden" name="shape" value=shape)
button.s-btn.s-btn__xs.s-btn__icon.s-btn__outlined.s-btn__muted#search-submit(style="height: 38px")!= icons.get("search")
#player-marker.pe-none(style="display: none")
#player-marker.pe-none(class="md:d-none" style="display: none")
#collection-sync.d-none
include collection-stats.pug
div(class="md:d-none")
include collection-stats.pug
main.fl-grow1
block view
#player-container.ps-fixed.r16.ws340(hx-preserve="true")
#player-container.ps-fixed.r16.ws340.z-modal(class="md:t64 md:l16 md:r16 md:b16" hx-preserve="true")
#player

View file

@ -28,7 +28,7 @@ if downloader.total > 0 || downloader.outcome
!= icons.get("cloud-check")
.fl-grow1 Tags downloaded.
- downloader.resolve()
a.s-btn.s-btn__outlined(href="") Refresh
a.s-btn.s-btn__outlined(href=and({arrange: "tag"}) hx-boost="true") Refresh
else
.s-notice.s-notice__danger.p8.gx16.pl16.d-flex.ai-center