Wizard polish: step headlines, gated Next, real summary, portal action bar
Mobile only (<=639px); desktop markup untouched. Bug fix: the Back/Next bar was fixed-positioned inside the screen entrance animation's transformed wrapper, so it painted under the content and jumped to the viewport bottom about a second in. It is now portalled to <body> and only fades in, pinned to the bottom from the first frame. The other fixed/sticky elements (tab bar, drawer, sheets, install sheet) were checked and live outside the animated wrappers. - The step name is now the large headline with a one-line description; the repeated page title is dropped on phones. Thin progress bar + 1/3. - Step 1: formats/limits hint, one big dashed Add photos or files area (plus icon), Camera and Paste text instead as secondaries, and a 'nothing added yet' placeholder that becomes the thumbnail/chip list. - Next is disabled until a photo, file or pasted text exists; step 3 can never be reached empty. - Step 1 shows Cancel (back to the Library) instead of a dead Back. - Step 3 is a real summary: thumbnail/chip strip plus Files, Difficulty, Activities and Folder rows, each with an Edit link to its step; Freeze is the single primary action. - Step 2 got a visible Difficulty label and a helper line under every group, defaults still preselected. - Bottom chrome: flat full-width Back/Next bar above the safe area, and the tab bar hides inside both wizards. The lower-right orb is hidden on phones so it can never glow behind the bar. - Make my homework matches: headline, hint, big add area, placeholder, Cancel, gated Next, flat bar. Verified: new wizard suite 80/80 (bar position sampled at 5 frames during the entrance from tab bar/drawer/empty state; 360 + 390, dark + light, EN + CS, reduced motion on/off; gating, summary Edit links, hidden tab bar and orb), declutter 116/116, regression 74/74, mobile 52/52, animation 8/8, i18n 25/25. Lint + build clean. SW freezmo-v22.
This commit is contained in:
parent
374752c59e
commit
e66141e9a0
9 changed files with 338 additions and 132 deletions
|
|
@ -312,7 +312,7 @@ body {
|
|||
.ice-blob { animation: none; }
|
||||
}
|
||||
|
||||
/* Phones: fewer, softer blobs so the drift animation stays cheap. Unlayered
|
||||
/* Phones: fewer, softer blobs so the drift animation stays cheap. Unlayered
|
||||
on purpose — layered rules would lose to the .ice-blob declarations above. */
|
||||
@media (max-width: 1023px) {
|
||||
.ice-blob-c,
|
||||
|
|
@ -339,11 +339,11 @@ body {
|
|||
--ice-orb-opacity: 0.42;
|
||||
}
|
||||
/* Phones: orbs hug the screen edges so they can never sit under the
|
||||
content column's cards or primary buttons (the lower-right one used to
|
||||
glow right behind the main CTAs). */
|
||||
content column's cards or primary buttons. The lower-right orb still
|
||||
read as a glow behind the wizard action bar, so phones drop it. */
|
||||
.ice-orb-1 { width: 96px; height: 96px; top: -44px; left: -48px; }
|
||||
.ice-orb-2 { width: 72px; height: 72px; top: 60%; left: -44px; }
|
||||
.ice-orb-3 { width: 124px; height: 124px; bottom: 12vh; right: -84px; }
|
||||
.ice-orb-3 { display: none; }
|
||||
}
|
||||
|
||||
@layer components {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue