Optimise browser layout

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

View file

@ -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()
}
})