From acf54f7a86c2cb36a2a7c29002256a98a255eb17 Mon Sep 17 00:00:00 2001
From: Julien Calixte <juliencalixte@gmail.com>
Date: Mon, 15 Mar 2021 23:41:34 +0100
Subject: [PATCH] :iphone: (note)

---
 src/components/StackedNote.vue   | 27 ++++++++++++++++++++-----
 src/components/WelcomeWorld.vue  |  3 ++-
 src/constants/mobile.ts          |  1 +
 src/hooks/useFocus.hook.ts       | 18 +++++++++++------
 src/hooks/useNote.hook.ts        | 14 +++++++++----
 src/hooks/useNoteOverlay.hook.ts | 25 +++++++++++++++++------
 src/hooks/useOverlay.hook.ts     | 27 ++++++++++++++++++-------
 src/styles/app.scss              |  3 ++-
 src/views/Home.vue               | 34 ++++++++++++++++++--------------
 9 files changed, 107 insertions(+), 45 deletions(-)
 create mode 100644 src/constants/mobile.ts

diff --git a/src/components/StackedNote.vue b/src/components/StackedNote.vue
index db812a7..b14436a 100644
--- a/src/components/StackedNote.vue
+++ b/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>
diff --git a/src/components/WelcomeWorld.vue b/src/components/WelcomeWorld.vue
index 174ec86..3448018 100644
--- a/src/components/WelcomeWorld.vue
+++ b/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;
diff --git a/src/constants/mobile.ts b/src/constants/mobile.ts
new file mode 100644
index 0000000..129546d
--- /dev/null
+++ b/src/constants/mobile.ts
@@ -0,0 +1 @@
+export const MOBILE_BREAKPOINT = 768
diff --git a/src/hooks/useFocus.hook.ts b/src/hooks/useFocus.hook.ts
index df633b6..f8a32d4 100644
--- a/src/hooks/useFocus.hook.ts
+++ b/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)
+      }
     })
   }
 
diff --git a/src/hooks/useNote.hook.ts b/src/hooks/useNote.hook.ts
index c0899b3..a163c22 100644
--- a/src/hooks/useNote.hook.ts
+++ b/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(() => {
diff --git a/src/hooks/useNoteOverlay.hook.ts b/src/hooks/useNoteOverlay.hook.ts
index aedfd75..f39a562 100644
--- a/src/hooks/useNoteOverlay.hook.ts
+++ b/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 {
diff --git a/src/hooks/useOverlay.hook.ts b/src/hooks/useOverlay.hook.ts
index a39c394..1639d0f 100644
--- a/src/hooks/useOverlay.hook.ts
+++ b/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
   }
 }
diff --git a/src/styles/app.scss b/src/styles/app.scss
index f57a13b..b750282 100644
--- a/src/styles/app.scss
+++ b/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) {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 8fe042b..0e5d850 100644
--- a/src/views/Home.vue
+++ b/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;
     }
   }
 }