20220552/ai-florist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine: redesigned layout, flower cards, edit sync, and bouquet preview framing

Browse Source 
* refine: move upload mode toggle to top and compact it

* refine: simplify upload layout and remove editorial numbers

* refine: unify flow continue bar and redesign result page layout

* refine: show bouquet flowers as scrollable cards on result page

* refine: add flip-to-Korean on result flower cards

* refine: improve result rationale and sync recipe on edit

* refine: shorten edit title and align bouquet image framing to 3:4
This commit is contained in:
Chaewon Lee
2026-06-14 17:21:20 +09:00
committed by GitHub
parent 4b27c82036
commit 07e4eeaca3
25 changed files with 1303 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/lib/components/ui/upload/SnsFeedUpload.svelte
View File

@@ -4,8 +4,7 @@
import { hydrateDevUpload } from '$lib/dev/hydrateUpload.js';
import { getFlowObject, isDevSeeded } from '$lib/flowerFlow/session.js';
let { primaryFile = $bindable(null), hasImage = $bindable(), caption = 'upload their feed!' } =
$props();
let { primaryFile = $bindable(null), hasImage = $bindable() } = $props();
let firstFile = $state(null);
@@ -36,12 +35,7 @@
</script>
<div class="feed min-h-0 w-full flex-1">
<div class="sns-collage">
<span class="sns-number">(01)</span>
<span class="sns-caption">{caption}</span>
<UploadTile bind:file={firstFile} class="sns-tile" />
</div>
<UploadTile bind:file={firstFile} class="sns-tile" />
</div>
<style>
@@ -49,76 +43,15 @@
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0.5rem 1.5rem 1rem;
}
.sns-collage {
position: relative;
width: min(100%, 42rem);
height: 100%;
aspect-ratio: 4 / 5;
max-height: 34rem;
padding: 0.75rem 1.5rem 0;
}
.feed :global(.sns-tile) {
position: absolute;
top: 12%;
left: 50%;
width: 58%;
height: 46%;
background: #fff;
box-shadow: 0 10px 24px rgb(56 50 47 / 0.08);
transform: translateX(-50%);
}
.sns-number,
.sns-caption {
position: absolute;
z-index: 2;
pointer-events: none;
color: var(--color-ink);
}
.sns-number {
top: 6%;
left: 23%;
font-size: clamp(1rem, 2.2vw, 1.5rem);
line-height: 1;
}
.sns-caption {
left: 50%;
bottom: 13%;
font-size: clamp(0.9rem, 1.9vw, 1.25rem);
transform: translateX(-50%);
white-space: nowrap;
}
@media (max-width: 767px) {
.feed {
align-items: flex-start;
padding: 1.5rem 1rem 7rem;
}
.sns-collage {
width: 100%;
aspect-ratio: auto;
min-height: 0;
}
.feed :global(.sns-tile) {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
transform: none;
}
.sns-number,
.sns-caption {
display: none;
}
height: 100%;
max-height: 100%;
width: auto;
max-width: min(20rem, 100%);
aspect-ratio: 4 / 5;
}
</style>