feature/favorite-recipes (#443)

* add favorites options

* bump dependencies

* add badges to all cards

* typo

* remove console.log

* fix site-loader viewport

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/CardSection.vue

@@ -95,7 +95,7 @@
     </div>
     <div v-intersect="bumpList" class="d-flex">
       <v-expand-x-transition>
-        <SiteLoader v-if="loading" :loading="loading" :size="150" />
+        <SiteLoader v-if="loading" :loading="loading" />
       </v-expand-x-transition>
     </div>
   </div>

frontend/src/components/UI/Dialogs/SearchDialog.vue

@@ -3,7 +3,7 @@
     <slot v-bind="{ open, close }"> </slot>
     <v-dialog
       v-model="dialog"
-      :width="isMobile ? undefined : '700'"
+      :width="isMobile ? undefined : '65%'"
       :height="isMobile ? undefined : '0'"
       :fullscreen="isMobile"
       content-class="top-dialog"

frontend/src/components/UI/SiteLoader.vue

@@ -1,14 +1,23 @@
 <template>
-  <v-progress-circular class="mx-auto" :width="size / 20" :size="size" color="primary lighten-2" indeterminate>
-    <div class="text-center">
-      <v-icon :size="size / 2" color="primary lighten-2">
-        {{ $globals.icons.primary }}
-      </v-icon>
-      <div>
-        Loading Recipes
+  <div class="mx-auto">
+    <v-progress-circular :width="size.width" :size="size.size" color="primary lighten-2" indeterminate>
+      <div class="text-center">
+        <v-icon :size="size.icon" color="primary lighten-2">
+          {{ $globals.icons.primary }}
+        </v-icon>
+        <div v-if="large" class="text-small">
+          <slot>
+            {{ small ? "" : "Loading Recipes" }}
+          </slot>
+        </div>
       </div>
+    </v-progress-circular>
+    <div v-if="!large" class="text-small">
+      <slot>
+        {{ small ? "" : "Loading Recipes" }}
+      </slot>
     </div>
-  </v-progress-circular>
+  </div>
 </template>
 
 <script>
@@ -17,8 +26,39 @@ export default {
     loading: {
       default: true,
     },
-    size: {
-      default: 200,
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    medium: {
+      type: Boolean,
+      default: true,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    size() {
+      if (this.small) {
+        return {
+          width: 2,
+          icon: 30,
+          size: 50,
+        };
+      } else if (this.large) {
+        return {
+          width: 4,
+          icon: 120,
+          size: 200,
+        };
+      }
+      return {
+        width: 3,
+        icon: 75,
+        size: 125,
+      };
     },
   },
 };

frontend/src/components/UI/TheSidebar.vue

@@ -15,6 +15,17 @@
             <v-list-item-subtitle> {{ user.admin ? $t("user.admin") : $t("user.user") }}</v-list-item-subtitle>
           </v-list-item-content>
         </v-list-item>
+
+        <v-list-item dense v-if="isLoggedIn" :to="`/user/${user.id}/favorites`">
+          <v-list-item-icon>
+            <v-icon>
+              mdi-heart
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title> Favorites </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
       </template>
       <v-divider></v-divider>
 
@@ -30,7 +41,7 @@
       <!-- Version List Item -->
       <v-list nav dense class="fixedBottom" v-if="!isMain">
         <v-list-item href="https://github.com/sponsors/hay-kot" target="_target">
-          <v-list-item-icon >
+          <v-list-item-icon>
             <v-icon color="pink">
               mdi-heart
             </v-icon>