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

recipe view tweaks

Browse Source
This commit is contained in:
vabene1111
2024-12-19 20:03:52 +01:00
parent a34fddc866
commit b9e5126ab4
37 changed files with 94 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
vue3/src/components/display/IngredientsTable.vue
View File

@@ -2,7 +2,8 @@
<v-table density="compact" v-if="props.ingredients.length > 0">
<tbody>
<IngredientsTableRow v-for="i in props.ingredients" :ingredient="i" :key="i.id" :show-notes="props.showNotes" :draggable="props.draggable"></IngredientsTableRow>
<ingredients-table-row v-for="i in props.ingredients" :ingredient="i" :key="i.id" :show-notes="props.showNotes"
:ingredient-factor="ingredientFactor"></ingredients-table-row>
</tbody>
</v-table>
@@ -23,8 +24,9 @@ const props = defineProps({
type: Boolean,
default: true
},
draggable: {
type: Boolean,
ingredientFactor: {
type: Number,
required: true,
},
})

10
vue3/src/components/display/IngredientsTableRow.vue
View File

@@ -4,7 +4,7 @@
<td colspan="4"><b>{{ props.ingredient.note }}</b></td>
</template>
<template v-else>
<td>{{ props.ingredient.amount }}</td>
<td>{{ props.ingredient.amount * props.ingredientFactor }}</td>
<td><span v-if="props.ingredient.unit != null">{{ props.ingredient.unit.name }}</span></td>
<td><span v-if="props.ingredient.food != null">{{ props.ingredient.food.name }}</span></td>
<td v-if="props.showNotes">
@@ -12,9 +12,6 @@
<v-tooltip v-model="showTooltip" activator="parent" location="start">{{ props.ingredient.note }}</v-tooltip>
</v-icon>
</td>
<td v-if="props.draggable" >
<v-icon icon="$dragHandle" class="drag-handle cursor-move"></v-icon>
</td>
</template>
</tr>
@@ -33,8 +30,9 @@ const props = defineProps({
type: Boolean,
default: true
},
draggable: {
type: Boolean,
ingredientFactor: {
type: Number,
required: true,
},
})

32
vue3/src/components/display/RecipeActivity.vue
View File

@@ -1,24 +1,32 @@
<template>
<v-card class="mt-1">
<v-card-title>Activity</v-card-title>
<v-card-title>{{ $t('Activity') }}</v-card-title>
<v-card-text>
<v-card v-for="c in cookLogs" :key="c.id" class="mt-1">
<v-card-text>
<v-rating density="comfortable" size="x-small" color="tandoor" v-model="c.rating"></v-rating>
<br/>
<span v-if="c.servings != null && c.servings > 0">{{ c.servings }} <span v-if="recipe.servingsText != ''">{{ recipe.servingsText }}</span><span v-else>Servings</span></span> <br/>
<v-list>
<v-list-item v-for="c in cookLogs" :key="c.id">
<template #prepend>
<v-avatar color="primary">V</v-avatar>
</template>
<v-list-item-title class="font-weight-bold">{{ c.createdBy.displayName }}
<v-rating density="comfortable" size="x-small" color="tandoor" class="float-right" v-model="c.rating"></v-rating>
</v-list-item-title>
{{ c.comment }}
</v-card-text>
<v-divider></v-divider>
<v-card-subtitle>
{{ DateTime.fromJSDate(c.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }} by {{ c.createdBy.displayName }}
</v-card-subtitle>
</v-card>
<p v-if="c.servings != null && c.servings > 0">
{{ c.servings }}
<span v-if="recipe.servingsText != ''">{{ recipe.servingsText }}</span>
<span v-else-if="c.servings == 1">{{ $t('Serving') }}</span>
<span v-else>{{ $t('Servings') }}</span>
</p>
<p class="text-disabled">
{{ DateTime.fromJSDate(c.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
</p>
</v-list-item>
</v-list>
</v-card-text>
</v-card>

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

@@ -9,14 +9,16 @@
>
<template #overlay>
<v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ props.recipe.createdBy }}</v-chip>
<KeywordsComponent variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></KeywordsComponent>
<keywords-component variant="flat" class="ms-1 mb-2" :keywords="props.recipe.keywords"></keywords-component>
</template>
</recipe-image>
<v-card>
<v-sheet class="d-flex align-center">
<span class="ps-2 text-h5 flex-grow-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">{{ props.recipe.name }}</span>
<span class="ps-2 text-h5 flex-grow-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
{{ props.recipe.name }}
</span>
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
</v-sheet>
</v-card>
@@ -34,25 +36,26 @@
<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-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>Servings</span></div>
</div>
</template>
</NumberScalerDialog>
<div class="cursor-pointer">
<i class="fas fa-sort-numeric-up fa-fw mr-1"></i> {{ servings }} <br/>
<div class="text-grey"><span v-if="props.recipe?.servingsText">{{ props.recipe.servingsText }}</span><span v-else>{{ $t('Servings') }}</span></div>
<number-scaler-dialog :number="servings" @confirm="(s: number) => {servings = s}" title="Servings">
</number-scaler-dialog>
</div>
</v-col>
</v-row>
</v-container>
</v-card>
<v-card class="mt-1" v-if="props.recipe.steps.length > 1">
<StepsOverview :steps="props.recipe.steps"></StepsOverview>
<steps-overview :steps="props.recipe.steps"></steps-overview>
</v-card>
<v-card class="mt-1" v-for="(step, index) in props.recipe.steps" :key="step.id">
<Step :step="step" :step-number="index+1" :ingredient_factor="ingredientFactor"></Step>
<step :step="step" :step-number="index+1" :ingredientFactor="ingredientFactor"></step>
</v-card>
<recipe-activity :recipe="recipe"></recipe-activity>

27
vue3/src/components/display/Step.vue
View File

@@ -2,23 +2,32 @@
<v-card>
<v-card-title>
<v-row>
<v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>Step {{ props.stepNumber }}</span></v-col>
<v-col><span v-if="props.step.name">{{ props.step.name }}</span><span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span></v-col>
<v-col class="text-right">
<v-btn-group density="compact" variant="tonal">
<v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}</v-btn>
<v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw" :class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i></v-btn>
<v-btn size="small" color="info" v-if="props.step.time != undefined && props.step.time > 0" @click="timerRunning = true"><i
class="fas fa-stopwatch mr-1 fa-fw"></i> {{ props.step.time }}
</v-btn>
<v-btn size="small" color="success" v-if="hasDetails" @click="stepChecked = !stepChecked"><i class="fas fa-fw"
:class="{'fa-check': !stepChecked, 'fa-times': stepChecked}"></i>
</v-btn>
</v-btn-group>
</v-col>
</v-row>
</v-card-title>
<template v-if="!stepChecked">
<timer :seconds="props.step.time != undefined ? props.step.time*60 : 0" @stop="timerRunning = false" v-if="timerRunning"></timer>
<IngredientsTable :ingredients="props.step.ingredients"></IngredientsTable>
<v-card-text v-if="props.step.instructionsMarkdown.length > 0">
<instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredient_factor"></instructions>
<v-card-text>
<v-row>
<v-col cols="12" md="6" v-if="props.step?.ingredients.length > 0">
<ingredients-table :ingredients="props.step.ingredients" :ingredient-factor="ingredientFactor"></ingredients-table>
</v-col>
<v-col cols="12" md="6">
<instructions :instructions_html="props.step.instructionsMarkdown" :ingredient_factor="ingredientFactor"></instructions>
</v-col>
</v-row>
</v-card-text>
</template>
</v-card>
@@ -42,7 +51,7 @@ const props = defineProps({
required: false,
default: 1
},
ingredient_factor: {
ingredientFactor: {
type: Number,
required: true,
},

1
vue3/src/locales/ar.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "",
"AddAll": "",
"AddFoodToShopping": "",

1
vue3/src/locales/bg.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "Добави",
"AddAll": "",
"AddFoodToShopping": "Добавете {food} към списъка си за пазаруване",

1
vue3/src/locales/ca.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "",
"Actions": "",
"Activity": "",
"Add": "",
"AddAll": "",
"AddFoodToShopping": "",

1
vue3/src/locales/cs.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Účet",
"Actions": "",
"Activity": "",
"Add": "Přidat",
"AddAll": "",
"AddFoodToShopping": "Přidat {food} na váš nákupní seznam",

1
vue3/src/locales/da.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Bruger",
"Actions": "",
"Activity": "",
"Add": "Tilføj",
"AddAll": "",
"AddFoodToShopping": "Tilføj {food} til indkøbsliste",

1
vue3/src/locales/de.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "Zugriffstoken",
"Account": "Konto",
"Actions": "Aktionen",
"Activity": "Aktivität",
"Add": "Hinzufügen",
"AddAll": "Alle Hinzufügen",
"AddFoodToShopping": "Fügen Sie {food} zur Einkaufsliste hinzu",

1
vue3/src/locales/el.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Λογαριασμός",
"Actions": "",
"Activity": "",
"Add": "Προσθήκη",
"AddAll": "",
"AddFoodToShopping": "Προσθήκη του φαγητού {food} στη λίστα αγορών σας",

1
vue3/src/locales/en.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "Access Token",
"Account": "Account",
"Actions": "Actions",
"Activity": "Activity",
"Add": "Add",
"AddAll": "Add all",
"AddFoodToShopping": "Add {food} to your shopping list",

1
vue3/src/locales/es.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Cuenta",
"Actions": "",
"Activity": "",
"Add": "Añadir",
"AddAll": "",
"AddFoodToShopping": "Añadir {food} a la lista de la compra",

1
vue3/src/locales/fi.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "Lisää",
"AddAll": "",
"AddMany": "",

1
vue3/src/locales/fr.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Compte",
"Actions": "",
"Activity": "",
"Add": "Ajouter",
"AddAll": "",
"AddFoodToShopping": "Ajouter l’aliment {food} à votre liste de courses",

1
vue3/src/locales/he.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "חשבון",
"Actions": "",
"Activity": "",
"Add": "הוספה",
"AddAll": "",
"AddFoodToShopping": "הוסף {מזון} לרשימת הקניות",

1
vue3/src/locales/hu.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Fiók",
"Actions": "",
"Activity": "",
"Add": "Hozzáadás",
"AddAll": "",
"AddFoodToShopping": "{food} hozzáadása bevásárlólistához",

1
vue3/src/locales/hy.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "",
"AddAll": "",
"AddMany": "",

1
vue3/src/locales/id.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "",
"Actions": "",
"Activity": "",
"Add": "Tambahkan",
"AddAll": "",
"AddFoodToShopping": "",

1
vue3/src/locales/is.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "",
"Actions": "",
"Activity": "",
"Add": "",
"AddAll": "",
"AddFoodToShopping": "",

1
vue3/src/locales/it.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Account",
"Actions": "",
"Activity": "",
"Add": "Aggiungi",
"AddAll": "",
"AddFoodToShopping": "Aggiungi {food} alla tua lista della spesa",

1
vue3/src/locales/lt.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "",
"Actions": "",
"Activity": "",
"Add": "",
"AddAll": "",
"AddFoodToShopping": "",

1
vue3/src/locales/nb_NO.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "",
"Actions": "",
"Activity": "",
"Add": "Legg til",
"AddAll": "",
"AddFoodToShopping": "Legg til {food] i handlelisten din",

1
vue3/src/locales/nl.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Account",
"Actions": "",
"Activity": "",
"Add": "Voeg toe",
"AddAll": "",
"AddFoodToShopping": "Voeg {food} toe aan je boodschappenlijst",

1
vue3/src/locales/pl.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Konto",
"Actions": "",
"Activity": "",
"Add": "Dodaj",
"AddAll": "",
"AddFoodToShopping": "Dodaj {food} do swojej listy zakupów",

1
vue3/src/locales/pt.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "Adicionar",
"AddAll": "",
"AddFoodToShopping": "Adicionar {food} à sua lista de compras",

1
vue3/src/locales/pt_BR.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Conta",
"Actions": "",
"Activity": "",
"Add": "Adicionar",
"AddAll": "",
"AddFoodToShopping": "Incluir {food} na sua lista de compras",

1
vue3/src/locales/ro.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Cont",
"Actions": "",
"Activity": "",
"Add": "Adaugă",
"AddAll": "",
"AddFoodToShopping": "Adăugă {food} în lista de cumpărături",

1
vue3/src/locales/ru.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "Добавить",
"AddAll": "",
"AddFoodToShopping": "Добавить {food} в ваш список покупок",

1
vue3/src/locales/sl.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "Dodaj",
"AddAll": "",
"AddFoodToShopping": "Dodaj {food} v nakupovalni listek",

1
vue3/src/locales/sv.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Konto",
"Actions": "",
"Activity": "",
"Add": "Lägg till",
"AddAll": "",
"AddFoodToShopping": "Lägg till {food} på din inköpslista",

1
vue3/src/locales/tr.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "Hesap",
"Actions": "",
"Activity": "",
"Add": "Ekle",
"AddAll": "",
"AddFoodToShopping": "{food}'ı alışveriş listenize ekleyin",

1
vue3/src/locales/uk.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "Додати",
"AddAll": "",
"AddFoodToShopping": "Додати {food} до вашого списку покупок",

1
vue3/src/locales/zh_Hans.json
View File

@@ -3,6 +3,7 @@
"Access_Token": "",
"Account": "账户",
"Actions": "",
"Activity": "",
"Add": "添加",
"AddAll": "",
"AddFoodToShopping": "添加 {food} 到购物清单",

1
vue3/src/locales/zh_Hant.json
View File

@@ -1,6 +1,7 @@
{
"Access_Token": "",
"Actions": "",
"Activity": "",
"Add": "",
"AddAll": "",
"AddMany": "",

2
vue3/src/pages/RecipeViewPage.vue
View File

@@ -1,6 +1,6 @@
<template>
<v-container :class="{'ps-0 pe-0 pt-0': mobile}">
<RecipeView :recipe="recipe"></RecipeView>
<recipe-view :recipe="recipe"></recipe-view>
</v-container>
</template>