mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 04:10:06 -05:00
improved recipe view on large screens
This commit is contained in:
vabene1111
@@ -9,63 +9,117 @@
|
||||
</template>
|
||||
|
||||
<template v-if="recipe.name != undefined">
|
||||
<v-card class="mt-md-4 rounded-0">
|
||||
<recipe-image
|
||||
max-height="25vh"
|
||||
:recipe="recipe"
|
||||
v-if="recipe.internal"
|
||||
>
|
||||
<template #overlay>
|
||||
<v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ recipe.createdBy.displayName }}</v-chip>
|
||||
<keywords-component variant="flat" class="ms-1 mb-2" :keywords="recipe.keywords"></keywords-component>
|
||||
</template>
|
||||
</recipe-image>
|
||||
|
||||
<template class="d-block d-lg-none">
|
||||
|
||||
<v-card>
|
||||
<v-sheet class="d-flex align-center">
|
||||
<v-card class="rounded-0">
|
||||
<recipe-image
|
||||
max-height="25vh"
|
||||
:recipe="recipe"
|
||||
v-if="recipe.internal"
|
||||
>
|
||||
<template #overlay>
|
||||
<v-chip class="ms-2" color="primary" variant="flat" size="x-small">by {{ recipe.createdBy.displayName }}</v-chip>
|
||||
<keywords-component variant="flat" class="ms-1 mb-2" :keywords="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 pa-1" :class="{'text-truncate': !showFullRecipeName}" @click="showFullRecipeName = !showFullRecipeName">
|
||||
{{ recipe.name }}
|
||||
</span>
|
||||
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
|
||||
</v-sheet>
|
||||
<v-sheet class="ps-2 text-disabled">
|
||||
{{ recipe.description }}
|
||||
</v-sheet>
|
||||
<recipe-context-menu :recipe="recipe"></recipe-context-menu>
|
||||
</v-sheet>
|
||||
<v-sheet class="ps-2 text-disabled">
|
||||
{{ recipe.description }}
|
||||
</v-sheet>
|
||||
</v-card>
|
||||
</v-card>
|
||||
</v-card>
|
||||
|
||||
<template v-if="recipe.internal">
|
||||
<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 fa-fw mr-1"></i> {{ recipe.workingTime }} min<br/>
|
||||
<div class="text-grey">{{ $t('WorkingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} min</div>
|
||||
<div class="text-grey">{{ $t('WaitingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
|
||||
<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="recipe.servingsText">{{ 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>
|
||||
</template>
|
||||
</template>
|
||||
<template class="d-none d-lg-block">
|
||||
<v-row dense>
|
||||
<v-col cols="8">
|
||||
<recipe-image
|
||||
:rounded="true"
|
||||
max-height="40vh"
|
||||
:recipe="recipe"
|
||||
v-if="recipe.internal">
|
||||
</recipe-image>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<v-card class="h-100 d-flex flex-column">
|
||||
<v-card-text class="flex-grow-1">
|
||||
<div class="d-flex">
|
||||
<h1 class="flex-column flex-grow-1">{{ recipe.name }}</h1>
|
||||
<recipe-context-menu :recipe="recipe" class="flex-column mb-auto mt-2 float-right"></recipe-context-menu>
|
||||
</div>
|
||||
<p>
|
||||
{{ $t('created_by') }} {{ recipe.createdBy.displayName }} ({{ DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATE_SHORT) }})
|
||||
</p>
|
||||
<p>
|
||||
<i>{{ recipe.description }}</i>
|
||||
</p>
|
||||
|
||||
<keywords-component variant="flat" class="mt-4" :keywords="recipe.keywords"></keywords-component>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
<v-row class="text-center text-body-2 mb-1 flex-grow-0">
|
||||
<v-col >
|
||||
<i class="fas fa-cogs fa-fw mr-1"></i> {{ recipe.workingTime }} {{ $t('min') }}<br/>
|
||||
<div class="text-grey">{{ $t('WorkingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col >
|
||||
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} {{ $t('min') }}</div>
|
||||
<div class="text-grey">{{ $t('WaitingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col >
|
||||
<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="recipe.servingsText">{{ 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-card>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<template v-if="!recipe.internal">
|
||||
<external-recipe-viewer :recipe="recipe"></external-recipe-viewer>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<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 fa-fw mr-1"></i> {{ recipe.workingTime }} min<br/>
|
||||
<div class="text-grey">{{ $t('WorkingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
<div><i class="fas fa-hourglass-half fa-fw mr-1"></i> {{ recipe.waitingTime }} min</div>
|
||||
<div class="text-grey">{{ $t('WaitingTime') }}</div>
|
||||
</v-col>
|
||||
<v-col class="pt-1 pb-1">
|
||||
|
||||
<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="recipe.servingsText">{{ 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="recipe.steps.length > 1">
|
||||
<steps-overview :steps="recipe.steps" :ingredient-factor="ingredientFactor"></steps-overview>
|
||||
</v-card>
|
||||
@@ -75,12 +129,16 @@
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
|
||||
<property-view v-model="recipe" :servings="servings" v-if="recipe.internal"></property-view>
|
||||
|
||||
<v-expansion-panels class="mt-2">
|
||||
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title><v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon> {{ $t('Information') }}</v-expansion-panel-title>
|
||||
<v-expansion-panel-title>
|
||||
<v-icon icon="fa-solid fa-circle-info" class="me-2"></v-icon>
|
||||
{{ $t('Information') }}
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<v-row>
|
||||
<v-col cols="12" md="3">
|
||||
@@ -125,7 +183,6 @@
|
||||
</v-expansion-panels>
|
||||
|
||||
|
||||
|
||||
<recipe-activity :recipe="recipe"></recipe-activity>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user