diff --git a/src/hooks/useNoteOverlay.hook.ts b/src/hooks/useNoteOverlay.hook.ts index 1425b17..2be7a78 100644 --- a/src/hooks/useNoteOverlay.hook.ts +++ b/src/hooks/useNoteOverlay.hook.ts @@ -1,4 +1,4 @@ -import { computed, onMounted, ref } from '@vue/runtime-core' +import { computed, onMounted, ref, watch } from '@vue/runtime-core' import { NOTE_WIDTH } from '@/constants/note-width' import { useOverlay } from '@/hooks/useOverlay.hook' @@ -33,10 +33,17 @@ export const useNoteOverlay = (className: string, index: number) => { noteElement.style.top = `0` } else { noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem` - noteElement.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value - .length - - index) * - BOOKMARK_WIDTH}rem)` + + const stackedNoteContainers = document.querySelectorAll( + '.stacked-note' + ) as NodeListOf + + stackedNoteContainers.forEach((stackedNote, ind) => { + stackedNote.style.right = `calc(-${NOTE_WIDTH}px + ${(stackedNotes.value + .length - + ind) * + BOOKMARK_WIDTH}rem)` + }) } }) diff --git a/src/hooks/useOverlay.hook.ts b/src/hooks/useOverlay.hook.ts index f916258..520f3a6 100644 --- a/src/hooks/useOverlay.hook.ts +++ b/src/hooks/useOverlay.hook.ts @@ -1,10 +1,9 @@ import { computed, ref } from 'vue' import { useEventListener, useWindowSize } from '@vueuse/core' - import { MOBILE_BREAKPOINT } from '@/constants/mobile' export const useOverlay = (listen = true) => { - const body = document.querySelector('body') as HTMLBodyElement + const body = document.body const x = ref(0) const y = ref(0) const { width } = useWindowSize()