RecentlyModified UI improvements

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 097dd879048edef373be66021596bbea232b095f..7eeb8b739b804dfa5534713d762f046f31e1660e 100644 (file)
--- a/flatnotes/src/components/App.vue
+++ b/flatnotes/src/components/App.vue
@@ -82,7 +82,7 @@
         <img src="../assets/logo.svg" />
       </div>
       <SearchInput class="search-input mb-4"></SearchInput>
-      <RecentlyModified></RecentlyModified>
+      <RecentlyModified class="recently-modified"></RecentlyModified>
     </div>
 
     <!-- Note -->

diff --git a/flatnotes/src/components/RecentlyModified.vue b/flatnotes/src/components/RecentlyModified.vue
index 86c5a66d27e0f9240d55257175f5e6417d9c442f..6464ea2e43cced81feab4f01dbd7131b08c2562b 100644 (file)
--- a/flatnotes/src/components/RecentlyModified.vue
+++ b/flatnotes/src/components/RecentlyModified.vue
@@ -1,19 +1,13 @@
 <template>
   <div>
-    <h6 class="text-center text-muted text-bold">Recently Modified</h6>
-
     <!-- Loading -->
     <div v-if="notes == null">
-      <loading-indicator :failed="loadingFailed" />
-    </div>
-
-    <!-- No Notes -->
-    <div v-else-if="notes.length == 0">
-      <p class="text-center">No Notes</p>
+      <LoadingIndicator loadingMessage="" :failed="loadingFailed" />
     </div>
 
     <!-- Notes Loaded -->
-    <div v-else>
+    <div v-else-if="notes.length > 0">
+      <h6 class="text-center text-muted text-bold">Recently Modified</h6>
       <p
         v-for="note in notes"
         class="text-center clickable-link mb-2"

diff --git a/flatnotes/src/main.scss b/flatnotes/src/main.scss
index f739830e9c0166ed62718265488dd6722a0a19a5..1a26aede3fbec9e6b6269df6e1532c9a81a6334f 100644 (file)
--- a/flatnotes/src/main.scss
+++ b/flatnotes/src/main.scss
@@ -70,6 +70,11 @@ body {
   box-shadow: 0 0 20px #0000000a;
 }
 
+.recently-modified {
+  // Prevent UI from moving during load
+  min-height: 190px;
+}
+
 // Toast UI Overrides
 .toastui-editor-contents {
   font-family: "Inter", sans-serif;