bug/mobile-fixes (#426)

* search dialog rewrite

* lazy-load shopping list

* fit search bar

* event table

* set urls for static content

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

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -1,36 +1,44 @@
 <template>
-  <v-card :ripple="false" class="mx-auto" hover :to="`/recipe/${slug}`" @click="$emit('selected')">
-    <v-list-item three-line>
-      <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
-        <v-img
-          v-if="!fallBackImage"
-          :src="getImage(slug)"
-          @load="fallBackImage = false"
-          @error="fallBackImage = true"
-        ></v-img>
-        <v-icon v-else color="primary" class="icon-position" size="100">
-          {{ $globals.icons.primary }}
-        </v-icon>
-      </v-list-item-avatar>
-      <v-list-item-content>
-        <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
-        <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
-        <div class="d-flex justify-center align-center">
-          <v-rating
-            color="secondary"
-            class="ml-auto"
-            background-color="secondary lighten-3"
-            dense
-            length="5"
-            size="15"
-            :value="rating"
-          ></v-rating>
-          <v-spacer></v-spacer>
-          <ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
-        </div>
-      </v-list-item-content>
-    </v-list-item>
-  </v-card>
+  <v-expand-transition>
+    <v-card
+      :ripple="false"
+      class="mx-auto"
+      hover
+      :to="this.$listeners.selected ? undefined : `/recipe/${slug}`"
+      @click="$emit('selected')"
+    >
+      <v-list-item three-line>
+        <v-list-item-avatar tile size="125" class="v-mobile-img rounded-sm my-0 ml-n4">
+          <v-img
+            v-if="!fallBackImage"
+            :src="getImage(slug)"
+            @load="fallBackImage = false"
+            @error="fallBackImage = true"
+          ></v-img>
+          <v-icon v-else color="primary" class="icon-position" size="100">
+            {{ $globals.icons.primary }}
+          </v-icon>
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title class=" mb-1">{{ name }} </v-list-item-title>
+          <v-list-item-subtitle> {{ description }} </v-list-item-subtitle>
+          <div class="d-flex justify-center align-center">
+            <v-rating
+              color="secondary"
+              class="ml-auto"
+              background-color="secondary lighten-3"
+              dense
+              length="5"
+              size="15"
+              :value="rating"
+            ></v-rating>
+            <v-spacer></v-spacer>
+            <ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
+          </div>
+        </v-list-item-content>
+      </v-list-item>
+    </v-card>
+  </v-expand-transition>
 </template>
 
 <script>