copy link button added
This commit is contained in:
@@ -29,7 +29,6 @@ builder.Services.ConfigureApplicationCookie(options =>
|
||||
options.Cookie.HttpOnly = true;
|
||||
options.Cookie.SameSite = SameSiteMode.None;
|
||||
options.Cookie.SecurePolicy = CookieSecurePolicy.Always;
|
||||
|
||||
options.ExpireTimeSpan = TimeSpan.FromMinutes(30);
|
||||
options.SlidingExpiration = true;
|
||||
options.Events.OnRedirectToLogin = context =>
|
||||
|
||||
@@ -227,7 +227,7 @@ html, body {
|
||||
}
|
||||
|
||||
.save-recipe-btn:hover {
|
||||
background-color: #3b4e1e !important;
|
||||
background-color: #8c4a32 !important;
|
||||
color: #f4e4bc !important;
|
||||
text-shadow: none !important;
|
||||
border-radius: 4px;
|
||||
@@ -262,6 +262,31 @@ html, body {
|
||||
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 {
|
||||
@page {
|
||||
margin: 0 !important;
|
||||
@@ -283,7 +308,7 @@ html, body {
|
||||
.chat-container, .v-app-bar, .no-print, .separator, .v-divider,
|
||||
.recipe-description, button, .v-btn, .drop-zone, .v-card-actions,
|
||||
.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;
|
||||
visibility: hidden !important;
|
||||
opacity: 0 !important;
|
||||
|
||||
@@ -70,6 +70,25 @@
|
||||
Saved in Archives
|
||||
</template>
|
||||
</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>
|
||||
</div>
|
||||
</transition>
|
||||
@@ -78,8 +97,9 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import '@/assets/css/app-theme.css'
|
||||
const hasShared =ref(false)
|
||||
|
||||
defineProps({
|
||||
const props = defineProps({
|
||||
recipe: { type: Object, default: null },
|
||||
isSaving: { type: Boolean, default: false },
|
||||
hasSaved: { type: Boolean, default: false }
|
||||
@@ -91,5 +111,30 @@ const printRecipe = () => {
|
||||
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>
|
||||
@@ -78,7 +78,27 @@ import { ref, nextTick } from 'vue'
|
||||
import '@/assets/css/app-theme.css'
|
||||
|
||||
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 chatLoading = ref(false)
|
||||
const chatMessages = ref([])
|
||||
|
||||
Reference in New Issue
Block a user