fix context menu alignements in controls

This commit is contained in:
Tixie 2020-02-22 20:45:49 +01:00
parent 28d4765a6d
commit 9f1c03e0ac
3 changed files with 9 additions and 4 deletions

View File

@ -24,7 +24,7 @@
</div> </div>
<div class="controls__menu"> <div class="controls__menu">
<Popper> <Popper needOffset={false}>
<button <button
slot="btn" slot="btn"
class="controls__menuBtn" class="controls__menuBtn"

View File

@ -19,6 +19,7 @@ import detectOverflow from '@popperjs/core/lib/utils/detectOverflow.js';
let btn let btn
let content let content
let isActive = false let isActive = false
export let needOffset
export function open () { export function open () {
isActive = true isActive = true
@ -39,7 +40,11 @@ onMount(() => {
name: 'offset', name: 'offset',
options: { options: {
offset: ({ reference, popper }) => { offset: ({ reference, popper }) => {
return [-10, -reference.width - 5]; if (needOffset) {
return [-10, -reference.width - 5];
} else {
return [5, -reference.width - 5];
}
} }
} }
}, },

View File

@ -14,7 +14,7 @@
</div> </div>
</div> </div>
{#if $next} {#if $next}
<Popper> <Popper needOffset={true}>
<button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button> <button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
<div slot="content" class="contextMenu__list"> <div slot="content" class="contextMenu__list">
<ContextMenu track={$next}></ContextMenu> <ContextMenu track={$next}></ContextMenu>
@ -36,7 +36,7 @@
<DistanceDate date={track.referer.date} /> <DistanceDate date={track.referer.date} />
</div> </div>
</div> </div>
<Popper> <Popper needOffset={true}>
<button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button> <button slot="btn" class="track__menu" aria-label="track menu"><IconMenu></IconMenu></button>
<div slot="content" class="contextMenu__list"> <div slot="content" class="contextMenu__list">
<ContextMenu track={track}></ContextMenu> <ContextMenu track={track}></ContextMenu>