mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-03 05:11:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

number scaler

Browse Source
This commit is contained in:
vabene1111
2024-03-23 21:57:42 +01:00
parent 9d4c26fd29
commit bd317858bf
5 changed files with 71 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
vue3/src/components/display/RecipeView.vue
View File

@@ -1,61 +1,65 @@
<template>
<template v-if="recipe.name != undefined">
<v-card class="mt-md-4">
<v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
<KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
</v-img>
<v-card class="mt-md-4">
<v-img max-height="25vh" cover lazy :src="recipe.image" v-if="recipe.image != undefined" class="align-end">
<KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></KeywordsComponent>
</v-img>
<v-card>
<v-sheet class="d-flex align-center">
<span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
</v-sheet>
</v-card>
<!-- <v-card class="mt-1">-->
<!-- <v-sheet class="d-flex ">-->
<!-- <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
<!-- <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
<!-- </v-sheet>-->
<!-- </v-card>-->
<v-card>
<v-sheet class="d-flex align-center">
<span class="ps-2 text-h5 text-truncate flex-grow-1">{{ recipe.name }}</span>
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
</v-sheet>
</v-card>
<!-- <v-card class="mt-1">-->
<!-- <v-sheet class="d-flex ">-->
<!-- <span class="ps-2 text-h5 flex-grow-1">{{ recipe.name }}</span>-->
<!-- <recipe-context-menu :recipe="recipe"></recipe-context-menu>-->
<!-- </v-sheet>-->
<!-- </v-card>-->
<v-card class="mt-1">
<v-container>
<v-row class="text-center text-body-2">
<v-col class="pt-1 pb-1">
<i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
<div class="text-grey">Working Time</div>
</v-col>
<v-col class="pt-1 pb-1">
<div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
<div class="text-grey">Waiting Time</div>
</v-col>
<v-col class="pt-1 pb-1">
<NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
<template #activator>
<div class="cursor-pointer">
<i class="fas fa-calendar-alt"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
</div>
</template>
</NumberScalerDialog>
</v-col>
</v-row>
</v-container>
</v-card>
</v-card>
<v-card class="mt-1" v-if="recipe.steps.length > 1">
<StepsOverview :steps="recipe.steps"></StepsOverview>
</v-card>
<v-card class="mt-1">
<v-container>
<v-row class="text-center text-body-2">
<v-col class="pt-1 pb-1">
<i class="fas fa-cogs"></i> {{ recipe.workingTime }} min<br/>
<div class="text-grey">Working Time</div>
</v-col>
<v-col class="pt-1 pb-1">
<div><i class="fas fa-hourglass-half"></i> {{ recipe.waitingTime }} min</div>
<div class="text-grey">Waiting Time</div>
</v-col>
<v-col class="pt-1 pb-1">
<NumberScalerDialog :number="servings" @change="servings = $event.number" title="Servings">
<template #activator>
<i class="fas fa-calendar-alt"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="recipe?.servingsText">{{ recipe.servingsText }}</span><span v-else>Servings</span></div>
</template>
</NumberScalerDialog>
</v-col>
</v-row>
</v-container>
</v-card>
<v-card class="mt-1" v-if="recipe.steps.length > 1">
<StepsOverview :steps="recipe.steps"></StepsOverview>
</v-card>
<v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
<Step :step="s" :ingredient_factor="ingredient_factor"></Step>
</v-card>
<!-- <RecipeActivity :recipe="recipe"></RecipeActivity>-->
<v-card class="mt-1" v-for="s in recipe.steps" :key="s.id">
<Step :step="s" :ingredient_factor="ingredient_factor"></Step>
</v-card>
<!-- <RecipeActivity :recipe="recipe"></RecipeActivity>-->
</template>
</template>
<script lang="ts">