diff options
| -rw-r--r-- | web/index.html | 4 | ||||
| -rw-r--r-- | web/style.css | 52 |
2 files changed, 56 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html index 0704cb8..d003c6a 100644 --- a/web/index.html +++ b/web/index.html @@ -41,6 +41,7 @@ </header> <nav class="tab-bar"> <button class="tab active" data-tab="stories" title="Tracker">π</button> + <button class="tab" data-tab="tasks" title="Tasks">π</button> <button class="tab" data-tab="stats" title="Model Dashboard">π</button> <button class="tab" data-tab="drops" title="Drops">π</button> <button class="tab" data-tab="settings" title="Settings">βοΈ</button> @@ -57,6 +58,9 @@ <div class="task-empty">Loadingβ¦</div> </div> </div> + <div data-panel="tasks" hidden> + <div class="tasks-board"></div> + </div> <div data-panel="drops" hidden> <div class="drops-panel"></div> </div> diff --git a/web/style.css b/web/style.css index a5fefb7..68b6f95 100644 --- a/web/style.css +++ b/web/style.css @@ -2164,6 +2164,58 @@ dialog label select:focus { overflow-y: auto; } +/* Tasks board β mirrors stories-board layout, wider columns for task card content */ +.tasks-board { + display: flex; + align-items: flex-start; + gap: 0.75rem; + overflow-x: auto; + padding-bottom: 0.5rem; +} + +.tasks-column { + flex: 0 0 300px; + width: 300px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 0.5rem; + padding: 0.625rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.tasks-column-header { + display: flex; + align-items: baseline; + justify-content: space-between; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.03em; + color: var(--text-muted); + padding-bottom: 0.4rem; + border-bottom: 1px solid var(--border); +} + +.tasks-column-count { + font-weight: 700; + color: var(--text); + background: var(--surface); + border-radius: 999px; + padding: 0 0.45em; + font-size: 0.7rem; +} + +.tasks-column-list { + display: flex; + flex-direction: column; + gap: 0.5rem; + min-height: 40px; + max-height: 60vh; + overflow-y: auto; +} + .story-card { cursor: grab; } |