mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2025-12-24 02:39:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

playing around with the recipe card

Browse Source
This commit is contained in:
vabene1111
2023-02-16 19:10:19 +01:00
parent c5ce197ed7
commit 900c28caba
2 changed files with 75 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
vue/src/apps/TestView/TestView.vue
View File

@@ -2,9 +2,43 @@
<div id="app">
DIV
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-12">
<b-img style="height: 15vh; width: 25vw; object-fit: cover"
src="http://127.0.0.1:8000/media/recipes/40527e70-82f4-4062-93cc-5d091f68279b_119.png"
rounded></b-img>
</div>
</div>
<div class="row mt-3">
<div class="col-2">
<div class="dot">
75%
</div>
</div>
<div class="col-9">
<h6><b>Zwiebelkuchen mit einem wirklich langen namen und einer ewigen Beschreibung</b></h6>
<span class="text-muted text-small">📥 Import 1 - 🍽 Hauptgang - 🔥 Backen</span>
</div>
<div class="col-1 align-items-end">
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
</div>
</div>
<hr class="mt-3"/>
Recipe Card
<b-checkbox v-model="recipe_detailed"></b-checkbox>
<div class="row">
<div class="row ">
<div class="col-md-3">
<recipe-card
v-if="recipe !== undefined"
@@ -28,6 +62,7 @@
</div>
</div>
</div>
</template>
@@ -67,4 +102,13 @@ export default {
}
</script>
<style></style>
<style>
.dot {
height: 40px;
width: 40px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
</style>

51
vue/src/components/RecipeCard.vue
View File

@@ -28,7 +28,8 @@
class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1"
v-if="show_context_menu">
<a>
<recipe-context-menu :recipe="recipe" class="float-right" :disabled_options="context_disabled_options"
<recipe-context-menu :recipe="recipe" class="float-right"
:disabled_options="context_disabled_options"
v-if="recipe !== null"></recipe-context-menu>
</a>
</div>
@@ -47,7 +48,7 @@
<b-card-body class="p-4">
<h6>
<a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null">
<a :href="this.recipe.id !== undefined ? resolveDjangoUrl('view_recipe', this.recipe.id) : null" class="text-body font-weight-bold">
<template v-if="recipe !== null">{{ recipe.name }}</template>
<template v-else>{{ meal_plan.title }}</template>
</a>
@@ -55,15 +56,8 @@
<b-card-text style="text-overflow: ellipsis">
<template v-if="recipe !== null">
<recipe-rating :recipe="recipe"></recipe-rating>
<template v-if="recipe.description !== null && recipe.description !== undefined">
<span v-if="recipe.description.length > text_length">
{{ recipe.description.substr(0, text_length) + "\u2026" }}
</span>
<span v-if="recipe.description.length <= text_length">
{{ recipe.description }}
</span>
</template>
<p class="mt-1">
<last-cooked :recipe="recipe"></last-cooked>
<keywords-component :recipe="recipe"
@@ -75,15 +69,15 @@
<h6 class="card-title"><i class="fas fa-pepper-hot"></i> {{ $t("Ingredients") }}
</h6>
<ingredients-card
:steps="recipe.steps"
:header="false"
:detailed="false"
:servings="recipe.servings"
:use_plural="use_plural" />
</div>
</div>
</transition>
<ingredients-card
:steps="recipe.steps"
:header="false"
:detailed="false"
:servings="recipe.servings"
:use_plural="use_plural"/>
</div>
</div>
</transition>
<b-badge pill variant="info" v-if="!recipe.internal">{{ $t("External") }}</b-badge>
</template>
@@ -98,6 +92,20 @@
</div>
<!--
<recipe-rating :recipe="recipe"></recipe-rating>
<template v-if="recipe.description !== null && recipe.description !== undefined">
<span v-if="recipe.description.length > text_length">
{{ recipe.description.substr(0, text_length) + "\u2026" }}
</span>
<span v-if="recipe.description.length <= text_length">
{{ recipe.description }}
</span>
</template>
-->
</template>
<script>
@@ -117,7 +125,6 @@ export default {
mixins: [ResolveUrlMixin],
components: {
LastCooked,
RecipeRating,
KeywordsComponent,
"recipe-context-menu": RecipeContextMenu,
IngredientsCard
@@ -125,7 +132,7 @@ export default {
props: {
recipe: Object,
meal_plan: Object,
use_plural: { type: Boolean, default: false},
use_plural: {type: Boolean, default: false},
footer_text: String,
footer_icon: String,
detailed: {type: Boolean, default: true},