MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(2054): only calculate dropdown position when opening 

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2372>
This commit is contained in:
tobifroe 2023-03-20 22:07:56 +01:00 committed by Kasper Seweryn
parent fe01521c72
commit e258e6f12b
1 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
front/src/components/audio/PlayButton.vue
View File

@ -105,15 +105,17 @@ const openMenu = () => {
// little magic to ensure the menu is always visible in the viewport // little magic to ensure the menu is always visible in the viewport
// By default, try to display it on the right if there is enough room // By default, try to display it on the right if there is enough room
const menu = dropdown.value.find('.menu') const menu = dropdown.value.find('.menu')
const viewportOffset = menu.get(0)?.getBoundingClientRect() ?? { right: 0, left: 0 } if (!menu.classList.includes('visible')) {
const viewportWidth = document.documentElement.clientWidth const viewportOffset = menu.get(0)?.getBoundingClientRect() ?? { right: 0, left: 0 }
const rightOverflow = viewportOffset.right - viewportWidth const viewportWidth = document.documentElement.clientWidth
const leftOverflow = -viewportOffset.left const rightOverflow = viewportOffset.right - viewportWidth
const leftOverflow = -viewportOffset.left
if (rightOverflow > 0) { if (rightOverflow > 0) {
menu.css({ cssText: `left: ${-rightOverflow - 5}px !important;` }) menu.css({ cssText: `left: ${-rightOverflow - 5}px !important;` })
} else if (leftOverflow > 0) { } else if (leftOverflow > 0) {
menu.css({ cssText: `right: -${leftOverflow + 5}px !important;` }) menu.css({ cssText: `right: -${leftOverflow + 5}px !important;` })
}
} }
} }
</script> </script>