markdown support in ingredients

frontend/src/components/Recipe/RecipeCard.vue

@@ -26,21 +26,16 @@
       </v-card-title>
 
       <v-card-actions class="">
-        <v-row dense align="center">
-          <v-col>
-            <v-rating
-              class="mr-2"
-              color="secondary"
-              background-color="secondary lighten-3"
-              dense
-              length="5"
-              size="15"
-              :value="rating"
-            ></v-rating>
-          </v-col>
-          <v-col></v-col>
-          <v-col align="end"> </v-col>
-        </v-row>
+        <v-rating
+          class="mr-2"
+          color="secondary"
+          background-color="secondary lighten-3"
+          dense
+          length="5"
+          size="15"
+          :value="rating"
+        ></v-rating>
+        <v-spacer></v-spacer>
       </v-card-actions>
     </v-card>
   </v-hover>
@@ -55,6 +50,7 @@ export default {
     description: String,
     rating: Number,
     image: String,
+
     route: {
       default: true,
     },

frontend/src/components/Recipe/RecipeViewer/Ingredients.vue

@@ -5,20 +5,30 @@
       v-for="(ingredient, index) in ingredients"
       :key="generateKey('ingredient', index)"
     >
-      <v-checkbox
-        hide-details
-        class="ingredients"
-        :label="ingredient"
-        color="secondary"
-      >
-      </v-checkbox>
+      <v-card flat>
+        <v-card-text class="text-subtitle-1">
+          <v-row class="flex row ">
+            <v-checkbox
+              hide-details
+              class=" pt-0 ingredients my-auto py-auto"
+              color="secondary"
+            >
+            </v-checkbox>
+            <vue-markdown class="my-auto" :source="ingredient"> </vue-markdown>
+          </v-row>
+        </v-card-text>
+      </v-card>
     </div>
   </div>
 </template>
 
 <script>
+import VueMarkdown from "@adapttive/vue-markdown";
 import utils from "@/utils";
 export default {
+  components: {
+    VueMarkdown,
+  },
   props: {
     ingredients: Array,
   },
@@ -31,4 +41,7 @@ export default {
 </script>
 
 <style>
+p {
+  margin-bottom: auto !important;
+}
 </style>

frontend/src/components/UI/CardSection.vue

@@ -99,6 +99,11 @@ export default {
       default: 999,
     },
   },
+  watch: {
+    recipes() {
+      console.log(this.recipes);
+    },
+  },
   computed: {
     viewScale() {
       switch (this.$vuetify.breakpoint.name) {