mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-20 21:43:36 -07:00
Open recipes from overview in new tab for mobile
This commit is contained in:
Torsten Long
parent
95fa0af28a
commit
02e5188d58
1 changed files with 116 additions and 105 deletions
|
|
@ -7,116 +7,127 @@
|
||||||
:style="{ cursor }"
|
:style="{ cursor }"
|
||||||
hover
|
hover
|
||||||
height="100%"
|
height="100%"
|
||||||
:to="$attrs.selected ? undefined : recipeRoute"
|
|
||||||
@click="$emit('selected')"
|
@click="$emit('selected')"
|
||||||
>
|
>
|
||||||
<v-img
|
<a
|
||||||
v-if="vertical"
|
:href="recipeRoute"
|
||||||
class="rounded-sm"
|
target="_blank"
|
||||||
cover
|
rel="noopener noreferrer"
|
||||||
|
style="
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<RecipeCardImage
|
<v-img
|
||||||
:icon-size="100"
|
v-if="vertical"
|
||||||
:slug="slug"
|
class="rounded-sm"
|
||||||
:recipe-id="recipeId"
|
cover
|
||||||
size="small"
|
>
|
||||||
:image-version="image"
|
<RecipeCardImage
|
||||||
:height="height"
|
:icon-size="100"
|
||||||
/>
|
:slug="slug"
|
||||||
</v-img>
|
:recipe-id="recipeId"
|
||||||
<v-list-item
|
size="small"
|
||||||
lines="two"
|
:image-version="image"
|
||||||
class="py-0"
|
:height="height"
|
||||||
:class="vertical ? 'px-2' : 'px-0'"
|
/>
|
||||||
item-props
|
</v-img>
|
||||||
height="100%"
|
<v-list-item
|
||||||
density="compact"
|
lines="two"
|
||||||
>
|
class="py-0"
|
||||||
<template #prepend>
|
:class="vertical ? 'px-2' : 'px-0'"
|
||||||
<slot
|
item-props
|
||||||
v-if="!vertical"
|
height="100%"
|
||||||
name="avatar"
|
density="compact"
|
||||||
>
|
>
|
||||||
<RecipeCardImage
|
<template #prepend>
|
||||||
:icon-size="100"
|
<slot
|
||||||
:slug="slug"
|
v-if="!vertical"
|
||||||
:recipe-id="recipeId"
|
name="avatar"
|
||||||
:image-version="image"
|
>
|
||||||
size="small"
|
<RecipeCardImage
|
||||||
width="125"
|
:icon-size="100"
|
||||||
:height="height"
|
:slug="slug"
|
||||||
/>
|
:recipe-id="recipeId"
|
||||||
</slot>
|
:image-version="image"
|
||||||
</template>
|
size="small"
|
||||||
<div class="pl-4 d-flex flex-column justify-space-between align-stretch pr-2">
|
width="125"
|
||||||
<v-list-item-title class="mt-3 mb-1 text-top text-truncate w-100">
|
:height="height"
|
||||||
{{ name }}
|
/>
|
||||||
</v-list-item-title>
|
</slot>
|
||||||
<v-list-item-subtitle class="ma-0 text-top">
|
</template>
|
||||||
<SafeMarkdown v-if="description" :source="description" />
|
<div class="pl-4 d-flex flex-column justify-space-between align-stretch pr-2">
|
||||||
<p v-else>
|
<v-list-item-title class="mt-3 mb-1 text-top text-truncate w-100">
|
||||||
<br>
|
{{ name }}
|
||||||
<br>
|
</v-list-item-title>
|
||||||
<br>
|
<v-list-item-subtitle class="ma-0 text-top">
|
||||||
</p>
|
<SafeMarkdown v-if="description" :source="description" />
|
||||||
</v-list-item-subtitle>
|
<p v-else>
|
||||||
<div
|
<br>
|
||||||
class="d-flex flex-nowrap justify-start ma-0 pt-2 pb-0"
|
<br>
|
||||||
style="overflow-x: hidden; overflow-y: hidden; white-space: nowrap;"
|
<br>
|
||||||
>
|
</p>
|
||||||
<RecipeChips
|
</v-list-item-subtitle>
|
||||||
:truncate="true"
|
<div
|
||||||
:items="tags"
|
class="d-flex flex-nowrap justify-start ma-0 pt-2 pb-0"
|
||||||
:title="false"
|
style="overflow-x: hidden; overflow-y: hidden; white-space: nowrap;"
|
||||||
:limit="2"
|
>
|
||||||
small
|
<RecipeChips
|
||||||
url-prefix="tags"
|
:truncate="true"
|
||||||
v-bind="$attrs"
|
:items="tags"
|
||||||
/>
|
:title="false"
|
||||||
|
:limit="2"
|
||||||
|
small
|
||||||
|
url-prefix="tags"
|
||||||
|
v-bind="$attrs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<slot name="actions">
|
||||||
<slot name="actions">
|
<v-card-actions class="w-100 my-0 px-1 py-0">
|
||||||
<v-card-actions class="w-100 my-0 px-1 py-0">
|
<RecipeFavoriteBadge
|
||||||
<RecipeFavoriteBadge
|
v-if="isOwnGroup && showRecipeContent"
|
||||||
v-if="isOwnGroup && showRecipeContent"
|
:recipe-id="recipeId"
|
||||||
:recipe-id="recipeId"
|
show-always
|
||||||
show-always
|
class="ma-0 pa-0"
|
||||||
class="ma-0 pa-0"
|
/>
|
||||||
/>
|
<div v-else class="my-0 px-1 py-0" /> <!-- Empty div to keep the layout consistent -->
|
||||||
<div v-else class="my-0 px-1 py-0" /> <!-- Empty div to keep the layout consistent -->
|
<RecipeRating
|
||||||
<RecipeRating
|
v-if="showRecipeContent"
|
||||||
v-if="showRecipeContent"
|
:class="[{ 'pb-2': !isOwnGroup }, 'ml-n2']"
|
||||||
:class="[{ 'pb-2': !isOwnGroup }, 'ml-n2']"
|
:value="rating"
|
||||||
:value="rating"
|
:recipe-id="recipeId"
|
||||||
:recipe-id="recipeId"
|
:slug="slug"
|
||||||
:slug="slug"
|
small
|
||||||
small
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<!-- If we're not logged-in, no items display, so we hide this menu -->
|
<!-- 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 -->
|
<!-- We also add padding to the v-rating above to compensate -->
|
||||||
<RecipeContextMenu
|
<RecipeContextMenu
|
||||||
v-if="isOwnGroup && showRecipeContent"
|
v-if="isOwnGroup && showRecipeContent"
|
||||||
:slug="slug"
|
:slug="slug"
|
||||||
:menu-icon="$globals.icons.dotsHorizontal"
|
:menu-icon="$globals.icons.dotsHorizontal"
|
||||||
:name="name"
|
:name="name"
|
||||||
:recipe-id="recipeId"
|
:recipe-id="recipeId"
|
||||||
class="ml-auto"
|
class="ml-auto"
|
||||||
:use-items="{
|
:use-items="{
|
||||||
delete: false,
|
delete: false,
|
||||||
edit: false,
|
edit: false,
|
||||||
download: true,
|
download: true,
|
||||||
mealplanner: true,
|
mealplanner: true,
|
||||||
shoppingList: true,
|
shoppingList: true,
|
||||||
print: false,
|
print: false,
|
||||||
printPreferences: false,
|
printPreferences: false,
|
||||||
share: true,
|
share: true,
|
||||||
}"
|
}"
|
||||||
@deleted="$emit('delete', slug)"
|
@deleted="$emit('delete', slug)"
|
||||||
/>
|
/>
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
</slot>
|
</slot>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
</a>
|
||||||
<slot />
|
<slot />
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-expand-transition>
|
</v-expand-transition>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue