From f32fcd6e1159aa903f7c2ae93fdd8461355f308a Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 12 May 2025 21:19:22 +0200
Subject: [PATCH] improved recipe view on large screens

---
 vue3/src/components/display/RecipeView.vue | 153 ++++++++++++++-------
 1 file changed, 105 insertions(+), 48 deletions(-)

diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
index 53e1fd2ce..fc690420b 100644
--- a/vue3/src/components/display/RecipeView.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -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>