📱 (note)

src/components/StackedNote.vue

@@ -1,7 +1,11 @@
 <template>
   <div
     class="stacked-note"
-    :class="{ [className]: true, overlay: displayNoteOverlay }"
+    :class="{
+      [className]: true,
+      overlay: displayNoteOverlay,
+      [`note-${sha}`]: true
+    }"
   >
     <div class="title-stacked-note" :class="titleClassName">
       <a @click.prevent="focus">
@@ -75,8 +79,6 @@ $border-color: rgba(18, 19, 58, 0.2);
 
 .title-stacked-note {
   position: sticky;
-  transform-origin: 0 0;
-  transform: rotate(90deg);
   top: 0;
 
   a {
@@ -86,8 +88,17 @@ $border-color: rgba(18, 19, 58, 0.2);
 }
 
 @media screen and (max-width: 768px) {
-  .title-stacked-note {
-    display: none;
+  .stacked-note {
+    padding: 0 1.5rem;
+
+    .title-stacked-note {
+      padding: 1rem 0 0;
+      background-color: white;
+    }
+
+    section {
+      padding: 1rem 0;
+    }
   }
 }
 
@@ -96,5 +107,11 @@ $border-color: rgba(18, 19, 58, 0.2);
     border-top: 0;
     border-left: 1px solid $border-color;
   }
+
+  .title-stacked-note {
+    padding: 0 1rem;
+    transform-origin: 0 0;
+    transform: rotate(90deg);
+  }
 }
 </style>

src/components/WelcomeWorld.vue

@@ -71,7 +71,7 @@
           target="_blank"
           rel="noopener noreferrer"
           >Andy Matuschak's website</a
-        >. May "Lite note" be useful to everyone.
+        >.
       </p>
 
       <p>
@@ -101,6 +101,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .welcome-world {
+  padding: 1rem;
   margin: auto;
   display: flex;
   flex-direction: column;

src/constants/mobile.ts

@@ -0,0 +1 @@
+export const MOBILE_BREAKPOINT = 768

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
   }
 }

src/styles/app.scss

@@ -14,7 +14,8 @@ html {
 body {
   font-family: 'Courier Prime', monospace;
   height: 100vh;
-  scroll-behavior: smooth
+  scroll-behavior: smooth;
+  overflow-y: auto;
 }
 
 @media screen and (min-width: 769px) {

src/views/Home.vue

@@ -12,17 +12,19 @@
   </div>
   <div class="home content note-container" v-else>
     <div class="readme note">
-      <h1 class="title is-1">
-        [<router-link
-          :to="{ name: 'Home', params: { user, repo } }"
-          :key="routeKey"
-        >
-          {{ repo }} </router-link
-        >]
-      </h1>
-      <h2 class="subtitle is-2">
-        <em>{{ user }}</em>
-      </h2>
+      <div class="repo-title">
+        <h1 class="title is-1">
+          [<router-link
+            :to="{ name: 'Home', params: { user, repo } }"
+            :key="routeKey"
+          >
+            {{ repo }} </router-link
+          >]
+        </h1>
+        <h4 class="subtitle is-4">
+          <em>{{ user }}</em>
+        </h4>
+      </div>
       <p class="note-display" v-html="readme"></p>
     </div>
     <stacked-note
@@ -74,12 +76,16 @@ export default defineComponent({
 <style lang="scss" scoped>
 .home {
   display: flex;
-  width: 100%;
 
   .readme {
     position: sticky;
     left: 0;
-    padding: 0 1.5rem 1rem;
+    top: 0;
+    padding: 2.5rem 2rem 1rem;
+
+    .repo-title {
+      text-align: center;
+    }
   }
 
   .note {
@@ -107,9 +113,7 @@ export default defineComponent({
     flex-wrap: wrap;
 
     .note {
-      position: initial;
       width: 100vw;
-      height: auto;
     }
   }
 }