cadence/bc-explorer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simple mobile support

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
pug/album_grid.pug
View file

@ -6,7 +6,7 @@ block title
block view
.mx-auto.w100.wmx11.fs-body1#content
!= icons.useTemplate(["star-solid", "play-solid", "music-note", "compact-disc", "people-tag", "flower"])
.d-grid.gx8.gy12.jc-center.break-word(style="grid-template-columns: repeat(auto-fit, 210px)")
.d-grid.gx8.gy12.jc-center.break-word.album-grid
each item in items
div
a.cover&attributes(getAlbumCoverAttributes(event, item))
@ -16,7 +16,7 @@ block view
p= item.item_title
.d-flex.fw-wrap.g4
if item.why
a.s-tag.s-tag__xs.fc-orange-400(title=item.why href=and({filter_field: "why", filter: "reviewed"}))
a.s-tag.s-tag__xs.fc-orange-400(title=(item.why + (item.featured_track_title ? ` -- favourite track: ${item.featured_track_title}` : "")) href=and({filter_field: "why", filter: "reviewed"}))
!= icons.use("star-solid", 16)
if hasFullTrackData
a.s-tag.s-tag__xs(href=and({arrange: "track", filter_field: "item_id", filter: item.item_id, filter_fuzzy: null}))

4
pug/artist_grid.pug
View file

@ -10,7 +10,7 @@ block view
each item in items
.d-flex.g4
.fl-grow1.pb12
.fs-headline1= item.band_name
.fs-headline1.break-word= item.band_name
.d-flex.fw-wrap.g4
a.s-tag.s-tag__xs(href=and({arrange: "album", filter_field: "band_name", filter: item.band_name, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.use("album", 16)
@ -28,5 +28,5 @@ block view
span.s-tag--sponsor!= icons.use("flower", 16)
= label
each preview in item.previews
a.d-flex&attributes(getAlbumCoverAttributes(event, preview))
a.d-flex.preview-cover(title=preview.item_title)&attributes(getAlbumCoverAttributes(event, preview))
img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: 70px; width: 70px;")

5
pug/collection-stats.pug Normal file
View file

@ -0,0 +1,5 @@
extends includes/layout.pug
block view
.mx-auto.w100.wmx11.fs-body1#content
include includes/collection-stats.pug

2
pug/home.pug
View file

@ -5,7 +5,7 @@ html
<meta name="viewport" content="width=device-width, initial-scale=1" />
title BC Explorer
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")
script(src="/static/htmx.js")
meta(name="htmx-config" content='{"requestClass":"is-loading"}')
body.themed.theme-system.overflow-y-scroll

49
pug/includes/layout.pug
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

2
pug/includes/tag-status.pug
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

6
pug/label_grid.pug
View file

@ -12,7 +12,7 @@ block view
.fl-grow1.pb12
- let minBandURL = item.band_url.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1")
- let label = item.display_name.replace(/https?:\/\/(.*?)\.bandcamp\.com.*/, "$1")
.fs-headline1= label
.fs-headline1.break-word= label
.d-flex.fw-wrap.g4
a.s-tag.s-tag__xs(href=and({arrange: "album", filter_field: "band_url", filter: minBandURL, filter_fuzzy: null}))
span.s-tag--sponsor!= icons.use("album", 16)
@ -28,5 +28,5 @@ block view
span.s-tag--sponsor!= icons.use("compact-disc", 16)
= item.total_duration
each preview in item.previews
a.d-flex&attributes(getAlbumCoverAttributes(event, preview))
img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: auto; width: auto; max-height: 70px")
a.d-flex.preview-cover(title=preview.item_title)&attributes(getAlbumCoverAttributes(event, preview))
img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: 70px; width: 70px;")