copy link button added

This commit is contained in:
2026-03-19 15:19:55 +00:00
parent dd0aa5084b
commit 1a09734a9b
4 changed files with 94 additions and 5 deletions

View File

@@ -29,7 +29,6 @@ builder.Services.ConfigureApplicationCookie(options =>
options.Cookie.HttpOnly = true; options.Cookie.HttpOnly = true;
options.Cookie.SameSite = SameSiteMode.None; options.Cookie.SameSite = SameSiteMode.None;
options.Cookie.SecurePolicy = CookieSecurePolicy.Always; options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
options.ExpireTimeSpan = TimeSpan.FromMinutes(30); options.ExpireTimeSpan = TimeSpan.FromMinutes(30);
options.SlidingExpiration = true; options.SlidingExpiration = true;
options.Events.OnRedirectToLogin = context => options.Events.OnRedirectToLogin = context =>

View File

@@ -227,7 +227,7 @@ html, body {
} }
.save-recipe-btn:hover { .save-recipe-btn:hover {
background-color: #3b4e1e !important; background-color: #8c4a32 !important;
color: #f4e4bc !important; color: #f4e4bc !important;
text-shadow: none !important; text-shadow: none !important;
border-radius: 4px; border-radius: 4px;
@@ -262,6 +262,31 @@ html, body {
border-radius: 4px; border-radius: 4px;
} }
.share-btn {
background-color: #8c4a32 !important;
font-family: 'Libre Baskerville', serif !important;
color: #f4e4bc !important;
text-transform: none !important;
letter-spacing: 0;
border-radius: 8px !important;
}
.share-btn:hover {
background-color: #3b4e1e !important;
color: #f4e4bc !important;
text-shadow: none !important;
border-radius: 4px;
}
.share-success-btn {
opacity: 1 !important;
color: #f4e4bc !important;
font-family: 'Libre Baskerville', serif !important;
text-transform: none !important;
letter-spacing: 0;
border-radius: 8px !important;
}
@media print { @media print {
@page { @page {
margin: 0 !important; margin: 0 !important;
@@ -283,7 +308,7 @@ html, body {
.chat-container, .v-app-bar, .no-print, .separator, .v-divider, .chat-container, .v-app-bar, .no-print, .separator, .v-divider,
.recipe-description, button, .v-btn, .drop-zone, .v-card-actions, .recipe-description, button, .v-btn, .drop-zone, .v-card-actions,
.v-btn--variant-text, .v-btn--variant-elevated, .v-btn--variant-text, .v-btn--variant-elevated,
footer, .v-footer, .recipe-actions-row { footer, .v-footer, .recipe-actions-row, .share-btn {
display: none !important; display: none !important;
visibility: hidden !important; visibility: hidden !important;
opacity: 0 !important; opacity: 0 !important;

View File

@@ -70,6 +70,25 @@
Saved in Archives Saved in Archives
</template> </template>
</v-btn> </v-btn>
<v-btn
class="px-12 transition-swing"
size="large"
elevation="0"
:color="hasShared ? '#556b2f' : '#5d4a36'"
:class="hasShared ? 'share-success-btn' : 'share-btn'"
@click="shareRecipe"
>
<template v-if="!hasShared">
<v-icon icon="mdi-share-variant-outline" class="mr-2"></v-icon>
Share Recipe
</template>
<template v-else>
<v-icon icon="mdi-content-save-check-outline" class="mr-2"></v-icon>
Link Copied!
</template>
</v-btn>
</v-row> </v-row>
</div> </div>
</transition> </transition>
@@ -78,8 +97,9 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import '@/assets/css/app-theme.css' import '@/assets/css/app-theme.css'
const hasShared =ref(false)
defineProps({ const props = defineProps({
recipe: { type: Object, default: null }, recipe: { type: Object, default: null },
isSaving: { type: Boolean, default: false }, isSaving: { type: Boolean, default: false },
hasSaved: { type: Boolean, default: false } hasSaved: { type: Boolean, default: false }
@@ -91,5 +111,30 @@ const printRecipe = () => {
window.print() window.print()
} }
const shareRecipe = async () => {
const shareData = {
title: props.recipe.title,
text: `Check out this delicious ${props.recipe.title} recipe!`,
url: window.location.href
}
try {
if (navigator.share) {
await navigator.share(shareData)
triggerShareSuccess()
} else {
await navigator.clipboard.writeText(window.location.href)
triggerShareSuccess()
}
} catch (err) {
console.error('Error sharing:', err)
}
}
const triggerShareSuccess = () => {
hasShared.value = true
setTimeout(() => {
hasShared.value = false
}, 3000)
}
</script> </script>

View File

@@ -78,7 +78,27 @@ import { ref, nextTick } from 'vue'
import '@/assets/css/app-theme.css' import '@/assets/css/app-theme.css'
const config = useRuntimeConfig() const config = useRuntimeConfig()
const recipe = ref(null) const recipe = ref({
title: "Peanut Butter Cookies",
description: "A classic, soft, and chewy family favorite.",
ingredients: [
"1/2 c. Butter",
"1/2 c. peanut butter",
"1/2 c. white sugar",
"1/2 c. brown sugar",
"1 egg",
"1 1/2 c. flour",
"3/4 tsp. soda",
"1/2 tsp. baking powder",
"1/4 tsp. salt"
],
instructions: [
"Chill dough and form into a large ball or make a roll.",
"Slice about 1/8 or 1/4 inch thick.",
"Flatten with a fork dipped in flour, making a criss-cross pattern.",
"Bake in a 375°F oven."
]
})
const userQuery = ref('') const userQuery = ref('')
const chatLoading = ref(false) const chatLoading = ref(false)
const chatMessages = ref([]) const chatMessages = ref([])