From 8acd10a8d2645a194a6371b5b9be07cfd2999e8f Mon Sep 17 00:00:00 2001 From: Vuong Hoang Date: Wed, 23 Sep 2026 09:10:34 -0700 Subject: [PATCH] refactor(r2): drop the kept/ephemeral card CSS; contract marked BUILT The index no longer renders cards or lanes. Their rules, and the absolute positioning the keep/wipe controls needed to float over a thumbnail, are gone. The controls keep their shared button base; the Desk row and the booth header place them. The contract is marked BUILT on the branch, pending heid code-review and bug-hunt. --- booth/templates/base.html | 59 ++++-------------------------- docs/contracts/r2_flow.contract.md | 4 +- 2 files changed, 10 insertions(+), 53 deletions(-) diff --git a/booth/templates/base.html b/booth/templates/base.html index 728a0b6..d16007c 100644 --- a/booth/templates/base.html +++ b/booth/templates/base.html @@ -199,7 +199,7 @@ read. Static here: on the old cards they floated over a thumbnail. */ .desk-acts{display:flex;gap:6px;opacity:0;transition:opacity var(--dur-1)} .desk-row:hover .desk-acts,.desk-acts:focus-within{opacity:1} - .desk-acts form{position:static;opacity:1;margin:0} + .desk-acts form{margin:0} .desk-acts button{height:28px;min-width:28px;padding:0 8px;font-size:var(--size-sm);border-radius:var(--radius-md); border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text-body); -webkit-backdrop-filter:none;backdrop-filter:none;cursor:pointer} @@ -238,32 +238,6 @@ .desk-panel .up-go{padding:10px 14px;border-radius:var(--radius-lg)} .desk-panel .drop.has+.up-go{padding:10px 14px;border-radius:var(--radius-lg)} - /* ---- index: lanes and cards ------------------------------------------ */ - .lane-head{margin:28px 0 12px;font-family:var(--font-mono);font-size:var(--size-micro);font-weight:500; - letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted); - display:flex;align-items:center;gap:10px} - .lane-head::after{content:"";flex:1;height:1px;background:var(--border-subtle)} - .lane-note{font-weight:400;letter-spacing:.04em;color:var(--text-muted);text-transform:none} - .lane-note code{font-size:1em;color:var(--text-muted)} - .uploader+.lane-head{margin-top:8px} - .kept-grid{margin-bottom:4px} - - .grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(248px,1fr))} - .card{position:relative;background:var(--surface-card);border:1px solid var(--border-default); - border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm); - transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)} - .card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)} - .card .thumb{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-sunken); - overflow:hidden;border-bottom:1px solid var(--border-subtle)} - .card .thumb img{width:100%;height:100%;object-fit:cover;display:block} - .card .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center; - color:var(--text-faint);font-family:var(--font-mono);font-size:var(--size-caption); - letter-spacing:var(--tracking-caps);text-transform:uppercase} - .card .meta{padding:12px 14px 14px} - .card .name{display:block;font-weight:600;font-size:var(--size-h3);color:var(--text-heading);word-break:break-word} - .card .name:hover{text-decoration:none;color:var(--text-link)} - .card .sub{color:var(--text-muted);font-size:var(--size-caption);font-family:var(--font-mono);margin-top:4px} - /* THE ANNOUNCEMENT — who posted this booth and why (U5). Same size and rhythm as .sub above it: a second line of card metadata, not a heading. The handle carries the brightest ink, so a scan down the index reads as a @@ -277,29 +251,12 @@ .prov-none{color:var(--text-muted);font-style:italic} .prov-broken{color:var(--warning-text);font-style:italic;cursor:help} - /* card-shoulder controls: an opaque scrim and an always-light glyph, so - they read over any thumbnail in both themes */ - .wipe{position:absolute;top:10px;right:10px;margin:0} - .wipe button,.keepit button,.wipe-kept button,.release button{cursor:pointer;font:inherit; - font-size:var(--size-sm);line-height:1;height:28px;min-width:28px;padding:0 8px; - border-radius:var(--radius-md);border:1px solid rgb(255 255 255 / .16); - background:oklch(0.17 0.01 250 / .86);color:oklch(0.91 0.008 216); - -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); - transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out)} - .wipe button{font-size:16px} - .wipe button:hover,.wipe-kept button:hover{background:var(--danger);border-color:var(--danger);color:var(--danger-contrast)} - .keepit{position:absolute;top:10px;left:10px;margin:0;opacity:0;transition:opacity var(--dur-1)} - .card:hover .keepit,.keepit:focus-within{opacity:1} - .keepit button:hover,.release button:hover{background:oklch(0.31 0.012 244 / .95);border-color:rgb(255 255 255 / .32)} - /* One positioned row holds BOTH kept-card controls — they used to pin - themselves to the same corner and the later sibling won. */ - .kept-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px; - align-items:center;opacity:0;transition:opacity var(--dur-1)} - .card-kept:hover .kept-actions,.kept-actions:focus-within{opacity:1} - .kept-actions form{position:static;opacity:1;margin:0} - .release{opacity:0;transition:opacity var(--dur-1)} - .card-kept:hover .release,.release:focus-within{opacity:1} - .release button{font-size:var(--size-caption);font-family:var(--font-mono)} + /* keep / release / wipe — the controls themselves. Where they sit is the + surface's business: a Desk row (.desk-acts) or the booth header (.wipe-lg, + .keep-lg). The kept/ephemeral CARDS they used to float over are gone. */ + .wipe,.keepit,.release{margin:0} + .wipe button,.keepit button,.release button{cursor:pointer;font:inherit;line-height:1; + transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)} /* ---- lifetime --------------------------------------------------------- U4: a booth that stopped counting down says so where the countdown was. */ @@ -326,7 +283,7 @@ .wipe-lg{position:static} /* Device 2. Wiping a booth is the one act on this page that nothing brings back, so it alone wears the stripe. The fill waits for the hover. */ - .wipe-lg button{height:auto;min-width:0;padding:10px 14px 8px;border-radius:var(--radius-md); + .wipe-lg button{padding:10px 14px 8px;border-radius:var(--radius-md); font-family:var(--font-sans);font-size:var(--size-sm);font-weight:600;letter-spacing:.02em; background:var(--hazard-stripe) top / 100% 3px no-repeat,transparent; border:1px solid var(--danger);color:var(--danger-text);-webkit-backdrop-filter:none;backdrop-filter:none} diff --git a/docs/contracts/r2_flow.contract.md b/docs/contracts/r2_flow.contract.md index 4d9f9f5..9481ad6 100644 --- a/docs/contracts/r2_flow.contract.md +++ b/docs/contracts/r2_flow.contract.md @@ -1,6 +1,6 @@ --- -contract_version: "0.1-PROPOSED" -status: "PROPOSED 2026-09-23 by design-dev. Ruled by the operator the same day in the `flow` mark on booth-flow-concepts (direction a_b; compare MODE to be built in this arc; voice plain; emblem no), relayed via Miranda → booth-dev, verbatim at docs/rulings/. Compare mode is NOT in this contract: it lands after this one as r3, as a view toggle over the same item record." +contract_version: "0.2-BUILT" +status: "BUILT 2026-09-23 on design-dev/svos-retheme (C1-C7, TDD), awaiting heid code-review and bug-hunt before the hand-over to booth-dev. PROPOSED 2026-09-23 by design-dev. Ruled by the operator the same day in the `flow` mark on booth-flow-concepts (direction a_b; compare MODE to be built in this arc; voice plain; emblem no), relayed via Miranda → booth-dev, verbatim at docs/rulings/. Compare mode is NOT in this contract: it lands after this one as r3, as a view toggle over the same item record." module: "booth.app + booth.items + templates (the review flow)" purpose: "Make the Booth a place where judgment happens rather than a place where files are shown. The operator's bar is 'did anything change when I opened it'. A reskin cannot clear that bar; this contract changes the flow. There are three surfaces and one plumbing change. THE DESK: the index triaged by what needs the operator. THE LIGHTBOX: a booth page with the set on the left and the verdict beside it. THE REVIEW: full size with the judgment on screen, a filmstrip, and seen-tracking. The plumbing is IN-PLACE JUDGMENT: a mark POST that does not reload the page or eject you from full size." depends_on: