Dev

README.md

@@ -2,14 +2,15 @@
 
 ## Easy to use, simple word cards like paper ones, but eco-friendly, fast in turnover, and free. 
 
-### Use Cases:
-- Languages Learning
-- New Terms Learning
-- Inventories and Collections
-- Cards for any simple data with images
+## Features:
+- Managing cards and collections
+- Filtering and sorting
+- Automatic getting a relevant image from Pixabay
+- Images uploading
+- Automatic images resizing
+- Firebase Realtime Database
+- Firebase Authentication
+- Firebase Storage
 
-### Capabilities:
-- Visualization: Add related images automatically or upload your images
-- Organization: Consider Collections as folders or tags
-- Annotation: Multiline text field
-- Search: Full-text search and sorting
+## Website:
+https://my-word-cards.itcross.org

components/UI/Footer.vue

@@ -1,6 +1,6 @@
 <!--
   - Developed by Artu, https://github.com/ArtuGit
-  -  Copyleft, 2020-2021.
+  -  Copyleft 2020-2021.
   -->
 
 <template>
@@ -24,7 +24,7 @@
           <div>Powered by</div>
           <div class="logo">
             <a href="https://pixabay.com/" rel="noopener" target="_blank">
-              <img src="@/static/images/logos/Pixabay.svg" alt="" />
+              <img src="@/static/images/logos/Pixabay.svg" width="" alt="" />
             </a>
           </div>
         </v-col>
@@ -51,7 +51,7 @@ export default {
   text-align: center;
 }
 .logo img {
-  max-height: 50px;
+  max-height: 33px;
 }
 
 #slogan {

components/UI/ImageUpload.vue

@@ -1,31 +1,28 @@
 <!--
   - Developed by Artu, https://github.com/ArtuGit
-  -  Copyleft, 2020-2021.
+  - Copyleft 2020-2021.
   -->
 <template>
   <div class="mt-4">
     <v-sheet>
       <v-row>
-        <v-col cols="2" class="d-flex flex-column">
+        <v-col cols="3" class="d-flex flex-column">
           <v-img
             v-if="imageDialogURLTemp"
             class="d-block"
             :lazy-src="imageDialogURLTemp"
             :src="imageDialogURLTemp"
             max-height="225"
-            max-width="200"
           ></v-img>
         </v-col>
-        <v-col cols="10">
+        <v-col cols="9">
           <v-file-input
             ref="input1"
             v-model="imageDialogObj"
             show-size
             label="Image file"
             type="file"
             accept="image/*"
-            :hint="hint"
-            :persistent-hint="hint"
             @change="processImage"
           ></v-file-input>
         </v-col>
@@ -54,15 +51,6 @@ export default {
       imageDialogObj: null,
     }
   },
