⚡️ Sync Collection -> Notes

components/firebase/feeds.vue

@@ -3,10 +3,10 @@
     v-if="fb.currentFeeds.length !== 0"
     class="virtual-list"
     :class="{ filled: fb.currentFeeds.length }"
-    :size="56"
-    :remain="Math.min(8, fb.currentFeeds.length)"
+    :size="90"
+    :remain="Math.min(5, fb.currentFeeds.length)"
   >
-    <ul v-for="feed in fb.currentFeeds" :key="feed.id">
+    <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="entry">
       <div class="show-on-large-screen">
         <li>
           <input
@@ -18,13 +18,15 @@
             class="bg-color"
           />
         </li>
-        <button class="icon" @click="saveFeed(feed)">
-          <i class="material-icons">get_app</i>
-        </button>
         <button class="icon" @click="deleteFeed(feed)">
           <i class="material-icons">delete</i>
         </button>
       </div>
+      <div class="show-on-large-screen">
+        <li class="info clamb-3">
+          <label>{{ feed.message }}</label>
+        </li>
+      </div>
     </ul>
   </virtual-list>
   <ul v-else>
@@ -38,6 +40,23 @@
 .virtual-list {
   max-height: calc(100vh - 288px);
 }
+
+ul,
+ol {
+  flex-direction: column;
+}
+
+.entry {
+  border-bottom: 1px dashed var(--brd-color);
+  padding: 0 0 8px;
+}
+
+.clamb-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 </style>
 
 <script>
@@ -58,23 +77,6 @@ export default {
       this.$toast.error(this.$t("deleted"), {
         icon: "delete"
       });
-    },
-    saveFeed(feed) {
-      const dataToWrite = JSON.stringify(feed.message, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a"),
-        url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = (feed.label + " on " + Date()).replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done"
-      });
-      setTimeout(() => {
-        document.body.removeChild(a);
-        window.URL.revokeObjectURL(url);
-      }, 1000);
     }
   }
 };

components/firebase/inputform.vue

@@ -7,7 +7,8 @@
           type="text"
           autofocus
           v-model="message"
-          :placeholder="$t('paste_a_collection')"
+          :placeholder="$t('paste_a_note')"
+          @keyup.enter="formPost"
         />
       </li>
     </ul>
@@ -19,11 +20,12 @@
           autofocus
           v-model="label"
           :placeholder="$t('label')"
+          @keyup.enter="formPost"
         />
       </li>
       <button
         class="icon"
-        :disabled="!(this.message && this.label)"
+        :disabled="!(this.message || this.label)"
         value="Save"
         @click="formPost"
       >
@@ -46,6 +48,9 @@ export default {
   },
   methods: {
     formPost() {
+      if (!(this.message || this.label)) {
+        return;
+      }
       fb.writeFeeds(this.message, this.label);
       this.message = null;
       this.label = null;