context menu

frontend/src/components/Recipe/ContextMenu.vue

@@ -18,7 +18,7 @@
           v-on="on"
           @click.prevent
         >
-          <v-icon>mdi-dots-vertical</v-icon>
+          <v-icon>{{ menuIcon }}</v-icon>
         </v-btn>
       </template>
       <v-list dense>
@@ -48,6 +48,9 @@ export default {
     slug: {
       type: String,
     },
+    menuIcon: {
+      default: "mdi-dots-vertical",
+    },
   },
   computed: {
     loggedIn() {

frontend/src/components/Recipe/MobileRecipeCard.vue

@@ -1,5 +1,6 @@
 <template>
   <v-card
+    :ripple="false"
     class="mx-auto"
     hover
     :to="`/recipe/${slug}`"
@@ -34,6 +35,7 @@
             size="15"
             :value="rating"
           ></v-rating>
+          <ContextMenu :slug="slug" menu-icon="mdi-dots-horizontal" />
         </div>
       </v-list-item-content>
     </v-list-item>
@@ -42,10 +44,12 @@
 
 <script>
 import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
+import ContextMenu from "@/components/Recipe/ContextMenu";
 import { api } from "@/api";
 export default {
   components: {
     RecipeChips,
+    ContextMenu,
   },
   props: {
     name: String,

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -129,8 +129,7 @@ export default {
   mounted() {
     this.getRecipeDetails();
     this.jsonEditor = false;
-    this.form = Boolean(this.edit);
-    console.log(this.form);
+    this.form = this.$route.query.edit === "true" && this.loggedIn;
   },
 
   watch: {
@@ -144,7 +143,7 @@ export default {
       return this.$route.params.recipe;
     },
     edit() {
-      return this.$route.query.edit;
+      return true;
     },
     showIcons() {
       return this.form;
@@ -165,7 +164,6 @@ export default {
     async getRecipeDetails() {
       this.recipeDetails = await api.recipes.requestDetails(this.currentRecipe);
       this.skeleton = false;
-      this.form = false;
     },
     getImage(image) {
       if (image) {
@@ -212,10 +210,6 @@ export default {
         }
       }
     },
-    showForm() {
-      this.form = true;
-      this.jsonEditor = false;
-    },
   },
 };
 </script>