Note view UI improvments

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index c0e97463f252bed581c14c28b3493c1efc1e3bac..7fb9fff1be71f35332808678f91f555c02f88a01 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -51,7 +51,7 @@
         <button
           v-if="currentView == views.home"
           type="button"
-          class="btn btn-light mx-1"
+          class="btn btn-sm btn-outline-dark mx-1"
           @click="logout"
         >
           Logout
@@ -61,7 +61,7 @@
         <button
           v-if="currentView == views.home"
           type="button"
-          class="btn btn-primary mx-1"
+          class="btn btn-sm btn-outline-primary mx-1"
           @click="newNote"
         >
           New
@@ -72,7 +72,7 @@
           <button
             v-if="currentView == 2 && editMode == false"
             type="button"
-            class="btn btn-secondary mx-1"
+            class="btn btn-sm btn-outline-secondary mx-1"
           >
             Close
           </button>
@@ -82,7 +82,7 @@
         <button
           v-if="currentView == views.note && editMode == false"
           type="button"
-          class="btn btn-warning mx-1"
+          class="btn btn-sm btn-outline-warning mx-1"
           @click="toggleEditMode"
         >
           Edit
@@ -92,7 +92,7 @@
         <button
           v-if="currentView == views.note && editMode == false"
           type="button"
-          class="btn btn-danger mx-1"
+          class="btn btn-sm btn-outline-danger mx-1"
           @click="deleteNote"
         >
           Delete
@@ -102,7 +102,7 @@
         <button
           v-if="currentView == views.note && editMode == true"
           type="button"
-          class="btn btn-secondary mx-1"
+          class="btn btn-sm btn-outline-secondary mx-1"
           @click="cancelNote"
         >
           Cancel
@@ -112,7 +112,7 @@
         <button
           v-if="currentView == views.note && editMode == true"
           type="button"
-          class="btn btn-success mx-1"
+          class="btn btn-sm btn-outline-success mx-1"
           @click="saveNote"
         >
           Save
@@ -143,28 +143,32 @@
         </div>
 
         <!-- Note Loaded -->
-        <div v-else class="mb-4">
-          <!-- Viewer -->
-          <div v-if="editMode == false">
-            <viewer
-              :initialValue="currentNote.content"
-              height="600px"
-              :options="viewerOptions"
-            />
-          </div>
+        <div v-else>
+          <h2 v-if="editMode == false" class="mb-4">{{currentNote.title}}</h2>
+          <input v-else type="text" class="h2 title-input" v-model="titleInput" />
 
-          <!-- Editor -->
-          <div v-else>
-            <input type="text" class="form-control" v-model="titleInput" />
-            <editor
-              :initialValue="initialContent"
-              initialEditType="markdown"
-              previewStyle="tab"
-              height="calc(100vh - 180px)"
-              ref="toastUiEditor"
-              :options="editorOptions"
-              @change="startDraftSaveTimeout"
-            />
+          <!-- Viewer -->
+          <div class="mb-4 note">
+            <div v-if="editMode == false" class="note-viewer">
+              <viewer
+                :initialValue="currentNote.content"
+                height="600px"
+                :options="viewerOptions"
+              />
+            </div>
+
+            <!-- Editor -->
+            <div v-else>
+              <editor
+                :initialValue="initialContent"
+                initialEditType="markdown"
+                previewStyle="tab"
+                height="calc(100vh - 230px)"
+                ref="toastUiEditor"
+                :options="editorOptions"
+                @change="startDraftSaveTimeout"
+              />
+            </div>
           </div>
         </div>
       </div>

diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index 6a2d78f3c9b603a2a6c3b6e73ff3464499f6fc27..80bd72ff9ad7ca5afdce6e8ff0ff883c8304d4c8 100644 (file)
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -1,11 +1,32 @@
+// Bootstrap
 @import "bootstrap/dist/css/bootstrap.css";
 @import "bootstrap-vue/dist/bootstrap-vue.css";
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
 
+// Toast UI Markdown Editor
 @import "@toast-ui/editor/dist/toastui-editor.css";
 @import "@toast-ui/editor/dist/toastui-editor-viewer.css";
+@import "prismjs/themes/prism.css";
+@import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
 
-@import 'prismjs/themes/prism.css';
-@import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
+
+// Variables
+$off-white: #f8f9fd70;
+
+
+// Mixins
+@mixin note-content {
+  padding: min(2vw, 30px) min(3vw, 40px);
+}
+
+
+// Elements & Classes
+body {
+  background-color: $off-white;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
 
 .clickable-link {
   cursor: pointer;
@@ -18,9 +39,42 @@
   }
 }
 
+.note {
+  background-color: white;
+  box-shadow: 0 0 10px #0000000a;
+}
+
+.note-viewer {
+  @include note-content;
+}
+
+.title-input {
+  border: none;
+  
+  // Override user agent styling
+  background-color: $off-white;
+  color: #212529;
+  padding: 0;
+}
+
+.title-input:focus {
+  outline: none;
+}
+
+
+// Toast UI Overrides
 .toastui-editor-contents {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   h1,
   h2 {
     border-bottom: none;
   }
 }
+
+.toastui-editor-defaultUI {
+  border: none;
+}
+
+.toastui-editor-defaultUI .ProseMirror {
+  @include note-content;
+}