From: Adam Dullage <redacted>
Date: Sat, 6 Aug 2022 18:52:42 +0000 (+0100)
Subject: RecentlyModified UI improvements
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=b081d0ac1206d5fce0959e909236f0d190cbe6ff;p=flatnotes.git

RecentlyModified UI improvements
---

diff --git a/flatnotes/src/components/App.vue b/flatnotes/src/components/App.vue
index 097dd87..7eeb8b7 100644
--- 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 86c5a66..6464ea2 100644
--- 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 f739830..1a26aed 100644
--- 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;