Match custody view layout to inventory view pattern
Build and push image / build (push) Successful in 1m0s
Build and push image / build (push) Successful in 1m0s
Use responsive clamped padding, full-width maxWidth, and even column proportions so the page fills available space consistently with other tabs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,8 @@ import { remainingShort } from "../stats.js";
|
|||||||
import { fmt, TYPE_GLYPHS } from "../format.js";
|
import { fmt, TYPE_GLYPHS } from "../format.js";
|
||||||
import { Btn, Card, Icon } from "../components/primitives/index.js";
|
import { Btn, Card, Icon } from "../components/primitives/index.js";
|
||||||
|
|
||||||
|
const GRID_COLS = "32px 2fr 1fr 1fr 1fr 280px";
|
||||||
|
|
||||||
export function CustodyView({
|
export function CustodyView({
|
||||||
data,
|
data,
|
||||||
onSelectItem,
|
onSelectItem,
|
||||||
@@ -32,17 +34,23 @@ export function CustodyView({
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ padding: "40px 48px", maxWidth: 1200 }}>
|
<div
|
||||||
<div style={{ marginBottom: 32 }}>
|
style={{
|
||||||
|
padding: "clamp(32px, 3vw, 64px) clamp(40px, 3vw, 80px) 80px",
|
||||||
|
maxWidth: 2400,
|
||||||
|
margin: "0 auto",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ marginBottom: 24 }}>
|
||||||
|
<div className="smallcaps" style={{ color: "var(--ink-3)" }}>
|
||||||
|
{checkedOut.length} item{checkedOut.length === 1 ? "" : "s"} checked out
|
||||||
|
</div>
|
||||||
<h1
|
<h1
|
||||||
className="serif"
|
className="serif"
|
||||||
style={{ fontSize: 44, margin: 0, fontWeight: 500, letterSpacing: "-0.02em" }}
|
style={{ fontSize: 44, margin: "6px 0 0", fontWeight: 500, letterSpacing: "-0.02em" }}
|
||||||
>
|
>
|
||||||
My Custody
|
My Custody
|
||||||
</h1>
|
</h1>
|
||||||
<div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6 }}>
|
|
||||||
{checkedOut.length} item{checkedOut.length === 1 ? "" : "s"} checked out
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{checkedOut.length === 0 ? (
|
{checkedOut.length === 0 ? (
|
||||||
@@ -69,7 +77,7 @@ export function CustodyView({
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "32px 2fr 1fr 0.8fr 0.8fr 260px",
|
gridTemplateColumns: GRID_COLS,
|
||||||
padding: "10px 16px",
|
padding: "10px 16px",
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
color: "var(--ink-3)",
|
color: "var(--ink-3)",
|
||||||
@@ -125,7 +133,7 @@ function CustodyRow({
|
|||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "grid",
|
display: "grid",
|
||||||
gridTemplateColumns: "32px 2fr 1fr 0.8fr 0.8fr 260px",
|
gridTemplateColumns: GRID_COLS,
|
||||||
padding: "12px 16px",
|
padding: "12px 16px",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
borderBottom: "1px solid var(--line)",
|
borderBottom: "1px solid var(--line)",
|
||||||
|
|||||||
Reference in New Issue
Block a user