diff --git a/public/player-marker.js b/public/player-marker.js index bd4b30b..5b3ab87 100644 --- a/public/player-marker.js +++ b/public/player-marker.js @@ -10,10 +10,22 @@ function movePlayer() { movePlayer() document.body.addEventListener("htmx:load", movePlayer) -document.querySelectorAll("[popovertarget]").forEach(e => { - e.addEventListener("click", () => { - 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 }` - document.styleSheets[0].insertRule(t, document.styleSheets[0].cssRules.length) +function addPopoverStyle() { + document.querySelectorAll("[popovertarget]").forEach(e => { + e.addEventListener("click", () => { + 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 }` + 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() + } }) diff --git a/pug/artist_grid.pug b/pug/artist_grid.pug index 1461da3..a4d35e4 100644 --- a/pug/artist_grid.pug +++ b/pug/artist_grid.pug @@ -29,4 +29,4 @@ block view = label 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") + img(loading="lazy" src=preview.item_art_url width=210 height=210 style="height: 70px; width: 70px;") diff --git a/pug/includes/layout.pug b/pug/includes/layout.pug index 032479e..507b378 100644 --- a/pug/includes/layout.pug +++ b/pug/includes/layout.pug @@ -75,10 +75,7 @@ html li: +navi("shape", "list").blr0!= icons.get("align-justify") .fl-grow1 - .d-flex.py24.px16.g24.fs-body1 - main.fl-grow1 - block view - + .d-flex.py24.px16.g24.fs-body1.fd-row-reverse aside.ws340.fl-shrink0 .ps-fixed.ws340.d-flex.fd-column.g12(style="top: 80px") 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-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