From d1a69dac9082112645d382f80e6fd2f5ec375566 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Thu, 5 Jun 2025 17:29:08 +0200
Subject: [PATCH] added print mode to recipes

---
 vue3/src/apps/tandoor/Tandoor.vue             | 162 +++++++++---------
 .../components/display/IngredientsTable.vue   |  95 +++++-----
 vue3/src/components/display/PropertyView.vue  |   6 +-
 .../src/components/display/RecipeActivity.vue |   6 +-
 vue3/src/components/display/RecipeView.vue    |  99 +++++------
 vue3/src/components/display/StepView.vue      |   2 +-
 .../components/inputs/GlobalSearchDialog.vue  |   6 +-
 .../components/inputs/RecipeContextMenu.vue   |  13 +-
 8 files changed, 201 insertions(+), 188 deletions(-)

diff --git a/vue3/src/apps/tandoor/Tandoor.vue b/vue3/src/apps/tandoor/Tandoor.vue
index 1c4e79e3b..affafaa7a 100644
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/vue3/src/apps/tandoor/Tandoor.vue
@@ -1,93 +1,97 @@
 <template>
     <v-app>
-         <v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated">
+        <v-app-bar color="tandoor" flat density="comfortable" v-if="!useUserPreferenceStore().isAuthenticated">
 
-         </v-app-bar>
+        </v-app-bar>
         <v-app-bar :color="useUserPreferenceStore().userSettings.navBgColor" flat density="comfortable" v-if="useUserPreferenceStore().isAuthenticated">
             <router-link :to="{ name: 'StartPage', params: {} }">
                 <v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2" v-if="useUserPreferenceStore().userSettings.navShowLogo"></v-img>
             </router-link>
-            <v-spacer></v-spacer>
-            <global-search-dialog></global-search-dialog>
-            <v-btn icon="$add">
-                <v-icon icon="$add" class="fa-fw"></v-icon>
-                <v-menu activator="parent">
-                    <v-list>
-                        <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
-                        <v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
-                    </v-list>
-                </v-menu>
-            </v-btn>
 
-            <v-avatar color="primary" class="me-2 cursor-pointer">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
-                <v-menu activator="parent">
 
-                    <v-list density="compact">
-                        <v-list-item class="mb-1">
-                            <template #prepend>
-                                <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
-                            </template>
-                            <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
-                            <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
-                        </v-list-item>
-                        <v-divider></v-divider>
-                        <v-list-item :to="{ name: 'SettingsPage', params: {} }">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-sliders"></v-icon>
-                            </template>
-                            {{ $t('Settings') }}
-                        </v-list-item>
-                        <v-list-item :to="{ name: 'ModelListPage', params: {model: 'food'} }">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-folder-tree"></v-icon>
-                            </template>
-                            {{ $t('Database') }}
-                        </v-list-item>
-                        <v-list-item :to="{ name: 'HelpPage' }">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-question"></v-icon>
-                            </template>
-                            {{ $t('Help') }}
-                        </v-list-item>
-                        <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
-                        <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
-                        <template v-if="useUserPreferenceStore().spaces.length > 1">
-                            <v-divider></v-divider>
-                            <v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
-                            <v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
+                <v-spacer></v-spacer>
+                <global-search-dialog ></global-search-dialog>
+                <v-btn icon="$add" class="d-print-none">
+                    <v-icon icon="$add" class="fa-fw"></v-icon>
+                    <v-menu activator="parent">
+                        <v-list>
+                            <v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>
+                            <v-list-item prepend-icon="fa-solid fa-globe" :to="{ name: 'RecipeImportPage', params: {} }">{{ $t('Import Recipe') }}</v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-btn>
+
+                <v-avatar color="primary" class="me-2 cursor-pointer d-print-none">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}
+                    <v-menu activator="parent">
+
+                        <v-list density="compact">
+                            <v-list-item class="mb-1">
                                 <template #prepend>
-                                    <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
-                                    <v-icon icon="fa-solid fa-circle" v-else></v-icon>
+                                    <v-avatar color="primary">{{ useUserPreferenceStore().userSettings.user.displayName.charAt(0) }}</v-avatar>
                                 </template>
-                                {{ s.name }}
+                                <v-list-item-title>{{ useUserPreferenceStore().userSettings.user.displayName }}</v-list-item-title>
+                                <v-list-item-subtitle>{{ useUserPreferenceStore().activeSpace.name }}</v-list-item-subtitle>
                             </v-list-item>
-                        </template>
+                            <v-divider></v-divider>
+                            <v-list-item :to="{ name: 'SettingsPage', params: {} }">
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-sliders"></v-icon>
+                                </template>
+                                {{ $t('Settings') }}
+                            </v-list-item>
+                            <v-list-item :to="{ name: 'ModelListPage', params: {model: 'food'} }">
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-folder-tree"></v-icon>
+                                </template>
+                                {{ $t('Database') }}
+                            </v-list-item>
+                            <v-list-item :to="{ name: 'HelpPage' }">
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-question"></v-icon>
+                                </template>
+                                {{ $t('Help') }}
+                            </v-list-item>
+                            <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-user-shield"></v-icon></template>Admin</v-list-item>-->
+                            <!--                        <v-list-item><template #prepend><v-icon icon="fa-solid fa-question"></v-icon></template>Help</v-list-item>-->
+                            <template v-if="useUserPreferenceStore().spaces.length > 1">
+                                <v-divider></v-divider>
+                                <v-list-subheader>{{ $t('YourSpaces') }}</v-list-subheader>
+                                <v-list-item v-for="s in useUserPreferenceStore().spaces" :key="s.id" @click="useUserPreferenceStore().switchSpace(s)">
+                                    <template #prepend>
+                                        <v-icon icon="fa-solid fa-circle-dot" v-if="s.id == useUserPreferenceStore().activeSpace.id"></v-icon>
+                                        <v-icon icon="fa-solid fa-circle" v-else></v-icon>
+                                    </template>
+                                    {{ s.name }}
+                                </v-list-item>
+                            </template>
+
+                            <v-divider></v-divider>
+                            <v-list-item link>
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-database"></v-icon>
+                                </template>
+                                {{ $t('Messages') }}
+                                <message-list-dialog></message-list-dialog>
+                            </v-list-item>
+                            <v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-shield"></v-icon>
+                                </template>
+                                {{ $t('Admin') }}
+                            </v-list-item>
+                            <v-list-item :href="getDjangoUrl('accounts/logout')" link>
+                                <template #prepend>
+                                    <v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
+                                </template>
+                                {{ $t('Logout') }}
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
+                </v-avatar>
 
-                        <v-divider></v-divider>
-                        <v-list-item link>
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-database"></v-icon>
-                            </template>
-                            {{ $t('Messages') }}
-                            <message-list-dialog></message-list-dialog>
-                        </v-list-item>
-                        <v-list-item :href="getDjangoUrl('admin')" target="_blank" v-if="useUserPreferenceStore().userSettings.user.isSuperuser">
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-shield"></v-icon>
-                            </template>
-                            {{ $t('Admin') }}
-                        </v-list-item>
-                        <v-list-item :href="getDjangoUrl('accounts/logout')" link>
-                            <template #prepend>
-                                <v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon>
-                            </template>
-                            {{ $t('Logout') }}
-                        </v-list-item>
-                    </v-list>
-                </v-menu>
-            </v-avatar>
         </v-app-bar>
-        <v-app-bar color="info" density="compact" v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.maxRecipes == 10 && useUserPreferenceStore().serverSettings.hosted">
+        <v-app-bar color="info" density="compact"
+                   v-if="useUserPreferenceStore().isAuthenticated && useUserPreferenceStore().activeSpace.maxRecipes == 10 && useUserPreferenceStore().serverSettings.hosted">
             <p class="text-center w-100">
                 {{ $t('HostedFreeVersion') }}
                 <v-btn color="success" variant="flat" href="https://tandoor.dev/manage">{{ $t('UpgradeNow') }}</v-btn>
@@ -110,7 +114,8 @@
             <router-view></router-view>
         </v-main>
 
-        <v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated">
+        <!-- completely hide in print mode because setting d-print-node keeps layout -->
+        <v-navigation-drawer v-if="lgAndUp && useUserPreferenceStore().isAuthenticated && !isPrintMode">
             <v-list nav>
                 <v-list-item :to="{ name: 'SettingsPage', params: {} }">
                     <template #prepend>
