feat: redesign recipe info card (#5026)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -86,29 +86,27 @@
       </BaseDialog>
     </div>
     <div>
-      <div class="d-flex justify-center flex-wrap">
-        <v-chip
-          label
-          :small="$vuetify.breakpoint.smAndDown"
-          color="accent custom-transparent"
-          class="ma-1 pa-3"
+      <div v-if="lastMadeReady" class="d-flex justify-center flex-wrap">
+        <v-row no-gutters class="d-flex flex-wrap align-center" style="font-size: larger;">
+          <v-tooltip bottom>
+            <template #activator="{ on, attrs }">
+              <v-btn
+                rounded
+                outlined
+                x-large
+                color="primary"
+                v-bind="attrs"
+                v-on="on"
+                @click="madeThisDialog = true"
               >
-          <v-icon left>
-            {{ $globals.icons.calendar }}
-          </v-icon>
-            <div v-if="lastMadeReady">
-              {{ $t('recipe.last-made-date', { date: lastMade ? new Date(lastMade).toLocaleDateString($i18n.locale) : $t("general.never") } ) }}
-            </div>
-            <div v-else>
-              <AppLoader tiny />
-            </div>
-        </v-chip>
-      </div>
-      <div class="d-flex justify-center flex-wrap mt-1">
-        <BaseButton :small="$vuetify.breakpoint.smAndDown" @click="madeThisDialog = true">
-          <template #icon> {{ $globals.icons.chefHat }} </template>
-          {{ $t('recipe.made-this') }}
-        </BaseButton>
+                <v-icon left large>{{ $globals.icons.calendar }}</v-icon>
+                <span class="text--secondary" style="letter-spacing: normal;"><b>{{ $tc("general.last-made") }}</b><br>{{ lastMade ? new Date(lastMade).toLocaleDateString($i18n.locale) : $tc("general.never") }}</span>
+                <v-icon right large>{{ $globals.icons.createAlt }}</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ $tc("recipe.made-this") }}</span>
+          </v-tooltip>
+        </v-row>
       </div>
     </div>
   </div>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue

@@ -14,15 +14,16 @@
           </v-card-title>
           <v-divider class="my-2" />
           <SafeMarkdown :source="recipe.description" />
-          <v-divider />
+          <v-divider v-if="recipe.description" />
           <v-container class="d-flex flex-row flex-wrap justify-center align-center">
-            <div class="mx-5">
+            <div class="mx-6">
               <v-row no-gutters class="mb-1">
                 <v-col v-if="recipe.recipeYieldQuantity || recipe.recipeYield" cols="12" class="d-flex flex-wrap justify-center">
                   <RecipeYield
                     :yield-quantity="recipe.recipeYieldQuantity"
                     :yield="recipe.recipeYield"
                     :scale="recipeScale"
+                    class="mb-4"
                   />
                 </v-col>
               </v-row>
@@ -31,18 +32,18 @@
                   <RecipeLastMade
                     v-if="isOwnGroup"
                     :recipe="recipe"
-                    :class="true ? undefined : 'force-bottom'"
+                    class="mb-4"
                   />
                 </v-col>
               </v-row>
             </div>
-            <div class="mx-5">
+            <div class="mx-6">
               <RecipeTimeCard
-                stacked
                 container-class="d-flex flex-wrap justify-center"
                 :prep-time="recipe.prepTime"
                 :total-time="recipe.totalTime"
                 :perform-time="recipe.performTime"
+                class="mb-4"
               />
             </div>
           </v-container>

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -30,12 +30,17 @@
                 <span v-html="recipeYield"></span>
               </v-chip>
             </div>
+            <v-row class="d-flex justify-start">
               <RecipeTimeCard
                 :prep-time="recipe.prepTime"
                 :total-time="recipe.totalTime"
                 :perform-time="recipe.performTime"
+                small
                 color="white"
+                class="ml-4"
               />
+            </v-row>
+
             <v-card-text v-if="preferences.showDescription" class="px-0">
               <SafeMarkdown :source="recipe.description" />
             </v-card-text>

frontend/components/Domain/Recipe/RecipeTimeCard.vue

@@ -1,41 +1,33 @@
-<template>
-  <div v-if="stacked">
-    <v-container>
-      <v-row v-for="(time, index) in allTimes" :key="`${index}-stacked`" no-gutters>
-        <v-col cols="12" :class="containerClass">
-          <v-chip
-            :small="$vuetify.breakpoint.smAndDown"
-            label
-            :color="color"
-            class="ma-1"
-          >
-            <v-icon left>
+<template v-if="showCards">
+  <div class="text-center">
+    <!-- Total Time -->
+    <div v-if="validateTotalTime" class="time-card-flex mx-auto">
+      <v-row no-gutters class="d-flex flex-no-wrap align-center " :style="fontSize">
+        <v-icon :x-large="!small" left color="primary">
           {{ $globals.icons.clockOutline }}
         </v-icon>
-            {{ time.name }} |
-            {{ time.value }}
-          </v-chip>
-        </v-col>
+        <p class="my-0"><span class="font-weight-bold">{{ validateTotalTime.name }}</span><br>{{ validateTotalTime.value }}</p>
       </v-row>
-    </v-container>
     </div>
-  <div v-else>
-    <v-container :class="containerClass">
-      <v-chip
-        v-for="(time, index) in allTimes"
-        :key="index"
-        :small="$vuetify.breakpoint.smAndDown"
-        label
-        :color="color"
-        class="ma-1"
-      >
-        <v-icon left>
-          {{ $globals.icons.clockOutline }}
+    <v-divider v-if="validateTotalTime && (validatePrepTime || validatePerformTime)" class="my-2" />
+    <!-- Prep Time & Perform Time -->
+    <div v-if="validatePrepTime || validatePerformTime" class="time-card-flex mx-auto">
+      <v-row no-gutters class="d-flex justify-center align-center" style="width: 100%;" :style="fontSize">
+        <div v-if="validatePrepTime" class="d-flex flex-no-wrap">
+          <v-icon :large="!small" :dense="small" left color="primary">
+            {{ $globals.icons.knfife }}
           </v-icon>
-        {{ time.name }} |
-        {{ time.value }}
-      </v-chip>
-    </v-container>
+          <p class="my-0"><span class="font-weight-bold">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}</p>
+        </div>
+        <v-divider v-if="validatePrepTime && validatePerformTime" vertical class="mx-4" />
+        <div v-if="validatePerformTime" class="d-flex flex-no-wrap">
+          <v-icon :large="!small" :dense="small" left color="primary">
+            {{ $globals.icons.potSteam }}
+          </v-icon>
+          <p class="my-0"><span class="font-weight-bold">{{ validatePerformTime.name }}</span><br>{{ validatePerformTime.value }}</p>
+        </div>
+      </v-row>
+    </div>
   </div>
 </template>
 
@@ -44,10 +36,6 @@ import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
 
 export default defineComponent({
   props: {
-    stacked: {
-      type: Boolean,
-      default: false,
-    },
     prepTime: {
       type: String,
       default: null,
@@ -64,9 +52,9 @@ export default defineComponent({
       type: String,
       default: "accent custom-transparent"
     },
-    containerClass: {
-      type: String,
-      default: undefined,
+    small: {
+      type: Boolean,
+      default: false,
     },
   },
   setup(props) {
@@ -92,13 +80,16 @@ export default defineComponent({
       return !isEmpty(props.performTime) ? { name: i18n.t("recipe.perform-time"), value: props.performTime } : null;
     });
 
-    const allTimes = computed(() => {
-      return [validateTotalTime.value, validatePrepTime.value, validatePerformTime.value].filter((x) => x !== null);
+    const fontSize = computed(() => {
+      return props.small ? { fontSize: "smaller" } : { fontSize: "larger" };
     });
 
     return {
       showCards,
-      allTimes,
+      validateTotalTime,
+      validatePrepTime,
+      validatePerformTime,
+      fontSize,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeYield.vue

@@ -1,21 +1,20 @@
 <template>
-  <div v-if="displayText" class="d-flex justify-space-between align-center">
-    <v-chip
-      :small="$vuetify.breakpoint.smAndDown"
-      label
-      :color="color"
-    >
-      <v-icon left>
-        {{ $globals.icons.potSteam }}
+  <div v-if="scaledAmount" class="d-flex align-center">
+    <v-row no-gutters class="d-flex flex-wrap align-center" style="font-size: larger;">
+      <v-icon x-large left color="primary">
+        {{ $globals.icons.bread }}
       </v-icon>
+      <p class="my-0">
+        <span class="font-weight-bold">{{ $i18n.tc("recipe.yield") }}</span><br>
         <!-- eslint-disable-next-line vue/no-v-html -->
-      <span v-html="displayText"></span>
-    </v-chip>
+        <span v-html="scaledAmount"></span> {{ text }}
+      </p>
+    </v-row>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { defineComponent, computed } from "@nuxtjs/composition-api";
 import DOMPurify from "dompurify";
 import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
 
@@ -39,7 +38,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { i18n } = useContext();
 
     function sanitizeHTML(rawHtml: string) {
       return DOMPurify.sanitize(rawHtml, {
@@ -48,21 +46,15 @@ export default defineComponent({
       });
     }
 
-    const displayText = computed(() => {
-      if (!(props.yieldQuantity || props.yield)) {
-        return "";
-      }
-
+    const scaledAmount = computed(() => {
       const {scaledAmountDisplay} =  useScaledAmount(props.yieldQuantity, props.scale);
-
-      return i18n.t("recipe.yields-amount-with-text", {
-        amount: scaledAmountDisplay,
-        text: sanitizeHTML(props.yield),
-      }) as string;
+      return scaledAmountDisplay;
     });
+    const text = sanitizeHTML(props.yield);
 
     return {
-      displayText,
+      scaledAmount,
+      text,
     };
   },
 });

frontend/lang/messages/en-US.json

@@ -579,7 +579,6 @@
     "made-this": "I Made This",
     "how-did-it-turn-out": "How did it turn out?",
     "user-made-this": "{user} made this",
-    "last-made-date": "Last Made {date}",
     "api-extras-description": "Recipes extras are a key feature of the Mealie API. They allow you to create custom JSON key/value pairs within a recipe, to reference from 3rd party applications. You can use these keys to provide information, for example to trigger automations or custom messages to relay to your desired device.",
     "message-key": "Message Key",
     "parse": "Parse",

frontend/lib/icons/icons.ts

@@ -146,6 +146,8 @@ import {
   mdiFileCabinet,
   mdiSilverwareForkKnife,
   mdiCodeTags,
+  mdiKnife,
+  mdiCookie
 } from "@mdi/js";
 
 export const icons = {
@@ -271,6 +273,8 @@ export const icons = {
   windowClose: mdiWindowClose,
   zip: mdiFolderZipOutline,
   undo: mdiUndo,
+  knfife: mdiKnife,
+  bread: mdiCookie,
 
   // Crud
   backArrow: mdiArrowLeftBoldOutline,