Create 2026-05-14-1824-adapt-terminal-view.html
This commit is contained in:
parent
9644e9ceef
commit
7d3dfbe0b9
1 changed files with 182 additions and 0 deletions
182
docs/turns/2026-05-14-1824-adapt-terminal-view.html
Normal file
182
docs/turns/2026-05-14-1824-adapt-terminal-view.html
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>Turn Summary: Adapt Terminal View</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
color-scheme: dark;
|
||||||
|
--bg: oklch(15% 0.014 250);
|
||||||
|
--panel: oklch(20% 0.018 250);
|
||||||
|
--panel-2: oklch(24% 0.02 250);
|
||||||
|
--text: oklch(92% 0.014 250);
|
||||||
|
--muted: oklch(70% 0.025 250);
|
||||||
|
--faint: oklch(58% 0.024 250);
|
||||||
|
--accent: oklch(78% 0.15 75);
|
||||||
|
--border: oklch(100% 0.006 250 / 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 12% 0%, oklch(78% 0.15 75 / 0.12), transparent 30rem),
|
||||||
|
var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: min(920px, calc(100% - 32px));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 48px 0 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
padding-bottom: 18px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow,
|
||||||
|
h2 {
|
||||||
|
color: var(--accent);
|
||||||
|
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 0.74rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
max-width: 14ch;
|
||||||
|
margin: 8px 0 10px;
|
||||||
|
font-size: clamp(2rem, 5vw, 3.4rem);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-width: 72ch;
|
||||||
|
margin: 0 0 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
margin-top: 18px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: linear-gradient(180deg, var(--panel-2), var(--panel));
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
li + li {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 0.92em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 1px solid oklch(78% 0.15 75 / 0.34);
|
||||||
|
border-radius: 18px;
|
||||||
|
background: oklch(78% 0.15 75 / 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
color: var(--faint);
|
||||||
|
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<header>
|
||||||
|
<div class="eyebrow">2026-05-14 18:24</div>
|
||||||
|
<h1>Adapt Terminal View</h1>
|
||||||
|
<p class="meta">Surface: <code>apps/web/app/globals.css</code> · Beads issue: <code>islandflow-1f5</code></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="summary">
|
||||||
|
<h2>Summary</h2>
|
||||||
|
<p>
|
||||||
|
The terminal view now adapts more deliberately across desktop, tablet, and phone contexts. The update preserves the evidence-console density on larger screens while making controls, navigation, filters, drawers, and data lanes more usable on smaller touch devices.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Changes Made</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Changed the tablet rail from a stacked desktop sidebar into a sticky horizontal command rail with scrollable navigation and metric strips.</li>
|
||||||
|
<li>Added phone-specific touch sizing for buttons, navigation links, filter controls, and pane actions.</li>
|
||||||
|
<li>Converted the flow filter panel and evidence drawers into bottom-sheet style surfaces on small screens.</li>
|
||||||
|
<li>Adjusted pane spacing, page heading scale, and table row heights to fit small screens without hiding core workflow content.</li>
|
||||||
|
<li>Kept dense data tables horizontally scrollable instead of crushing columns into unreadable cells.</li>
|
||||||
|
<li>Replaced colored side-stripe table accents with full-row inset outlines to preserve semantic color without banned side-stripe treatment.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Context</h2>
|
||||||
|
<p>
|
||||||
|
Islandflow is a product-register interface for serious traders and researchers. The relevant scene is a user moving between a desktop workstation and a smaller companion screen while monitoring live or replayed market evidence. The design keeps the dark, composed terminal atmosphere because it supports high-contrast scanning in dim, focused trading conditions.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Important Implementation Details</h2>
|
||||||
|
<ul>
|
||||||
|
<li>The responsive behavior remains CSS-only in <code>globals.css</code>, avoiding component churn in the large terminal module.</li>
|
||||||
|
<li>The <code>1180px</code> breakpoint now rethinks navigation as a horizontal rail rather than a full-width vertical block.</li>
|
||||||
|
<li>The <code>720px</code> breakpoint shifts to touch-first behavior with 44px minimum targets and bottom-reachable overlays.</li>
|
||||||
|
<li>The data tables retain their information architecture by using horizontal scroll lanes and slightly larger mobile rows.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Validation</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Ran <code>bun test apps/web/app/terminal.test.ts apps/web/app/routes.test.ts</code>: 64 passing tests.</li>
|
||||||
|
<li>Ran <code>bun --cwd=apps/web run build</code>: production Next.js build completed successfully.</li>
|
||||||
|
<li>Searched for banned colored side-stripe CSS patterns in the app stylesheet after the update: none found.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Issues, Limitations, and Mitigations</h2>
|
||||||
|
<ul>
|
||||||
|
<li>No real-device browser session was available in this turn, so tactile behavior was validated through CSS structure and production build checks rather than physical-device testing.</li>
|
||||||
|
<li>The tables intentionally remain horizontally scrollable on phones because hiding key evidence columns would damage the investigative workflow.</li>
|
||||||
|
<li>Bottom-sheet drawers can still cover part of the active tape on very short screens, mitigated by max-height limits and internal scrolling.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Follow-up Work</h2>
|
||||||
|
<p>No new follow-up issue was filed. The current adaptation is self-contained under <code>islandflow-1f5</code>.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue