From a7d48f95cf7142330e16fbd1107d98bf906f85ca Mon Sep 17 00:00:00 2001
From: hay-kot <hay-kot@pm.me>
Date: Thu, 25 Feb 2021 20:11:27 -0900
Subject: [PATCH] Smaller recipe cards for smaller viewports

---
 .../components/Recipe/MobileRecipeCard.vue    | 62 +++++++++++++++++++
 frontend/src/components/UI/CardSection.vue    | 37 ++++++++++-
 frontend/src/pages/MealPlanThisWeekPage.vue   |  2 +-
 3 files changed, 97 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Recipe/MobileRecipeCard.vue

diff --git a/frontend/src/components/Recipe/MobileRecipeCard.vue b/frontend/src/components/Recipe/MobileRecipeCard.vue
new file mode 100644
index 000000000..8d8d7c9c9
--- /dev/null
+++ b/frontend/src/components/Recipe/MobileRecipeCard.vue
@@ -0,0 +1,62 @@
+<template>
+  <v-card :to="`/recipe/${slug}`" max-height="125">
+    <v-list-item>
+      <v-list-item-avatar rounded size="125" class="mt-0 ml-n4">
+        <v-img :src="getImage(image)"> </v-img>
+      </v-list-item-avatar>
+      <v-list-item-content>
+        <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(50) }}
+          </v-list-item-action-text>
+        </div>
+      </v-list-item-content>
+    </v-list-item>
+  </v-card>
+</template>
+
+<script>
+import utils from "@/utils";
+export default {
+  props: {
+    name: String,
+    slug: String,
+    description: String,
+    rating: Number,
+    image: String,
+    route: {
+      default: true,
+    },
+  },
+
+  methods: {
+    getImage(image) {
+      return utils.getImageURL(image);
+    },
+  },
+};
+</script>
+
+<style>
+.v-card--reveal {
+  align-items: center;
+  bottom: 0;
+  justify-content: center;
+  opacity: 0.8;
+  position: absolute;
+  width: 100%;
+}
+.v-card--text-show {
+  opacity: 1 !important;
+}
+.headerClass {
+  white-space: nowrap;
+  word-break: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/UI/CardSection.vue b/frontend/src/components/UI/CardSection.vue
index 21d749660..b3c2ea9b2 100644
--- a/frontend/src/components/UI/CardSection.vue
+++ b/frontend/src/components/UI/CardSection.vue
@@ -31,7 +31,7 @@
         </v-row>
       </v-card-text>
     </v-card>
-    <v-row>
+    <v-row v-if="!viewScale">
       <v-col
         :sm="6"
         :md="6"
@@ -49,14 +49,36 @@
         />
       </v-col>
     </v-row>
+    <v-row v-else dense>
+      <v-col
+        cols="12"
+        sm="12"
+        md="6"
+        lg="4"
+        xl="3"
+        v-for="recipe in recipes.slice(0, cardLimit)"
+        :key="recipe.name"
+        
+      >
+        <MobileRecipeCard
+          :name="recipe.name"
+          :description="recipe.description"
+          :slug="recipe.slug"
+          :rating="recipe.rating"
+          :image="recipe.image"
+        />
+      </v-col>
+    </v-row>
   </div>
 </template>
 
 <script>
 import RecipeCard from "../Recipe/RecipeCard";
+import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
 export default {
   components: {
     RecipeCard,
+    MobileRecipeCard,
   },
   props: {
     sortable: {
@@ -68,8 +90,17 @@ export default {
       default: 6,
     },
   },
-  data() {
-    return {};
+  computed: {
+    viewScale() {
+      switch (this.$vuetify.breakpoint.name) {
+        case "xs":
+          return true;
+        case "sm":
+          return true;
+        default:
+          return false;
+      }
+    },
   },
 };
 </script>
diff --git a/frontend/src/pages/MealPlanThisWeekPage.vue b/frontend/src/pages/MealPlanThisWeekPage.vue
index aacec5312..6c3516977 100644
--- a/frontend/src/pages/MealPlanThisWeekPage.vue
+++ b/frontend/src/pages/MealPlanThisWeekPage.vue
@@ -37,7 +37,7 @@
               </v-card>
             </v-col>
             <v-col order-sm="0" :order-md="getOrder(index)" md="6" sm="12">
-              <v-card>
+              <v-card flat>
                 <v-img :src="getImage(meal.image)" max-height="300"> </v-img>
               </v-card>
             </v-col>