📱 (note)

src/hooks/useFocus.hook.ts

@@ -1,10 +1,11 @@
+import { LocationQueryValue, useRoute } from 'vue-router'
+import { computed, nextTick } from 'vue'
+
 import { NOTE_WIDTH } from '@/constants/note-width'
 import { useOverlay } from '@/hooks/useOverlay.hook'
-import { computed, nextTick } from 'vue'
-import { LocationQueryValue, useRoute } from 'vue-router'
 
 export const useFocus = () => {
-  const { scrollToNote } = useOverlay(false)
+  const { scrollToNote, isMobile } = useOverlay(false)
   const { query } = useRoute()
 
   const initialStackedNotes = computed(() =>
@@ -24,9 +25,14 @@ export const useFocus = () => {
     }
     nextTick(() => {
       const index = stackedNotes.findIndex((noteSHA) => noteSHA === sha)
-      const left = index * NOTE_WIDTH
-
-      scrollToNote(left)
+      if (isMobile.value) {
+        const element = document.querySelector(`.note-${sha}`) as HTMLElement
+        const top = (index + 1) * (element?.clientHeight ?? 0)
+        scrollToNote(top)
+      } else {
+        const left = index * NOTE_WIDTH
+        // scrollToNote(left)
+      }
     })
   }
 

src/hooks/useNote.hook.ts

@@ -8,11 +8,12 @@ import {
 } from '@vue/runtime-core'
 import { useRoute, useRouter } from 'vue-router'
 
-import { noteEventBus } from '@/bus/noteBusEvent'
-import { useLinks } from '@/hooks/useLinks.hook'
-import { useRepo } from '@/hooks/useRepo.hook'
 import { NOTE_WIDTH } from '@/constants/note-width'
+import { noteEventBus } from '@/bus/noteBusEvent'
 import { useFocus } from '@/hooks/useFocus.hook'
+import { useLinks } from '@/hooks/useLinks.hook'
+import { useOverlay } from '@/hooks/useOverlay.hook'
+import { useRepo } from '@/hooks/useRepo.hook'
 
 const sanitizePath = (path: string) => {
   if (path.startsWith('./')) {
@@ -28,6 +29,7 @@ export const useNote = (
 ) => {
   const { push } = useRouter()
   const { query } = useRoute()
+  const { isMobile } = useOverlay(false)
   const { scrollToFocusedNote } = useFocus()
 
   const stackedNotes = ref(
@@ -132,7 +134,11 @@ export const useNote = (
     if (!element) {
       return
     }
-    element.style.width = `${NOTE_WIDTH * (stackedNotes.value.length + 1)}px`
+    if (isMobile.value) {
+      element.style.height = `${(stackedNotes.value.length + 1) * 100}vh`
+    } else {
+      element.style.width = `${NOTE_WIDTH * (stackedNotes.value.length + 1)}px`
+    }
   }
 
   onMounted(() => {

src/hooks/useNoteOverlay.hook.ts

@@ -1,13 +1,21 @@
-import { computed, onMounted } from '@vue/runtime-core'
+import { computed, onMounted, ref } from '@vue/runtime-core'
 
-import { useOverlay } from '@/hooks/useOverlay.hook'
 import { NOTE_WIDTH } from '@/constants/note-width'
+import { useOverlay } from '@/hooks/useOverlay.hook'
 
-const BOOKMARK_WIDTH = 1.5
+const BOOKMARK_WIDTH = 2
+const BOOKMARK_HEIGHT = 2.5
 
 export const useNoteOverlay = (className: string, index: number) => {
-  const { x } = useOverlay()
-  const displayNoteOverlay = computed(() => x.value > index * NOTE_WIDTH)
+  const { x, y, isMobile } = useOverlay()
+  const noteHeight = ref(0)
+  const displayNoteOverlay = computed(() => {
+    if (isMobile.value) {
+      return y.value > index * noteHeight.value
+    } else {
+      return x.value > index * NOTE_WIDTH
+    }
+  })
 
   onMounted(() => {
     const noteElement = document.querySelector(
@@ -17,8 +25,13 @@ export const useNoteOverlay = (className: string, index: number) => {
     if (!noteElement) {
       return
     }
+    noteHeight.value = noteElement.clientHeight
 
-    noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
+    if (isMobile.value) {
+      noteElement.style.top = `${(index + 1) * BOOKMARK_HEIGHT}rem`
+    } else {
+      noteElement.style.left = `${(index + 1) * BOOKMARK_WIDTH}rem`
+    }
   })
 
   return {

src/hooks/useOverlay.hook.ts

@@ -1,18 +1,21 @@
+import { MOBILE_BREAKPOINT } from '@/constants/mobile'
 import { ref } from 'vue'
-
 import { useEventListener } from '@vueuse/core'
 
 export const useOverlay = (listen = true) => {
   const x = ref(0)
-  const body = document.querySelector('body')
+  const y = ref(0)
+  const body = document.querySelector('body') as HTMLBodyElement
+  const isMobile = ref((body?.clientWidth ?? 0) <= MOBILE_BREAKPOINT)
 
   if (listen) {
     useEventListener(
       body,
       'scroll',
-      (e) => {
-        const target = e.target as HTMLElement
+      (event) => {
+        const target = event.target as HTMLElement
         x.value = target.scrollLeft
+        y.value = target.scrollTop
       },
       {
         passive: true,
@@ -22,13 +25,23 @@ export const useOverlay = (listen = true) => {
   }
 
   const scrollToNote = (to: number) => {
-    body?.scroll({
-      left: to
-    })
+    console.log('scroll to note', to)
+
+    if (isMobile.value) {
+      body.scroll({
+        top: to
+      })
+    } else {
+      body.scroll({
+        left: to
+      })
+    }
   }
 
   return {
     x,
+    y,
+    isMobile,
     scrollToNote
   }
 }