From 22017f3e8b6d205d191bbede1ce1709cb9e87c4f Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Wed, 17 May 2023 07:24:26 +0200
Subject: [PATCH] improve scrolling / layout

---
 index.html                               | 2 +-
 src/App.vue                              | 6 +++---
 src/components/Note.vue                  | 4 ++--
 src/components/Note/NoteEditor.vue       | 2 +-
 src/components/Note/NoteToolbar.vue      | 2 +-
 src/components/SideBar.vue               | 2 +-
 src/components/TopBar.vue                | 4 ++--
 src/style.scss                           | 9 ++++++---
 tailwind.config.js => tailwind.config.ts | 4 ----
 9 files changed, 17 insertions(+), 18 deletions(-)
 rename tailwind.config.js => tailwind.config.ts (92%)
diff --git a/index.html b/index.html
index b41e041..657549d 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <title>Contexted</title>
   </head>
   <body>
-    <div id="app" class="bg-gray-100"></div>
+    <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index ac8a541..14b1a7f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@ const sideBarCollapsed = ref(false)
     :side-bar-collapsed="sideBarCollapsed"
     @toggle-side-bar="sideBarCollapsed = !sideBarCollapsed"
   />
-  <div class="relative mx-auto flex h-full max-w-app">
+  <div class="mx-auto flex min-h-full w-full max-w-app flex-grow">
     <SideBar
       :view-modes="viewModes"
       :active-view-mode="activeViewMode"
@@ -17,14 +17,14 @@ const sideBarCollapsed = ref(false)
       class="mt-[50px] px-3 py-6"
     />
     <main
-      class="transition[margin-left] absolute bottom-0 left-0 right-0 top-[50px] flex overflow-hidden border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
+      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar'"
     >
       <Note
         v-if="activeNote"
         :key="activeNote.id"
         :note="activeNote"
-        class="w-full"
+        class=""
         @update="(note) => updateNote(note.id, note)"
       />
     </main>
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 76dd6db..8b70e62 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -52,7 +52,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
 }
 </script>
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col h-full">
     <NoteToolbar :note="props.note" @delete="del" @set-root="setRoot">
       <template #title>
         <i
@@ -67,7 +67,7 @@ const setRoot = async (closeModal: () => Promise<Boolean>) => {
       </template>
     </NoteToolbar>
     <NoteEditor
-      class="flex-grow overflow-auto"
+      class="flex-grow"
       :note="activeNote"
       @update="updateNoteContent"
       v-if="activeNote"
diff --git a/src/components/Note/NoteEditor.vue b/src/components/Note/NoteEditor.vue
index b1c5cdf..4cf5993 100644
--- a/src/components/Note/NoteEditor.vue
+++ b/src/components/Note/NoteEditor.vue
@@ -163,7 +163,7 @@ const createLink = (link: string) => {
 <template>
   <div class="relative" ref="editorElement">
     <CKEditor
-      class="flex-grow text-[110%] font-light"
+      class="w-full flex-grow text-[110%] font-light"
       :editor="editor"
       v-model="editorData"
       :config="editorConfig"
diff --git a/src/components/Note/NoteToolbar.vue b/src/components/Note/NoteToolbar.vue
index f05b6f3..e33b9b3 100644
--- a/src/components/Note/NoteToolbar.vue
+++ b/src/components/Note/NoteToolbar.vue
@@ -39,10 +39,10 @@ const emit = defineEmits<{
           Are you sure you want to set this note as root note?
         </template>
         <template #actions="{ close }">
+          <button class="btn-sm btn" @click="close">Close</button>
           <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot', close)">
             Set current note as root
           </button>
-          <button class="btn-sm btn" @click="close">Close</button>
         </template>
       </Modal>
     </div>
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 06d2974..1be7b5a 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -13,7 +13,7 @@ const emit = defineEmits<{
 <template>
   <div
     id="sidebar"
-    class="relative flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
+    class="fixed top-0 flex w-sidebar flex-col gap-4 overflow-y-auto px-2 py-3 text-[90%]"
   >
     <SideBarMenu>
       <template #header>Root note</template>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index fa40dde..3c4361d 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -9,8 +9,8 @@ const emit = defineEmits<{
 }>()
 </script>
 <template>
-  <div class="absolute left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
-    <div class="w-in mx-auto flex w-full max-w-app items-center py-2.5 text-white">
+  <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
+    <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
       <div
         class="flex items-center pl-3"
         :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar pr-3'"
diff --git a/src/style.scss b/src/style.scss
index a19dfe8..302f892 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -4,15 +4,18 @@
 @import '@fontsource/source-sans-pro';
 @import '@fontsource/source-sans-pro/300';
 
-body,
-body > div,
 html {
   height: 100%;
 }
 
 body {
+  min-height: 100%;
   font-family: 'Source Sans Pro', sans-serif;
-  overflow-y: auto;
+  overflow-y: scroll;
+  @apply flex flex-col bg-gray-100;
+  #app {
+    @apply flex flex-grow flex-col;
+  }
 }
 
 .btn {
diff --git a/tailwind.config.js b/tailwind.config.ts
similarity index 92%
rename from tailwind.config.js
rename to tailwind.config.ts
index f89fb20..8d7a478 100644
--- a/tailwind.config.js
+++ b/tailwind.config.ts
@@ -7,10 +7,6 @@ export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {
-      colors: {
-        primary: '#1e4bc4',
-        secondary: 'red',
-      },
       colors: {
         primary: '#1e4bc4',
         secondary: colors.gray[500],