@@ -190,10 +195,13 @@ import {useDjangoUrls} from "@/composables/useDjangoUrls";
 import {onMounted, ref} from "vue";
 import {isSpaceAboveLimit} from "@/utils/logic_utils";
 import '@/assets/tandoor_light.css'
+import {useMediaQuery} from "@vueuse/core";
 
 const {lgAndUp} = useDisplay()
 const {getDjangoUrl} = useDjangoUrls()
 
+const isPrintMode = useMediaQuery('print')
+
 onMounted(() => {
     useUserPreferenceStore()
 })
diff --git a/vue3/src/components/display/IngredientsTable.vue b/vue3/src/components/display/IngredientsTable.vue
index 64547c7f8..b65370e9e 100644
--- a/vue3/src/components/display/IngredientsTable.vue
+++ b/vue3/src/components/display/IngredientsTable.vue
@@ -8,56 +8,63 @@
 
     <!--    </v-table>-->
 
-<!--    <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
-<!--                  items-per-page="0">-->
-<!--        <template v-slot:item.checked="{ item }">-->
-<!--            <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
-<!--        </template>-->
-<!--        <template v-slot:item.amount="{ item }">-->
-<!--            <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
-<!--            <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
-<!--        </template>-->
+    <!--    <v-data-table :items="ingredients" hide-default-footer hide-default-header :headers="tableHeaders" density="compact" v-if="ingredients.length > 0" @click:row="handleRowClick"-->
+    <!--                  items-per-page="0">-->
+    <!--        <template v-slot:item.checked="{ item }">-->
+    <!--            <v-checkbox-btn v-model="item.checked" color="success" v-if="!item.isHeader"></v-checkbox-btn>-->
+    <!--        </template>-->
+    <!--        <template v-slot:item.amount="{ item }">-->
+    <!--            <template v-if="item.isHeader"><p style="width: 100px"><b>{{ item.note }}</b></p></template>-->
+    <!--            <template v-else>{{ item.amount * props.ingredientFactor }}</template>-->
+    <!--        </template>-->
 
-<!--        <template v-slot:item.note="{ item }">-->
-<!--            <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
-<!--                <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
-<!--            </v-icon>-->
-<!--        </template>-->
-<!--    </v-data-table>-->
+    <!--        <template v-slot:item.note="{ item }">-->
+    <!--            <v-icon class="far fa-comment float-right" v-if="item.note != '' && item.note != undefined">-->
+    <!--                <v-tooltip activator="parent" open-on-click location="start">{{ item.note }}</v-tooltip>-->
+    <!--            </v-icon>-->
+    <!--        </template>-->
+    <!--    </v-data-table>-->
 
     <v-table density="compact">
         <tbody>
+        <template v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
+            <tr>
+                <template v-if="i.isHeader">
+                    <td colspan="5" class="font-weight-bold">{{ i.note }}</td>
+                </template>
+                <template v-else>
+                    <td style="width: 1%; text-wrap: nowrap" class="pa-0 d-print-none" v-if="showCheckbox">
+                        <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
+                    </td>
+                    <td style="width: 1%; text-wrap: nowrap" class="pr-1"
+                        v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
+                    <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
+                    <td style="width: 1%; text-wrap: nowrap" class="pr-1">
+                        <template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
+                    </td>
+                    <td>
+                        <template v-if="i.food">
+                            <router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
+                                {{ ingredientToFoodString(i, ingredientFactor) }}
+                            </router-link>
+                            <a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
+                            <span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
+                            <template v-if="i.note != '' && i.note != undefined">
+                                <span class="text-disabled font-italic">&nbsp;{{ i.note }}</span>
+                            </template>
+                        </template>
 
-        <tr v-for="i in ingredients" :key="i.id" @click="i.checked = !i.checked">
-            <template v-if="i.isHeader">
-                <td colspan="5" class="font-weight-bold">{{ i.note }}</td>
-            </template>
-            <template v-else>
-                <td style="width: 1%; text-wrap: nowrap" class="pa-0" v-if="showCheckbox">
-                    <v-checkbox-btn v-model="i.checked" color="success" v-if="!i.isHeader"></v-checkbox-btn>
-                </td>
-                <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-html="calculateFoodAmount(i.amount, props.ingredientFactor, useUserPreferenceStore().userSettings.useFractions)" v-if="!i.noAmount"></td>
-                <td style="width: 1%; text-wrap: nowrap" class="pr-1" v-if="i.noAmount"></td>
-                <td style="width: 1%; text-wrap: nowrap" class="pr-1">
-                    <template v-if="i.unit && !i.noAmount"> {{ ingredientToUnitString(i, ingredientFactor) }}</template>
-                </td>
-                <td>
-                    <template v-if="i.food">
-                        <router-link v-if="i.food.recipe" :to="{name: 'RecipeViewPage', params: {id: i.food.recipe.id}}">
-                            {{ ingredientToFoodString(i, ingredientFactor) }}
-                        </router-link>
-                        <a v-else-if="i.food.url" :href="i.food.url" target="_blank">{{ ingredientToFoodString(i, ingredientFactor) }}</a>
-                        <span v-else>{{ ingredientToFoodString(i, ingredientFactor) }}</span>
-                    </template>
-                </td>
 
-                <td style="width: 1%; text-wrap: nowrap">
-                    <v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
-                        <v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
-                    </v-icon>
-                </td>
-            </template>
-        </tr>
+                    </td>
+
+                    <td style="width: 1%; text-wrap: nowrap" class="d-print-none">
+                        <v-icon class="far fa-comment float-right" v-if="i.note != '' && i.note != undefined">
+                            <v-tooltip activator="parent" open-on-click location="start">{{ i.note }}</v-tooltip>
+                        </v-icon>
+                    </td>
+                </template>
+            </tr>
+        </template>
         </tbody>
     </v-table>
 
diff --git a/vue3/src/components/display/PropertyView.vue b/vue3/src/components/display/PropertyView.vue
index d4d2ce9f6..d5fede56c 100644
--- a/vue3/src/components/display/PropertyView.vue
+++ b/vue3/src/components/display/PropertyView.vue
@@ -4,7 +4,7 @@
             <v-icon icon="$properties"></v-icon>
             {{ $t('Properties') }}
 
-            <v-btn-toggle border divided density="compact" class="float-right" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
+            <v-btn-toggle border divided density="compact" class="float-right d-print-none" v-if="hasRecipeProperties && hasRecipeProperties" v-model="sourceSelectedToShow">
                 <v-btn size="small" value="food">{{ $t('Food') }}</v-btn>
                 <v-btn size="small" value="recipe">{{ $t('Recipe') }}</v-btn>
             </v-btn-toggle>
@@ -25,9 +25,9 @@
                     <td>{{ $n(p.propertyAmountPerServing) }} {{ p.unit }}</td>
                     <td>{{ $n(p.propertyAmountTotal) }} {{ p.unit }}</td>
                     <td v-if="sourceSelectedToShow == 'food'">
-                        <v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small"
+                        <v-btn @click="dialogProperty = p; dialog = true" variant="plain" color="warning" icon="fa-solid fa-triangle-exclamation" size="small" class="d-print-none"
                                v-if="p.missingValue"></v-btn>
-                        <v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue"></v-btn>
+                        <v-btn @click="dialogProperty = p; dialog = true" variant="plain" icon="fa-solid fa-circle-info" size="small" v-if="!p.missingValue" class="d-print-none"></v-btn>
                     </td>
                 </tr>
                 </tbody>
diff --git a/vue3/src/components/display/RecipeActivity.vue b/vue3/src/components/display/RecipeActivity.vue
index 3b7ba9640..9a2e762f9 100644
--- a/vue3/src/components/display/RecipeActivity.vue
+++ b/vue3/src/components/display/RecipeActivity.vue
@@ -1,10 +1,8 @@
 <template>
 
-    <v-card class="mt-1">
+    <v-card class="mt-1" v-if="cookLogs.length > 0">
         <v-card-title>{{ $t('Activity') }}</v-card-title>
         <v-card-text>
-
-
             <v-list>
                 <v-list-item v-for="c in cookLogs.sort((a,b) =>  a.createdAt! > b.createdAt! ? 1 : -1)" :key="c.id">
                     <template #prepend>
@@ -31,7 +29,7 @@
         </v-card-text>
     </v-card>
 
-    <v-card class="mt-1">
+    <v-card class="mt-1 d-print-none">
         <v-card-text>
             <v-textarea :label="$t('Comment')" rows="2" v-model="newCookLog.comment"></v-textarea>
             <v-row de>
diff --git a/vue3/src/components/display/RecipeView.vue b/vue3/src/components/display/RecipeView.vue
index c2f679f01..c4b7d176a 100644
--- a/vue3/src/components/display/RecipeView.vue
+++ b/vue3/src/components/display/RecipeView.vue
@@ -89,15 +89,15 @@
                         </v-card-text>
 
                         <v-row class="text-center text-body-2 mb-1 flex-grow-0">
-                            <v-col >
+                            <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 >
+                            <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 >
+                            <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>
@@ -129,56 +129,46 @@
 
         <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-text>
-                    <v-row>
-                        <v-col cols="12" md="3">
-                            <v-card
-                                variant="outlined"
-                                :title="$t('CreatedBy')"
-                                :subtitle="recipe.createdBy.displayName"
-                                prepend-icon="fa-solid fa-user">
-                            </v-card>
-                        </v-col>
-                        <v-col cols="12" md="3">
-                            <v-card
-                                variant="outlined"
-                                :title="$t('Created')"
-                                :subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
-                                prepend-icon="$create">
-                            </v-card>
-                        </v-col>
-                        <v-col cols="12" md="3">
-                            <v-card
-                                variant="outlined"
-                                :title="$t('Updated')"
-                                :subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
-                                prepend-icon="$edit">
-                            </v-card>
-                        </v-col>
-                        <v-col cols="12" md="3" v-if="recipe.sourceUrl">
-                            <v-card
-                                variant="outlined"
-                                :title="$t('Imported_From')"
-                                prepend-icon="$import">
-                                <template #subtitle>
-                                    <a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
-                                </template>
-                            </v-card>
-                        </v-col>
-                    </v-row>
-                </v-expansion-panel-text>
-            </v-expansion-panel>
-
-
-        </v-expansion-panels>
-
+        <v-card class="mt-2">
+            <v-card-text>
+                <v-row>
+                    <v-col cols="12" md="3">
+                        <v-card
+                            variant="outlined"
+                            :title="$t('CreatedBy')"
+                            :subtitle="recipe.createdBy.displayName"
+                            prepend-icon="fa-solid fa-user">
+                        </v-card>
+                    </v-col>
+                    <v-col cols="12" md="3">
+                        <v-card
+                            variant="outlined"
+                            :title="$t('Created')"
+                            :subtitle="DateTime.fromJSDate(recipe.createdAt).toLocaleString(DateTime.DATETIME_MED)"
+                            prepend-icon="$create">
+                        </v-card>
+                    </v-col>
+                    <v-col cols="12" md="3">
+                        <v-card
+                            variant="outlined"
+                            :title="$t('Updated')"
+                            :subtitle="DateTime.fromJSDate(recipe.updatedAt).toLocaleString(DateTime.DATETIME_MED)"
+                            prepend-icon="$edit">
+                        </v-card>
+                    </v-col>
+                    <v-col cols="12" md="3" v-if="recipe.sourceUrl">
+                        <v-card
+                            variant="outlined"
+                            :title="$t('Imported_From')"
+                            prepend-icon="$import">
+                            <template #subtitle>
+                                <a :href="recipe.sourceUrl" target="_blank">{{ recipe.sourceUrl }}</a>
+                            </template>
+                        </v-card>
+                    </v-col>
+                </v-row>
+            </v-card-text>
+        </v-card>
 
         <recipe-activity :recipe="recipe"></recipe-activity>
     </template>
@@ -195,12 +185,13 @@ import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
 import KeywordsComponent from "@/components/display/KeywordsBar.vue";
 import RecipeImage from "@/components/display/RecipeImage.vue";
 import ExternalRecipeViewer from "@/components/display/ExternalRecipeViewer.vue";
