Added print button/logic
This commit is contained in:
@@ -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;
|
||||
text-align: right !important;
|
||||
line-height: 1.6 !important;
|
||||
min-width: 30px !important;
|
||||
text-align: center !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;
|
||||
}
|
||||
@@ -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-col cols="12" md="5">
|
||||
<div class="section-header mb-6 px-2">
|
||||
<v-row class="mt-10" no-gutters>
|
||||
<v-col cols="12" md="5" class="pe-md-10">
|
||||
<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">
|
||||
<div class="section-header mb-6 px-2">
|
||||
<v-col cols="12" md="7" class="ps-md-10">
|
||||
<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>
|
||||
Reference in New Issue
Block a user