Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-19 05:09:40 +02:00
Code Issues Releases Activity

feat(frontend): 🚧 CRUD Functionality

Browse source
This commit is contained in:
hay-kot 2021-08-02 22:15:11 -08:00
parent 00a8fdda41
commit afcad2f701
49 changed files with 845 additions and 275 deletions
Download patch file Download diff file Expand all files Collapse all files

68
frontend/components/Domain/Recipe/RecipeCard.vue
View file

@ -1,40 +1,41 @@
<template>
<v-hover v-slot="{ hover }" :open-delay="50">
<v-card
:class="{ 'on-hover': hover }"
:elevation="hover ? 12 : 2"
:to="route ? `/recipe/${slug}` : ''"
min-height="275"
@click="$emit('click')"
>
<RecipeCardImage icon-size="200" :slug="slug" small :image-version="image">
<v-expand-transition v-if="description">
<div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
<v-card-text class="v-card--text-show white--text">
{{ description | truncate(300) }}
</v-card-text>
<v-lazy>
<v-hover v-slot="{ hover }" :open-delay="50">
<v-card
:class="{ 'on-hover': hover }"
:elevation="hover ? 12 : 2"
:to="route ? `/recipe/${slug}` : ''"
min-height="275"
@click="$emit('click')"
>
<RecipeCardImage icon-size="200" :slug="slug" small :image-version="image">
<v-expand-transition v-if="description">
<div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
<v-card-text class="v-card--text-show white--text">
{{ description }}
</v-card-text>
</div>
</v-expand-transition>
</RecipeCardImage>
<v-card-title class="my-n3 mb-n6">
<div class="headerClass">
{{ name }}
</div>
</v-expand-transition>
</RecipeCardImage>
<v-card-title class="my-n3 mb-n6">
<div class="headerClass">
{{ name }}
</div>
</v-card-title>
</v-card-title>
<v-card-actions>
<RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
<RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
<v-spacer></v-spacer>
<RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
<RecipeContextMenu :slug="slug" :name="name" />
</v-card-actions>
</v-card>
</v-hover>
<v-card-actions>
<RecipeFavoriteBadge v-if="loggedIn" :slug="slug" show-always />
<RecipeRating :value="rating" :name="name" :slug="slug" :small="true" />
<v-spacer></v-spacer>
<RecipeChips :truncate="true" :items="tags" :title="false" :limit="2" :small="true" :is-category="false" />
<RecipeContextMenu :slug="slug" :name="name" />
</v-card-actions>
</v-card>
</v-hover>
</v-lazy>
</template>
<script>
import { api } from "@/api";
import RecipeFavoriteBadge from "./RecipeFavoriteBadge";
import RecipeChips from "./RecipeChips";
import RecipeContextMenu from "./RecipeContextMenu";
@ -82,11 +83,6 @@ export default {
return this.$store.getters.getIsLoggedIn;
},
},
methods: {
getImage(slug) {
return api.recipes.recipeSmallImage(slug, this.image);
},
},
};
</script>