From 02e5188d58fb4480a18b77ab3bbb3256ba6a0d8d Mon Sep 17 00:00:00 2001
From: Torsten Long <torsten.s.long@gmail.com>
Date: Sun, 29 Jun 2025 12:04:34 +0200
Subject: [PATCH] Open recipes from overview in new tab for mobile

---
 .../Domain/Recipe/RecipeCardMobile.vue        | 221 +++++++++---------
 1 file changed, 116 insertions(+), 105 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeCardMobile.vue b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
index c6c0cdbec..6d143adb3 100644
--- a/frontend/components/Domain/Recipe/RecipeCardMobile.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardMobile.vue
@@ -7,116 +7,127 @@
         :style="{ cursor }"
         hover
         height="100%"
-        :to="$attrs.selected ? undefined : recipeRoute"
         @click="$emit('selected')"
       >
-        <v-img
-          v-if="vertical"
-          class="rounded-sm"
-          cover
+        <a
+          :href="recipeRoute"
+          target="_blank"
+          rel="noopener noreferrer"
+          style="
+           text-decoration: none;
+           color: inherit;
+           display: block;
+           height: 100%;
+           "
         >
-          <RecipeCardImage
-            :icon-size="100"
-            :slug="slug"
-            :recipe-id="recipeId"
-            size="small"
-            :image-version="image"
-            :height="height"
-          />
-        </v-img>
-        <v-list-item
-          lines="two"
-          class="py-0"
-          :class="vertical ? 'px-2' : 'px-0'"
-          item-props
-          height="100%"
-          density="compact"
-        >
-          <template #prepend>
-            <slot
-              v-if="!vertical"
-              name="avatar"
-            >
-              <RecipeCardImage
-                :icon-size="100"
-                :slug="slug"
-                :recipe-id="recipeId"
-                :image-version="image"
-                size="small"
-                width="125"
-                :height="height"
-              />
-            </slot>
-          </template>
-          <div class="pl-4 d-flex flex-column justify-space-between align-stretch pr-2">
-            <v-list-item-title class="mt-3 mb-1 text-top text-truncate w-100">
-              {{ name }}
-            </v-list-item-title>
-            <v-list-item-subtitle class="ma-0 text-top">
-              <SafeMarkdown v-if="description" :source="description" />
-              <p v-else>
-                <br>
-                <br>
-                <br>
-              </p>
-            </v-list-item-subtitle>
-            <div
-              class="d-flex flex-nowrap justify-start ma-0 pt-2 pb-0"
-              style="overflow-x: hidden; overflow-y: hidden; white-space: nowrap;"
-            >
-              <RecipeChips
-                :truncate="true"
-                :items="tags"
-                :title="false"
-                :limit="2"
-                small
-                url-prefix="tags"
-                v-bind="$attrs"
-              />
+          <v-img
+            v-if="vertical"
+            class="rounded-sm"
+            cover
+          >
+            <RecipeCardImage
+              :icon-size="100"
+              :slug="slug"
+              :recipe-id="recipeId"
+              size="small"
+              :image-version="image"
+              :height="height"
+            />
+          </v-img>
+          <v-list-item
+            lines="two"
+            class="py-0"
+            :class="vertical ? 'px-2' : 'px-0'"
+            item-props
+            height="100%"
+            density="compact"
+          >
+            <template #prepend>
+              <slot
+                v-if="!vertical"
+                name="avatar"
+              >
+                <RecipeCardImage
+                  :icon-size="100"
+                  :slug="slug"
+                  :recipe-id="recipeId"
+                  :image-version="image"
+                  size="small"
+                  width="125"
+                  :height="height"
+                />
+              </slot>
+            </template>
+            <div class="pl-4 d-flex flex-column justify-space-between align-stretch pr-2">
+              <v-list-item-title class="mt-3 mb-1 text-top text-truncate w-100">
+                {{ name }}
+              </v-list-item-title>
+              <v-list-item-subtitle class="ma-0 text-top">
+                <SafeMarkdown v-if="description" :source="description" />
+                <p v-else>
+                  <br>
+                  <br>
+                  <br>
+                </p>
+              </v-list-item-subtitle>
+              <div
+                class="d-flex flex-nowrap justify-start ma-0 pt-2 pb-0"
+                style="overflow-x: hidden; overflow-y: hidden; white-space: nowrap;"
+              >
+                <RecipeChips
+                  :truncate="true"
+                  :items="tags"
+                  :title="false"
+                  :limit="2"
+                  small
+                  url-prefix="tags"
+                  v-bind="$attrs"
+                />
+              </div>
             </div>
-          </div>
-          <slot name="actions">
-            <v-card-actions class="w-100 my-0 px-1 py-0">
-              <RecipeFavoriteBadge
-                v-if="isOwnGroup && showRecipeContent"
-                :recipe-id="recipeId"
-                show-always
-                class="ma-0 pa-0"
-              />
-              <div v-else class="my-0 px-1 py-0" /> <!-- Empty div to keep the layout consistent -->
-              <RecipeRating
-                v-if="showRecipeContent"
-                :class="[{ 'pb-2': !isOwnGroup }, 'ml-n2']"
-                :value="rating"
-                :recipe-id="recipeId"
-                :slug="slug"
-                small
-              />
+            <slot name="actions">
+              <v-card-actions class="w-100 my-0 px-1 py-0">
+                <RecipeFavoriteBadge
+                  v-if="isOwnGroup && showRecipeContent"
+                  :recipe-id="recipeId"
+                  show-always
+                  class="ma-0 pa-0"
+                />
+                <div v-else class="my-0 px-1 py-0" /> <!-- Empty div to keep the layout consistent -->
+                <RecipeRating
+                  v-if="showRecipeContent"
+                  :class="[{ 'pb-2': !isOwnGroup }, 'ml-n2']"
+                  :value="rating"
+                  :recipe-id="recipeId"
+                  :slug="slug"
+                  small
+                />
 
-              <!-- If we're not logged-in, no items display, so we hide this menu -->
-              <!-- We also add padding to the v-rating above to compensate -->
-              <RecipeContextMenu
-                v-if="isOwnGroup && showRecipeContent"
-                :slug="slug"
-                :menu-icon="$globals.icons.dotsHorizontal"
-                :name="name"
-                :recipe-id="recipeId"
-                class="ml-auto"
-                :use-items="{
-                  delete: false,
-                  edit: false,
-                  download: true,
-                  mealplanner: true,
-                  shoppingList: true,
-                  print: false,
-                  printPreferences: false,
-                  share: true,
-                }"
-                @deleted="$emit('delete', slug)"
-              />
-            </v-card-actions>
-            </slot>
-        </v-list-item>
+                <!-- If we're not logged-in, no items display, so we hide this menu -->
+                <!-- We also add padding to the v-rating above to compensate -->
+                <RecipeContextMenu
+                  v-if="isOwnGroup && showRecipeContent"
+                  :slug="slug"
+                  :menu-icon="$globals.icons.dotsHorizontal"
+                  :name="name"
+                  :recipe-id="recipeId"
+                  class="ml-auto"
+                  :use-items="{
+                    delete: false,
+                    edit: false,
+                    download: true,
+                    mealplanner: true,
+                    shoppingList: true,
+                    print: false,
+                    printPreferences: false,
+                    share: true,
+                  }"
+                  @deleted="$emit('delete', slug)"
+                />
+              </v-card-actions>
+              </slot>
+          </v-list-item>
+        </a>
         <slot />
       </v-card>
     </v-expand-transition>