-  computed: {
-    hint() {
-      if (this.imageDialogObj) {
-        return ''
-      } else {
-        return 'Leave blank to get an image automatically'
-      }
-    },
-  },
   watch: {
     async imageExisted(newVal, oldVal) {
       this.imageDialogURLTemp = newVal

components/cards/Card.vue

@@ -4,59 +4,70 @@
   -->
 
 <template>
-  <v-card :loading="loading || loadingProp" height="100%">
-    <v-dialog v-model="dialog" persistent max-width="600px">
-      <template v-slot:activator="{ on: title, attrs2 }">
-        <v-card-title>
-          <div v-if="isAuthenticated" v-bind="attrs2" v-on="{ ...title }">
-            <span class="active headline">{{ word }}</span>
-          </div>
-          <div v-else>
-            <span class="headline">{{ word }}</span>
-          </div>
-          <v-spacer></v-spacer>
-          <v-menu
-            v-if="isAuthenticated && !loading && !loadingProp"
-            bottom
-            left
-          >
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn dark icon v-bind="attrs" v-on="on">
-                <v-icon>mdi-dots-vertical</v-icon>
-              </v-btn>
-            </template>
-            <v-list>
-              <v-list-item
-                v-for="item in menuItems"
-                :key="item.id"
-                class="menu-item"
+  <v-lazy
+    :options="{
+      threshold: 0.5,
+    }"
+    min-height="200"
+    transition="fade-transition"
+  >
+    <v-card :loading="loading || loadingProp" height="100%">
+      <v-dialog v-model="dialog" persistent max-width="600px">
+        <template v-slot:activator="{ on: title, attrs2 }">
+          <v-card-title>
+            <v-col cols="10">
+              <div v-if="isAuthenticated" v-bind="attrs2" v-on="{ ...title }">
+                <div class="active headline">{{ word }}</div>
+              </div>
+              <div v-else>
+                <div class="headline">{{ word }}</div>
+              </div>
+            </v-col>
+            <v-col cols="2">
+              <v-menu
+                v-if="isAuthenticated && !loading && !loadingProp"
+                bottom
+                left
               >
-                <v-list-item-title @click="menuHandler(item)">
-                  {{ item.title }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-card-title>
-      </template>
-      <card-form
-        :id="id"
-        :word="word"
-        :annotation="annotation"
-        :image="image"
-        :image-path="imagePath"
-        :collections="collections"
-        @dialog-reverse="dialogReverse"
-        @toggle-loading="toggleLoading"
-      >
-      </card-form>
-    </v-dialog>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn dark icon v-bind="attrs" v-on="on">
+                    <v-icon>mdi-dots-vertical</v-icon>
+                  </v-btn>
+                </template>
+                <v-list>
+                  <v-list-item
+                    v-for="item in menuItems"
+                    :key="item.id"
+                    class="menu-item"
+                  >
+                    <v-list-item-title @click="menuHandler(item)">
+                      {{ item.title }}
+                    </v-list-item-title>
+                  </v-list-item>
+                </v-list>
+              </v-menu>
+            </v-col>
+          </v-card-title>
+        </template>
+        <card-form
+          :id="id"
+          :word="word"
+          :annotation="annotation"
+          :image="image"
+          :image-path="imagePath"
+          :collections="collections"
+          @dialog-reverse="dialogReverse"
+          @toggle-loading="toggleLoading"
+        >
+        </card-form>
+      </v-dialog>
 
-    <v-card-subtitle v-if="trimmedAnnotation">
-      {{ trimmedAnnotation }}
-    </v-card-subtitle>
-    <v-img v-if="image" :src="image"></v-img>
-  </v-card>
+      <v-card-subtitle v-if="trimmedAnnotation">
+        {{ trimmedAnnotation }}
+      </v-card-subtitle>
+      <v-img v-if="image" :src="image"></v-img>
+    </v-card>
+  </v-lazy>
 </template>
 
 <script>
@@ -178,6 +189,9 @@ export default {
 </script>
 
 <style scoped>
+.headline {
+  word-break: normal;
+}
 .active.headline:hover {
   cursor: pointer;
 }

components/collections/Collection.vue

@@ -214,6 +214,9 @@ export default {
 </script>
 
 <style scoped>
+.headline {
+  word-break: normal;
+}
 .active.headline:hover {
   cursor: pointer;
 }

components/home/Capabilities.vue

@@ -1,6 +1,6 @@
 <!--
   - Developed by Artu, https://github.com/ArtuGit
-  -  Copyleft, 2020-2021.
+  -  Copyleft 2020-2021.
   -->
 
 <template>
@@ -65,3 +65,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.v-icon {
+  padding-top: 1.5rem;
+}
+</style>

plugins/api-helpers.js

@@ -1,6 +1,6 @@
 /*
  * Developed by Artu, https://github.com/ArtuGit
- *  Copyleft, 2020-2021.
+ * Copyleft 2020-2021.
  */
 
 import { authenticate } from 'pixabay-api'
@@ -153,17 +153,19 @@ function uploadURLToStorage(url) {
 }
 
 function deleteFileOnStorage(path) {
-  const fileRef = this.$fire.storage.ref().child(path)
-  // Delete the file
-  return fileRef
-    .delete()
-    .then(() => {
-      // File deleted successfully
-    })
-    .catch((error) => {
-      // eslint-disable-next-line
-      console.error(error)
-    })
+  if (path) {
+    const fileRef = this.$fire.storage.ref().child(path)
+    // Delete the file
+    return fileRef
+      .delete()
+      .then(() => {
+        // File deleted successfully
+      })
+      .catch((error) => {
+        // eslint-disable-next-line
+        console.error(error)
+      })
+  }
 }
 
 async function getBlobFromURL(url) {

store/cards.js

@@ -1,6 +1,6 @@
 /*
  * Developed by Artu, https://github.com/ArtuGit
- * Copyleft 2020-2021.
+ *  Copyleft 2020-2021.
  */
 
 import {
@@ -89,6 +89,9 @@ export const actions = {
           content: 'No image returned for this word',
           color: 'warning',
         })
+        delete card.state
+        delete card.params
+        vuexContext.commit('saveCard', card)
         return
       }
       if (card.params.imagePathOld) {

store/collections.js

@@ -1,6 +1,6 @@
 /*
  * Developed by Artu, https://github.com/ArtuGit
- * Copyleft 2020-2021.
+ *  Copyleft 2020-2021.
  */
 
 import {
@@ -135,6 +135,9 @@ export const actions = {
           content: 'No image returned for this title',
           color: 'warning',
         })
+        delete collection.state
+        delete collection.params
+        vuexContext.commit('saveCollection', collection)
         return
       }
       if (collection.params.imagePathOld) {