Optimise browser layout
This commit is contained in:
parent
82234f9706
commit
8b8eb09372
3 changed files with 22 additions and 10 deletions
|
@ -10,6 +10,7 @@ function movePlayer() {
|
||||||
movePlayer()
|
movePlayer()
|
||||||
document.body.addEventListener("htmx:load", movePlayer)
|
document.body.addEventListener("htmx:load", movePlayer)
|
||||||
|
|
||||||
|
function addPopoverStyle() {
|
||||||
document.querySelectorAll("[popovertarget]").forEach(e => {
|
document.querySelectorAll("[popovertarget]").forEach(e => {
|
||||||
e.addEventListener("click", () => {
|
e.addEventListener("click", () => {
|
||||||
const rect = e.getBoundingClientRect()
|
const rect = e.getBoundingClientRect()
|
||||||
|
@ -17,3 +18,14 @@ document.querySelectorAll("[popovertarget]").forEach(e => {
|
||||||
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()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
|
@ -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;")
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue