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

Optimise browser layout

Browse source
This commit is contained in:
Cadence Ember 2025-04-09 11:58:10 +12:00
parent 82234f9706
commit 8b8eb09372
3 changed files with 22 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

14
public/player-marker.js
View file

@ -10,10 +10,22 @@ function movePlayer() {
movePlayer() movePlayer()
document.body.addEventListener("htmx:load", movePlayer) document.body.addEventListener("htmx:load", movePlayer)
document.querySelectorAll("[popovertarget]").forEach(e => { function addPopoverStyle() {
document.querySelectorAll("[popovertarget]").forEach(e => {
e.addEventListener("click", () => { e.addEventListener("click", () => {
const rect = e.getBoundingClientRect() const rect = e.getBoundingClientRect()
const t = `:popover-open { position: fixed; top: ${Math.floor(rect.bottom)}px; left: ${Math.floor(rect.left + rect.width / 2)}px; width: ${Math.floor(rect.width + 85)}px; transform: translateX(-50%); margin: 0 }` const t = `:popover-open { position: fixed; top: ${Math.floor(rect.bottom)}px; left: ${Math.floor(rect.left + rect.width / 2)}px; width: ${Math.floor(rect.width + 85)}px; transform: translateX(-50%); margin: 0 }`
document.styleSheets[0].insertRule(t, document.styleSheets[0].cssRules.length) document.styleSheets[0].insertRule(t, document.styleSheets[0].cssRules.length)
}) })
})
}
addPopoverStyle()
document.body.addEventListener("htmx:load", addPopoverStyle)
document.body.addEventListener("htmx:beforeHistoryUpdate", o => {
console.log("beforeHistoryUpdate:", o)
const page = document.getElementById("page")
if (o?.detail?.requestConfig?.target === page) {
while (page.firstChild) page.firstChild.remove()
}
}) })

2
pug/artist_grid.pug
View file

@ -29,4 +29,4 @@ block view
= label = label
each preview in item.previews each preview in item.previews
a.d-flex&attributes(getAlbumCoverAttributes(event, preview)) 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") img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: 70px; width: 70px;")

8
pug/includes/layout.pug
View file

@ -75,10 +75,7 @@ html
li: +navi("shape", "list").blr0!= icons.get("align-justify") li: +navi("shape", "list").blr0!= icons.get("align-justify")
.fl-grow1 .fl-grow1
.d-flex.py24.px16.g24.fs-body1 .d-flex.py24.px16.g24.fs-body1.fd-row-reverse
main.fl-grow1
block view
aside.ws340.fl-shrink0 aside.ws340.fl-shrink0
.ps-fixed.ws340.d-flex.fd-column.g12(style="top: 80px") .ps-fixed.ws340.d-flex.fd-column.g12(style="top: 80px")
if arrange === "tag" if arrange === "tag"
@ -165,5 +162,8 @@ html
.s-progress--bar.bg-orange-400(title=`${count.taste[2]} labels with 200-1999 fans`)= count.taste[2] .s-progress--bar.bg-orange-400(title=`${count.taste[2]} labels with 200-1999 fans`)= count.taste[2]
.s-progress--bar.bg-red-400(title=`${count.taste[3]} labels with >2000 fans`)= count.taste[3] .s-progress--bar.bg-red-400(title=`${count.taste[3]} labels with >2000 fans`)= count.taste[3]
main.fl-grow1
block view
#player-container.ps-fixed.r16.ws340(hx-preserve="true") #player-container.ps-fixed.r16.ws340(hx-preserve="true")
#player #player