chloe/Seasoned
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source
This commit is contained in:
chloe
2026-03-20 20:50:00 +00:00
parent 00cb853ece
commit 4df0675b81
2 changed files with 44 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Seasoned.Frontend/app/assets/css/app-theme.css
View File

@@ -665,10 +665,28 @@ html, body {
border: 1px solid #e8dec5 !important; border: 1px solid #e8dec5 !important;
} }
.save-prompt-card { .save-prompt-paper {
border: 1px solid #e0d5c5 !important; background-color: #f4e4bc !important;
border-left: 4px solid #8c4a32 !important; background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png") !important;
border-radius: 8px !important; border: 1px solid #dccca7 !important;
border-left: 6px solid #8c4a32 !important;
border-radius: 4px !important;
}
.prompt-title {
font-family: 'Libre Baskerville', serif !important;
font-weight: 700;
font-size: 1.1rem;
color: #1e1408;
text-transform: uppercase;
letter-spacing: 1px;
}
.prompt-text {
font-family: 'Libre Baskerville', serif !important;
color: #5d4a36;
font-size: 1rem;
line-height: 1.4;
} }
/* Mobile Experience: Full-screen Parchment */ /* Mobile Experience: Full-screen Parchment */

32
Seasoned.Frontend/app/components/RecipeDisplay.vue
View File

@@ -42,19 +42,29 @@
<v-expand-transition> <v-expand-transition>
<v-card <v-card
v-if="showSavePrompt" v-if="showSavePrompt"
class="mx-auto mb-6 pa-4 save-prompt-card" class="mx-auto mb-8 save-prompt-paper"
max-width="500" max-width="600"
color="#fdfbf7" elevation="4"
elevation="2"
> >
<div class="d-flex align-center"> <div class="d-flex align-center pa-5">
<v-icon color="#8c4a32" class="mr-4" size="large">mdi-feather</v-icon> <v-icon color="#8c4a32" class="mr-4" size="large">mdi-feather</v-icon>
<div>
<p class="text-subtitle-1 font-weight-bold mb-0" style="color: #5d4a36;">A Quick Note...</p> <div class="text-left">
<p class="text-body-2 mb-0" style="color: #8c7e6a;">To create a shareable link, please <strong>Save to Collection</strong> first.</p> <p class="prompt-title mb-1">A Note from the Chef</p>
<p class="prompt-text mb-0">
To share this creation with others, please <strong>Save to Collection</strong> first.
</p>
</div> </div>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon="mdi-close" variant="text" size="small" color="#8c7e6a" @click="showSavePrompt = false"></v-btn>
<v-btn
icon="mdi-close"
variant="text"
size="small"
color="#5d4a36"
@click="showSavePrompt = false"
></v-btn>
</div> </div>
</v-card> </v-card>
</v-expand-transition> </v-expand-transition>
@@ -155,7 +165,9 @@ const printRecipe = () => {
const shareRecipe = async () => { const shareRecipe = async () => {
if (!props.recipe?.id) { if (!props.recipe?.id) {
showSavePrompt.value = true; showSavePrompt.value = true;
setTimeout(() => { showSavePrompt.value = false; }, 6000); setTimeout(() => {
showSavePrompt.value = false;
}, 8000);
return; return;
} }