Drop the sticky bar: the Freeze my deck CTA now sits in the flow like the homework one
The last visible difference between the two CTAs was the container: the deck button lived in a full-bleed sticky strip (translucent background, hairline top border, its own padding), which also tinted the disabled chip differently. The homework button sits plainly in the page flow. - The CTA block is now a plain space-y-2 stack at the end of the form: full-width button + centred helper line, exactly like /homework. - /create's page padding switches from the sticky-era .pb-cta (9rem, phone override 4.6rem) to .pb-tabbar, and lg:pb-20 to lg:pb-16 — identical to the homework page. The now-unused .pb-cta rules are gone. - Result: same button width (358px @390 / 688px @1280), height, radius, helper placement and trailing space on both pages; neither has a sticky ancestor any more. Service worker: freezmo-v16. Verified: CTA-flow suite 26/26 (below-the-fold at rest, no sticky ancestor, full-width, helper centred underneath, width/height/radius/trailing-space parity at 390px and 1280px), desktop regression 74/74, mobile 51/51, i18n 27/27. Lint + build clean.
This commit is contained in:
parent
4530466df0
commit
a8c752828e
4 changed files with 5 additions and 16 deletions
|
|
@ -28,7 +28,7 @@ export default async function CreatePage({
|
||||||
<MobileSidebar />
|
<MobileSidebar />
|
||||||
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
<div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-cta lg:px-10 lg:pb-20">
|
<div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16">
|
||||||
<UploadScreen />
|
<UploadScreen />
|
||||||
</div>
|
</div>
|
||||||
<TabBar />
|
<TabBar />
|
||||||
|
|
|
||||||
|
|
@ -707,17 +707,6 @@ body {
|
||||||
.pt-safe { padding-top: max(env(safe-area-inset-top), 0.75rem) }
|
.pt-safe { padding-top: max(env(safe-area-inset-top), 0.75rem) }
|
||||||
.pb-safe { padding-bottom: max(env(safe-area-inset-bottom), 0.75rem) }
|
.pb-safe { padding-bottom: max(env(safe-area-inset-bottom), 0.75rem) }
|
||||||
.pb-tabbar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) }
|
.pb-tabbar { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) }
|
||||||
/* Trailing room under the sticky "Freeze my deck" strip on /create.
|
|
||||||
Phones: the strip floats one tab-bar height above the viewport bottom (the
|
|
||||||
sticky bottom offset in UploadScreen), so the page only needs that much
|
|
||||||
scroll room under it — the strip settles exactly where it was already
|
|
||||||
floating, and the bottom bar is never double-counted. Keep 4.6rem in sync
|
|
||||||
with the sticky offset. Wider screens: the strip docks to the viewport
|
|
||||||
bottom and keeps the roomier 9rem. */
|
|
||||||
.pb-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 9rem) }
|
|
||||||
@media (max-width: 639px) {
|
|
||||||
.pb-cta { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.6rem) }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (display-mode: standalone) {
|
@media (display-mode: standalone) {
|
||||||
.standalone-hide { display: none }
|
.standalone-hide { display: none }
|
||||||
|
|
|
||||||
|
|
@ -719,9 +719,9 @@ export function UploadScreen() {
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div className="sticky bottom-[calc(env(safe-area-inset-bottom,0px)+4.6rem)] z-20 -mx-4 space-y-2 border-t border-[var(--hairline)] bg-white/65 px-4 py-3 backdrop-blur-2xl dark:bg-[color-mix(in_oklab,var(--surface)_70%,transparent)] sm:bottom-0 sm:mx-0 sm:rounded-[1.35rem] sm:border sm:px-5">
|
{/* Same CTA block as the homework flow: full-width button with the
|
||||||
{/* Visually identical to the homework flow's CTA — same icon, shape
|
helper line centred underneath, in the page flow — no sticky bar. */}
|
||||||
and helper line — only the label differs. */}
|
<div className="space-y-2">
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
size="lg"
|
||||||
className="touch-target w-full"
|
className="touch-target w-full"
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
*
|
*
|
||||||
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
* Bumping CACHE_VERSION is how a new deploy invalidates old assets.
|
||||||
*/
|
*/
|
||||||
const CACHE_VERSION = "freezmo-v15";
|
const CACHE_VERSION = "freezmo-v16";
|
||||||
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
const SHELL_CACHE = `${CACHE_VERSION}-shell`;
|
||||||
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
const ASSET_CACHE = `${CACHE_VERSION}-assets`;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue