From f2f947bfe8c0255504aa5e13ac19fc9352c9ffb0 Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Wed, 21 Apr 2021 21:50:10 -0800
Subject: [PATCH] update mobile cards / fix overflow errors

---
 .../components/Recipe/MobileRecipeCard.vue    | 56 ++++++++++++++-----
 frontend/src/components/UI/CardSection.vue    |  1 +
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Recipe/MobileRecipeCard.vue b/frontend/src/components/Recipe/MobileRecipeCard.vue
index c0df606bf..377f9a10d 100644
--- a/frontend/src/components/Recipe/MobileRecipeCard.vue
+++ b/frontend/src/components/Recipe/MobileRecipeCard.vue
@@ -1,23 +1,39 @@
 <template>
   <v-card
+    class="mx-auto"
     hover
     :to="`/recipe/${slug}`"
-    max-height="125"
     @click="$emit('selected')"
   >
-    <v-list-item>
-      <v-list-item-avatar rounded size="125" class="mt-0 ml-n4">
-        <v-img :src="getImage(slug)"> </v-img>
-      </v-list-item-avatar>
-      <v-list-item-content class="align-self-start">
-        <v-list-item-title>
-          {{ name }}
-        </v-list-item-title>
-        <v-rating length="5" size="16" dense :value="rating"></v-rating>
-        <div class="text">
-          <v-list-item-action-text>
-            {{ description | truncate(115) }}
-          </v-list-item-action-text>
+    <v-list-item three-line>
+      <v-list-item-avatar
+        tile
+        size="125"
+        color="grey"
+        class="v-mobile-img rounded-sm my-0 ml-n4"
+      >
+        <v-img :src="getImage(slug)" lazy-src=""></v-img
+      ></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">
+          <RecipeChips
+            :items="tags"
+            :title="false"
+            :limit="1"
+            :small="true"
+            :isCategory="false"
+          />
+          <v-rating
+            color="secondary"
+            class="ml-auto"
+            background-color="secondary lighten-3"
+            dense
+            length="5"
+            size="15"
+            :value="rating"
+          ></v-rating>
         </div>
       </v-list-item-content>
     </v-list-item>
@@ -25,8 +41,12 @@
 </template>
 
 <script>
+import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import { api } from "@/api";
 export default {
+  components: {
+    RecipeChips,
+  },
   props: {
     name: String,
     slug: String,
@@ -36,6 +56,9 @@ export default {
     route: {
       default: true,
     },
+    tags: {
+      default: true,
+    },
   },
 
   methods: {
@@ -47,6 +70,11 @@ export default {
 </script>
 
 <style>
+.v-mobile-img {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+}
 .v-card--reveal {
   align-items: center;
   bottom: 0;
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 5d70e1d4d..720a241e7 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -73,6 +73,7 @@
             :slug="recipe.slug"
             :rating="recipe.rating"
             :image="recipe.image"
+            :tags="recipe.tags"
           />
         </v-col>
       </v-row>