Skip to content

Instantly share code, notes, and snippets.

@rgstephens

rgstephens/issue31-before.html

Last active September 11, 2026 04:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rgstephens/31dd619e34c77473634aadc26e69c566 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rgstephens/31dd619e34c77473634aadc26e69c566 to your computer and use it in GitHub Desktop.
Download ZIP
drill-tracker issue #31 — placeholder
Raw
issue31-before.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #31 Before</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button, input { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 700px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 700px; margin: 0 auto; }
.row h3 { margin-bottom: 12px; font-size: 15px; color: var(--dust-dim); font-weight: 700; }
.phone {
width: 360px; background: var(--slate); color: var(--dust);
box-shadow: 0 12px 40px rgb(43 43 40 / 0.28); border-radius: 6px; overflow: hidden;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 17px; }
.body { padding: 16px; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
.catalog-export { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; justify-content: flex-end; margin-bottom: 12px; }
.meta { font-size: 13px; color: var(--dust-dim); }
.screen-actions { display: flex; justify-content: center; margin-bottom: 12px; }
.screen-actions.run-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0; }
button.ghost {
background: none; border: 1px solid var(--dust-dim); color: var(--dust); border-radius: 4px;
font-weight: 700; padding: 0 14px; min-height: 40px; cursor: pointer; font-size: 14px;
}
button.primary.stamp {
background: transparent; border: 2px solid var(--cue-chalk); color: var(--cue-chalk);
border-radius: 4px; font-weight: 700; padding: 0 16px; min-height: 44px; cursor: pointer; font-size: 15px;
}
.search {
width: 100%; min-height: 44px; border: 1px solid var(--rule); background: var(--paper-bright);
color: var(--dust); padding: 0 12px; border-radius: 4px; margin-bottom: 4px; font-size: 15px;
}
.row-list { list-style: none; margin: 8px 0 0; padding: 0; }
.item {
display: flex; justify-content: space-between; align-items: center; gap: 8px;
padding: 10px 0; border-bottom: 1px solid var(--rule); min-height: 48px;
}
.item-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; }
.item-copy { display: flex; flex-direction: column; min-width: 0; }
.item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 108px; }
.pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--tip-leather); flex-shrink: 0; margin-right: 4px; }
.setup { color: var(--cue-chalk); font-weight: 700; flex-shrink: 0; background: none; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.range { flex-shrink: 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--dust); cursor: pointer; }
.row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
button.icon-button { min-width: 32px; min-height: 32px; background: none; border: 0; color: var(--dust); font-size: 14px; cursor: pointer; }
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #31 — Before</h1>
<p>
Today's list screen, as reported: an export line, a delete-list row,
the search field, then a run-actions row that wraps ("Run set" ·
"Last run: 2 Sep" · "Past runs (2)"), and every drill row carries a
title, a "0&ndash;6 &times; 5"/"Set up" range button, and an up/down/&#8942;
cluster — four separate controls per row on a 360px phone.
</p>
</div>
<section class="block">
<div class="phone">
<div class="hdr"><strong>Complete Book of Snooker Shots</strong></div>
<div class="body">
<button class="back-link">&larr; Lists</button>
<div class="catalog-export">
<span class="meta">Practice history is not included.</span>
<button class="ghost">Export</button>
</div>
<div class="screen-actions">
<button class="ghost" style="border-color:var(--miscue); color:var(--miscue);">Delete list&hellip;</button>
</div>
<input class="search" type="search" placeholder="Search titles" />
<div class="screen-actions run-actions">
<button class="primary stamp">Run set</button>
<span class="meta">Last run: 2 Sep, 7:42pm</span>
<button class="ghost">Past runs (2)</button>
</div>
<ul class="row-list">
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">Potting the Yellow</span>
<span class="meta">p. 7</span>
</span>
</button>
<button class="range">1&ndash;6 &times; 5</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="pending-dot"></span>
<span class="item-copy">
<span class="item-title">Black Red Black</span>
<span class="meta">p. 7</span>
</span>
</button>
<button class="range">0&ndash;3 &times; 5</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">5 Ball Line Up</span>
</span>
</button>
<button class="setup">Set up</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
Raw
issue31-option-a-kebab-consolidated.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #31 Option A: Kebab-consolidated</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button, input { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 700px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 700px; margin: 0 auto; }
.phone {
width: 360px; background: var(--slate); color: var(--dust);
box-shadow: 0 12px 40px rgb(43 43 40 / 0.28); border-radius: 6px; overflow: hidden; position: relative;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 16px; }
.body { padding: 16px; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
.hdr-menu { position: relative; }
.icon-button { min-width: 40px; min-height: 40px; background: none; border: 0; color: var(--dust); font-size: 16px; cursor: pointer; }
.row-menu-list {
position: absolute; right: 0; top: 100%; z-index: 5; min-width: 150px; background: var(--slate-raised);
border: 1px solid var(--rule); border-radius: 4px; padding: 4px; display: flex; flex-direction: column;
box-shadow: 0 8px 24px rgb(43 43 40 / 0.18);
}
.row-menu-list button { min-height: 40px; background: none; border: 0; color: var(--dust); font: inherit; text-align: left; padding: 0 12px; cursor: pointer; font-size: 14px; }
.row-menu-list button.danger { color: var(--miscue); }
.search {
width: 100%; min-height: 44px; border: 1px solid var(--rule); background: var(--paper-bright);
color: var(--dust); padding: 0 12px; border-radius: 4px; margin-bottom: 12px; font-size: 15px;
}
.run-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
button.primary.stamp {
background: transparent; border: 2px solid var(--cue-chalk); color: var(--cue-chalk);
border-radius: 4px; font-weight: 700; padding: 0 16px; min-height: 44px; cursor: pointer; font-size: 15px; flex: 1;
}
/* Past runs is a real button — the app's ghost vocabulary, height matched to the Run set stamp. */
.run-row .past-runs {
background: transparent; border: 1px solid var(--dust-dim); color: var(--dust);
font: inherit; font-size: 14px; font-weight: 700; border-radius: 4px;
padding: 0 14px; min-height: 44px; cursor: pointer; flex-shrink: 0;
}
.row-list { list-style: none; margin: 0; padding: 0; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-height: 48px; }
.item-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; flex: 1; }
.item-copy { display: flex; flex-direction: column; min-width: 0; }
.item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.setup-chip {
font-family: "Courier New", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--cue-chalk); border: 1px solid var(--cue-chalk); border-radius: 3px; padding: 1px 5px; flex-shrink: 0;
}
.pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--tip-leather); flex-shrink: 0; margin-right: 4px; }
.row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; position: relative; }
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #31 — Option A: Kebab-consolidated</h1>
<p>
Export and Delete list — both rare, low-frequency actions — move into
one "List options" menu in the header (the same &#8942; pattern already
used for drill/history row actions). "Last run" text is dropped;
Run set and Past runs (2) — now a proper button — share one row.
Each drill row drops its range button entirely —
"Configure&hellip;"/"Set up" moves into that row's existing &#8942;
menu, next to Archive — and rows are title-only: the per-drill note
("p. 7") lives on the drill's own screen, not the list. Unconfigured
drills keep a small inline chip so they're still easy to spot in a scan.
</p>
</div>
<section class="block">
<div class="phone">
<div class="hdr">
<strong>Complete Book of Snooker Shots</strong>
<span class="hdr-menu">
<button class="icon-button" aria-haspopup="menu" aria-expanded="true" aria-label="List options">&#8942;</button>
<div class="row-menu-list" role="menu">
<button role="menuitem">Export</button>
<button role="menuitem" class="danger">Delete list&hellip;</button>
</div>
</span>
</div>
<div class="body">
<button class="back-link">&larr; Lists</button>
<input class="search" type="search" placeholder="Search titles" />
<div class="run-row">
<button class="primary stamp">Run set</button>
<button class="past-runs">Past runs (2)</button>
</div>
<ul class="row-list">
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">Potting the Yellow</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="pending-dot"></span>
<span class="item-copy">
<span class="item-title">Black Red Black</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">5 Ball Line Up</span>
</span>
<span class="setup-chip">Set up</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
Raw
issue31-option-b-icon-toolbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #31 Option B: Icon toolbar</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button, input { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 700px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 700px; margin: 0 auto; }
.phone {
width: 360px; background: var(--slate); color: var(--dust);
box-shadow: 0 12px 40px rgb(43 43 40 / 0.28); border-radius: 6px; overflow: hidden;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-tools { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.icon-button { min-width: 36px; min-height: 36px; background: none; border: 0; color: var(--dust-dim); font-size: 15px; cursor: pointer; }
.icon-button.danger { color: var(--miscue); }
.body { padding: 16px; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
.search {
width: 100%; min-height: 44px; border: 1px solid var(--rule); background: var(--paper-bright);
color: var(--dust); padding: 0 12px; border-radius: 4px; margin-bottom: 12px; font-size: 15px;
}
.run-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px; }
button.primary.stamp {
background: transparent; border: 2px solid var(--cue-chalk); color: var(--cue-chalk);
border-radius: 4px; font-weight: 700; padding: 0 16px; min-height: 44px; cursor: pointer; font-size: 15px; flex: 1;
}
.history-chip {
display: flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--rule);
border-radius: 4px; color: var(--dust-dim); font: inherit; font-size: 13px; padding: 0 10px; cursor: pointer;
}
.row-list { list-style: none; margin: 0; padding: 0; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-height: 48px; }
.item-main { display: flex; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; flex: 1; }
.item-copy { display: flex; flex-direction: column; min-width: 0; }
.item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { font-size: 13px; color: var(--dust-dim); }
.setup-dot {
width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--cue-chalk); flex-shrink: 0;
}
.pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--tip-leather); flex-shrink: 0; }
.row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #31 — Option B: Icon toolbar</h1>
<p>
The smallest structural change: Export and Delete become two small
icon buttons directly in the header — no menu, still one tap each,
just compact. "Last run" is dropped and "Past runs" shrinks to a
small count chip beside Run set. Drill rows drop the range button
and use a small dashed dot (matching the app's existing dashed
"not yet" vocabulary) instead of a "Set up" button; tapping a row's
&#8942; still offers Configure/Archive.
</p>
</div>
<section class="block">
<div class="phone">
<div class="hdr">
<strong>Complete Book of Snooker Shots</strong>
<span class="hdr-tools">
<button class="icon-button" aria-label="Export list" title="Export">&#8681;</button>
<button class="icon-button danger" aria-label="Delete list" title="Delete list">&#128465;</button>
</span>
</div>
<div class="body">
<button class="back-link">&larr; Lists</button>
<input class="search" type="search" placeholder="Search titles" />
<div class="run-row">
<button class="primary stamp">Run set</button>
<button class="history-chip">&#128337; 2</button>
</div>
<ul class="row-list">
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">Potting the Yellow</span>
<span class="meta">p. 7</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="pending-dot"></span>
<span class="item-copy">
<span class="item-title">Black Red Black</span>
<span class="meta">p. 7</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="setup-dot" aria-hidden="true"></span>
<span class="item-copy">
<span class="item-title">5 Ball Line Up</span>
<span class="meta">Not set up</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
Raw
issue31-option-c-tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Drill Tracker — Issue #31 Option C: Drills / Runs tabs</title>
<style>
:root {
--slate: #f6f1e4; --slate-raised: #ede6d3; --dust: #2b2b28; --dust-dim: #7a7365;
--cue-chalk: #3b5b7a; --tip-leather: #9c9483; --miscue: #b23a2e; --chrome-bg: #ede6d3;
--on-accent: #f6f1e4; --rule: #c9bfa8; --paper-bright: #fbf8f0; --grid: #e3dbc6;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.4; color: var(--dust); background: #cfc6b4; }
h1, h2, h3 { font-weight: 700; margin: 0; }
button, input { font-family: inherit; }
.page-head { padding: 24px 20px 8px; max-width: 900px; margin: 0 auto; }
.page-head p { max-width: 46rem; }
section.block { padding: 8px 20px 40px; max-width: 900px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; gap: 24px; }
.row h3 { margin-bottom: 12px; font-size: 15px; color: var(--dust-dim); font-weight: 700; }
.phone {
width: 360px; background: var(--slate); color: var(--dust);
box-shadow: 0 12px 40px rgb(43 43 40 / 0.28); border-radius: 6px; overflow: hidden;
}
.hdr {
background: var(--chrome-bg); border-bottom: 1px solid var(--rule); display: flex;
align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; min-height: 56px;
}
.hdr strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-menu { position: relative; }
.icon-button { min-width: 36px; min-height: 36px; background: none; border: 0; color: var(--dust-dim); font-size: 15px; cursor: pointer; }
.row-menu-list {
position: absolute; right: 0; top: 100%; z-index: 5; min-width: 150px; background: var(--slate-raised);
border: 1px solid var(--rule); border-radius: 4px; padding: 4px; display: flex; flex-direction: column;
box-shadow: 0 8px 24px rgb(43 43 40 / 0.18);
}
.row-menu-list button { min-height: 40px; background: none; border: 0; color: var(--dust); font: inherit; text-align: left; padding: 0 12px; cursor: pointer; font-size: 14px; }
.row-menu-list button.danger { color: var(--miscue); }
.body { padding: 16px; }
.back-link { background: none; border: 0; color: var(--cue-chalk); font: inherit; font-size: 14px; padding: 0; margin-bottom: 12px; cursor: pointer; }
.top-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.top-tabs button {
background: none; border: 0; border-bottom: 3px solid transparent; color: var(--dust);
font: inherit; font-weight: 700; min-height: 40px; padding: 0 4px; cursor: pointer; font-size: 15px;
}
.top-tabs button[aria-pressed="true"] { color: var(--cue-chalk); border-bottom: 3px dashed var(--cue-chalk); }
.search {
width: 100%; min-height: 44px; border: 1px solid var(--rule); background: var(--paper-bright);
color: var(--dust); padding: 0 12px; border-radius: 4px; margin-bottom: 12px; font-size: 15px;
}
button.primary.stamp {
background: transparent; border: 2px solid var(--cue-chalk); color: var(--cue-chalk);
border-radius: 4px; font-weight: 700; padding: 0 16px; min-height: 44px; cursor: pointer; font-size: 15px;
width: 100%; margin-bottom: 12px;
}
.row-list { list-style: none; margin: 0; padding: 0; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-height: 48px; }
.item-main { display: flex; align-items: center; gap: 8px; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; flex: 1; }
.item-copy { display: flex; flex-direction: column; min-width: 0; }
.item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { font-size: 13px; color: var(--dust-dim); }
.setup-chip {
font-family: "Courier New", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--cue-chalk); border: 1px solid var(--cue-chalk); border-radius: 3px; padding: 1px 5px; flex-shrink: 0;
}
.pending-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--tip-leather); flex-shrink: 0; }
.row-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.run-ledger { list-style: none; margin: 0; padding: 0; }
.run-ledger-row { border-bottom: 1px solid var(--rule); padding: 12px 0; }
.run-ledger-time { font-weight: 700; margin-right: 8px; }
.run-status {
display: inline-block; font-family: "Courier New", monospace; font-size: 10px; letter-spacing: 0.05em;
text-transform: uppercase; border: 1px solid var(--cue-chalk); color: var(--cue-chalk); border-radius: 3px; padding: 1px 6px;
}
.run-metrics { display: flex; gap: 16px; margin: 6px 0 0; font-size: 13px; color: var(--dust-dim); }
</style>
</head>
<body>
<div class="page-head">
<h1>Issue #31 — Option C: Drills / Runs tabs</h1>
<p>
The boldest of the three: split the screen the same way a drill's
own detail screen already splits Log/History. "Drills" is search +
Run set + the drill list, full stop &mdash; "Last run" and "Past runs (N)"
both move to a "Runs" tab, which is exactly today's run-history
ledger with nothing squeezed in beside it. Export/Delete list join a
header menu as in Option A. The single biggest decluttering of the
primary view, at the cost of a real navigation change.
</p>
</div>
<section class="block row">
<div>
<h3>Drills tab</h3>
<div class="phone">
<div class="hdr">
<strong>Complete Book of Snooker Shots</strong>
<span class="hdr-menu">
<button class="icon-button" aria-haspopup="menu" aria-label="List options">&#8942;</button>
</span>
</div>
<div class="body">
<button class="back-link">&larr; Lists</button>
<div class="top-tabs">
<button aria-pressed="true">Drills</button>
<button>Runs</button>
</div>
<input class="search" type="search" placeholder="Search titles" />
<button class="primary stamp">Run set</button>
<ul class="row-list">
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">Potting the Yellow</span>
<span class="meta">p. 7</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="pending-dot"></span>
<span class="item-copy">
<span class="item-title">Black Red Black</span>
<span class="meta">p. 7</span>
</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
<li class="item">
<button class="item-main">
<span class="item-copy">
<span class="item-title">5 Ball Line Up</span>
</span>
<span class="setup-chip">Set up</span>
</button>
<span class="row-actions">
<button class="icon-button">&uarr;</button>
<button class="icon-button">&darr;</button>
<button class="icon-button">&#8942;</button>
</span>
</li>
</ul>
</div>
</div>
</div>
<div>
<h3>Runs tab</h3>
<div class="phone">
<div class="hdr">
<strong>Complete Book of Snooker Shots</strong>
<span class="hdr-menu">
<button class="icon-button" aria-haspopup="menu" aria-label="List options">&#8942;</button>
</span>
</div>
<div class="body">
<button class="back-link">&larr; Lists</button>
<div class="top-tabs">
<button>Drills</button>
<button aria-pressed="true">Runs</button>
</div>
<ul class="run-ledger">
<li class="run-ledger-row">
<time class="run-ledger-time">2 Sep, 7:42pm</time>
<span class="run-status">complete</span>
<div class="run-metrics"><span>Total 22</span><span>Success 70%</span><span>Completed 5/5</span></div>
</li>
<li class="run-ledger-row">
<time class="run-ledger-time">30 Aug, 6:15pm</time>
<span class="run-status">complete</span>
<div class="run-metrics"><span>Total 18</span><span>Success 57%</span><span>Completed 5/5</span></div>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment