Added print button/logic

Seasoned.Frontend/app/assets/css/app-theme.css

@@ -60,21 +60,6 @@ html, body {
   letter-spacing: 3px;
 }
 
-.section-header {
-  font-family: 'Libre Baskerville', serif;
-  font-weight: bold;
-  font-size: 1.1rem;
-  border-bottom: 2px solid #dccca7;
-  color: #2e1e0a;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-transform: uppercase;
-  width: fit-content;
-  margin: 0 auto 1rem auto;
-  padding-bottom: 4px;
-}
-
 .feature-text {
   font-family: 'Libre Baskerville', serif;
   color: #5d4a36 !important;
@@ -198,13 +183,230 @@ html, body {
   border-radius: 8px !important;
 }
 
+.save-recipe-btn:hover {
+  background-color: #3b4e1e !important;
+  color: #f4e4bc !important;
+  text-shadow: none !important;
+  border-radius: 4px;
+}
+
+.print-btn {
+  background-color: #3b4e1e !important;
+  color: #f4e4bc !important;
+  font-family: 'Libre Baskerville', serif !important;
+  text-transform: none !important;
+  letter-spacing: 0;
+  border-radius: 8px !important;
+}
+
+.print-btn:hover {
+  background-color: #2e1e0a !important;
+  color: #f4e4bc !important;
+  text-shadow: none !important;
+  border-radius: 4px;
+}
+
+@media print {
+  @page {
+    margin: 0.5in 0.75in !important;
+  }
+
+  .v-application, 
+  .v-application__wrap, 
+  main.v-main, 
+  .v-container {
+    padding-top: 0 !important;
+    margin-top: 0 !important;
+    position: static !important;
+  }
+
+  .recipe-content {
+    margin-top: -20px !important;
+    padding-top: 0 !important;
+  }
+
+  .chat-container, 
+  .v-app-bar, 
+  .no-print, 
+  .separator,
+  .v-divider,
+  button, 
+  .v-btn {
+    display: none !important;
+  }
+
+  body, .recipe-bg, .landing-page, .recipe-card {
+    background: white !important;
+    background-image: none !important;
+    box-shadow: none !important;
+    color: black !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .v-row, 
+  .v-col, 
+  .v-container, 
+  .v-card,
+  .recipe-card,
+  div[class*="v-col"] {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+  }
+
+  /* 2. Specific fix for Vuetify's "thin" borders */
+  .v-border-thin,
+  .border,
+  .border-sm {
+    border-width: 0 !important;
+  }
+
+  .v-border-thin,
+  .border,
+  .border-sm {
+    border-width: 0 !important;
+  }
+
+  header.text-center {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+    margin-bottom: 2px !important;
+  }
+
+  header.text-center img, 
+  .v-img, 
+  [class*="v-img"] {
+    max-height: 60px !important; 
+    margin-bottom: 2px !important;
+  }
+
+  .brand-subtitle {
+    margin-bottom: 5px !important;
+    font-size: 0.7rem !important;
+  }
+
+  .recipe-title {
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+    margin-bottom: 45px !important;
+    text-align: center;
+  }
+
+  .recipe-content .v-row {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: nowrap !important;
+    width: 100% !important;
+    gap: 0.4in !important;
+    align-items: flex-start !important;
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+
+  .recipe-content .v-row > div:first-child {
+    flex: 0 0 35% !important;
+    width: 35% !important;
+    max-width: 35% !important;
+    padding: 0 !important;
+  }
+
+  .recipe-content .v-row > div:last-child {
+    flex: 0 0 60% !important;
+    width: 60% !important;
+    max-width: 60% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .section-header {
+    margin-bottom: 12px !important;
+    padding-bottom: 0 !important;
+    border-bottom: none !important;
+    width: 100% !important;
+  }
+
+  * {
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+
+  .ingredient-item, .step-text {
+    font-size: 0.95rem !important;
+    line-height: 1.3 !important;
+    color: black !important;
+  }
+
+  .step-number {
+    border: none !important;
+  }
+
+  .instruction-step {
+    margin-bottom: 8px !important;
+    gap: 8px !important;
+  }
+
+  .step-number, .ingredient-item::before {
+    color: #3b4e1e !important;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .recipe-content, .v-row, .v-col {
+    overflow: visible !important;
+    height: auto !important;
+    border: none !important;
+  }
+}
+
+.section-header {
+  font-family: 'Libre Baskerville', serif;
+  font-weight: bold;
+  font-size: 1.1rem;
+  border-bottom: 2px solid #dccca7;
+  color: #4a3a2a;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+}
+
 .ingredients-list {
   background: transparent !important;
 }
 
+.ingredient-item {
+  position: relative;
+  padding-left: 45px;
+  font-family: 'Libre Baskerville', serif !important;
+  font-size: 1.1rem !important;
+  line-height: 1.4 !important;
+  color: #2c2925 !important;
+}
+
+.ingredients-container {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding-left:20px;
+  margin-top: 10px;
+}
+
+.ingredient-item::before {
+  content: "❦";
+  position: absolute;
+  padding-left: 10px;
+  left: 0;
+  color: #3b4e1e;
+  font-weight: bold;
+  font-size: 1.4rem;
+  top: -1px;
+}
+
 .instruction-step{
   display: flex !important;
   align-items: flex-start !important;
+  text-align: left;
   gap: 12px !important;
   margin-bottom: 24px !important;
   width: 100%;
@@ -215,9 +417,9 @@ html, body {
   font-weight: bold !important;
   color: #3b4e1e !important;
   font-size: 1.1rem !important;
-  min-width: 28px !important;
+  min-width: 30px !important;
-  text-align: right !important;
+  text-align: center !important;
-  line-height: 1.6 !important;
+  line-height: 1.4 !important;
   padding-top: 0 !important;
   margin: 0 !important;
 }
@@ -231,14 +433,6 @@ html, body {
   flex: 1;
 }
 
-.ingredient-item {
-  font-family: 'Libre Baskerville', serif !important;
-  font-size: 1.1rem !important;
-  line-height: 1.8 !important;
-  color: #2c2925 !important;
-  margin-bottom: 4px !important;
-}
-
 .chat-container {
   width: 100%;
   background-color: rgba(62, 42, 20, 0.03) !important;
@@ -369,10 +563,10 @@ html, body {
   border: 1px solid #7a3e29
 }
 
-.message.assistant {
+.chat-display .message.assistant {
   background-color: #fcf8ef !important; 
   color: #2e1e0a !important;
   align-self: flex-start;
   border-radius: 12px 12px 12px 2px;
-  border: 1px solid #e8dec5;
+  border: 1px solid #e8dec5 !important;
 }

Seasoned.Frontend/app/components/RecipeDisplay.vue

@@ -1,28 +1,28 @@
 <template>
   <transition name="fade">
-    <div v-if="recipe" class="recipe-content">
+    <div v-if="recipe" class="recipe-content mx-auto" style="max-width: 900px;">
       <v-divider class="mb-10 separator"></v-divider>
       
       <h2 class="recipe-title text-center mb-4">{{ recipe.title }}</h2>
-      <p v-if="recipe.description" class="recipe-description text-center mb-12 text-italic">
+      <p v-if="recipe.description" class="recipe-description text-center mb-16 text-italic">
         {{ recipe.description }}
       </p>
 
-      <v-row>
+      <v-row class="mt-10" no-gutters>
-        <v-col cols="12" md="5">
+        <v-col cols="12" md="5" class="pe-md-10">
-          <div class="section-header mb-6 px-2">
+          <div class="section-header justify-center mb-6">
             <v-icon icon="mdi-spoon-sugar" class="mr-2" size="small"></v-icon>
             <span>Ingredients</span>
           </div>
           <div class="ingredients-container">
-            <div v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item d-flex align-center">
+            <div v-for="(item, i) in recipe.ingredients" :key="i" class="ingredient-item">
                 {{ item }}
             </div>
           </div>
         </v-col>
 
-        <v-col cols="12" md="7">
+        <v-col cols="12" md="7" class="ps-md-10">
-          <div class="section-header mb-6 px-2">
+          <div class="section-header justify-center mb-6">
             <v-icon icon="mdi-pot-steam-outline" class="mr-2" size="small"></v-icon>
             <span>Instructions</span>
           </div>
@@ -34,6 +34,16 @@
       </v-row>
 
       <v-row justify="center" class="mt-12 pb-10">
+        <v-btn
+          class="print-btn px-12"
+          size="large"
+          elevation="0"
+          @click="printRecipe"
+        >
+          <v-icon icon="mdi-printer-outline" class="mr-2"></v-icon>
+          Print Recipe
+        </v-btn>
+
         <v-btn
           v-if="!hasSaved"
           class="save-recipe-btn px-12"
@@ -61,11 +71,43 @@
 </template>
 
 <script setup>
+import { ref } from 'vue'
+import '@/assets/css/app-theme.css'
+
 defineProps({
-  recipe: { type: Object, default: null },
+  //recipe: { type: Object, default: null },
   isSaving: { type: Boolean, default: false },
   hasSaved: { type: Boolean, default: false }
 })
 
 defineEmits(['save'])
+
+const printRecipe = () => {
+  window.print()
+}
+
+// mock output
+const recipe = ref({
+  title: "Bakery-Style Lemon Blueberry Muffins",
+  ingredients: [
+    "2 cups all-purpose flour",
+    "1/2 cup granulated sugar",
+    "2 tsp baking powder",
+    "1/2 tsp salt",
+    "1/2 cup unsalted butter, melted",
+    "2 large eggs",
+    "1/2 cup whole milk",
+    "1 tbsp fresh lemon zest",
+    "2 tbsp fresh lemon juice",
+    "1 1/2 cups fresh blueberries"
+  ],
+  instructions: [
+    "Preheat your oven to 375°F (190°C) and line a muffin tin with paper liners.",
+    "In a large bowl, whisk together the flour, sugar, baking powder, and salt.",
+    "In a separate bowl, whisk the melted butter, eggs, milk, lemon zest, and lemon juice.",
+    "Pour the wet ingredients into the dry and stir gently until just combined; do not overmix or the muffins will be tough.",
+    "Toss the blueberries in a teaspoon of flour, then gently fold them into the batter.",
+    "Divide the batter evenly into the muffin cups and bake for 18-20 minutes until golden."
+  ]
+})
 </script>