-import {useWakeLock} from "@vueuse/core";
+import {useMediaQuery, useWakeLock} from "@vueuse/core";
 import StepView from "@/components/display/StepView.vue";
 import {DateTime} from "luxon";
 import PropertyView from "@/components/display/PropertyView.vue";
 
 const {request, release} = useWakeLock()
+const isPrintMode = useMediaQuery('print')
 
 const recipe = defineModel<Recipe>({required: true})
 
diff --git a/vue3/src/components/display/StepView.vue b/vue3/src/components/display/StepView.vue
index 55ebd7c50..ec03687bc 100644
--- a/vue3/src/components/display/StepView.vue
+++ b/vue3/src/components/display/StepView.vue
@@ -8,7 +8,7 @@
                     <span v-else>{{ $t('Step') }} {{ props.stepNumber }}</span>
                 </v-col>
                 <v-col class="text-right">
-                    <v-btn-group density="compact" variant="tonal">
+                    <v-btn-group density="compact" variant="tonal" class="d-print-none">
                         <v-btn size="small" color="info" v-if="step.time != undefined && step.time > 0" @click="timerRunning = true"><i
                             class="fas fa-stopwatch mr-1 fa-fw"></i> {{ step.time }}
                         </v-btn>
diff --git a/vue3/src/components/inputs/GlobalSearchDialog.vue b/vue3/src/components/inputs/GlobalSearchDialog.vue
index 509e91321..022ce75b3 100644
--- a/vue3/src/components/inputs/GlobalSearchDialog.vue
+++ b/vue3/src/components/inputs/GlobalSearchDialog.vue
@@ -1,7 +1,7 @@
 <template>
-    <slot name="activator">
-        <v-btn @click="dialog = true" variant="plain" icon="fa-solid fa-search" class="mr-1 fa-fw" v-if="mobile"></v-btn>
-        <v-btn @click="dialog = true" variant="plain"  v-else>
+    <slot name="activator" >
+        <v-btn @click="dialog = true" variant="plain" icon="fa-solid fa-search" class="mr-1 fa-fw d-print-none" v-if="mobile"></v-btn>
+        <v-btn @click="dialog = true" variant="plain" class="d-print-none"  v-else>
             <v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon>
             <span class="d-none d-sm-block">{{ $t('Search') }}</span>
             <v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{ $t('Ctrl+K') }}</v-chip>
diff --git a/vue3/src/components/inputs/RecipeContextMenu.vue b/vue3/src/components/inputs/RecipeContextMenu.vue
index ea5d09554..164ee03b1 100644
--- a/vue3/src/components/inputs/RecipeContextMenu.vue
+++ b/vue3/src/components/inputs/RecipeContextMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size">
+    <v-btn v-bind="props" icon="fa-solid fa-ellipsis-v" variant="plain" :size="props.size" class="d-print-none">
         <v-icon icon="fa-solid fa-ellipsis-v"></v-icon>
         <v-menu activator="parent" close-on-content-click>
             <v-list density="compact" class="pt-1 pb-1">
@@ -21,6 +21,11 @@
                     {{ $t('Share') }}
                     <recipe-share-dialog :recipe="props.recipe"></recipe-share-dialog>
                 </v-list-item>
+
+                <!-- TODO when calling print() some timing or whatever issue makes it so the useMediaQuery does not work and the sidebar is still shown -->
+<!--                <v-list-item prepend-icon="fa-solid fa-print" @click="openPrintView()">-->
+<!--                    {{ $t('Print') }}-->
+<!--                </v-list-item>-->
             </v-list>
         </v-menu>
     </v-btn>
@@ -29,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import {PropType} from 'vue'
+import {nextTick, PropType} from 'vue'
 import {Recipe, RecipeFlat, RecipeOverview} from "@/openapi";
 import ModelEditDialog from "@/components/dialogs/ModelEditDialog.vue";
 import RecipeShareDialog from "@/components/dialogs/RecipeShareDialog.vue";
@@ -41,6 +46,10 @@ const props = defineProps({
     size: {type: String, default: 'medium'},
 })
 
+function openPrintView() {
+    print()
+}
+
 </script>