mikael-lovqvists-claude-agent/task-inventory
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign entry row layout: 3-column grid with stacked meta

Browse Source 
- expand | meta (type/id/status/priority stacked) | main (title/body/footer)
- Tags and actions in a .task-footer row inside .task-main
- Title now gets full remaining width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-05-17 22:32:57 +00:00
parent 5b54b58625
commit 4b5c3a3725
2 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/style.css
View File

@@ -109,15 +109,38 @@ main { padding: 1.25rem; }
.task-row {
display: grid;
grid-template-columns: 1.25rem 2.5rem 5rem 4.5rem 1fr auto auto;
align-items: center;
gap: 0.5rem;
grid-template-columns: 1.25rem auto 1fr;
align-items: start;
gap: 0.5rem 0.75rem;
padding: 0.5rem 0.75rem;
background: #242424;
border-radius: 4px;
border-left: 3px solid transparent;
}
.task-meta {
display: flex;
flex-direction: column;
gap: 0.2rem;
width: 4.5rem;
align-items: stretch;
}
.task-main {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.task-footer {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.1rem;
}
.task-row[data-priority='high'] { border-left-color: #e05555; }
.task-row[data-priority='normal'] { border-left-color: #5588e0; }
.task-row[data-priority='low'] { border-left-color: #555; }
@@ -127,7 +150,7 @@ main { padding: 1.25rem; }
.task-row[data-status='done'] { opacity: 0.5; }
.task-row[data-status='cancelled'] { opacity: 0.4; text-decoration: line-through; }
.task-id { color: #666; font-size: 12px; }
.task-id { color: #666; font-size: 11px; text-align: center; }
.task-title { font-weight: 500; }
.task-status, .task-priority {
@@ -139,6 +162,8 @@ main { padding: 1.25rem; }
letter-spacing: 0.03em;
}
.task-actions { display: flex; gap: 0.4rem; }
.task-status[data-val='open'] { background: #1e3a5f; color: #6ab0f5; }
.task-status[data-val='done'] { background: #1a3a1a; color: #6ad06a; }
.task-status[data-val='cancelled'] { background: #2a1a1a; color: #c06060; }
@@ -148,7 +173,7 @@ main { padding: 1.25rem; }
.task-priority[data-val='normal'] { background: transparent; color: #777; }
.task-priority[data-val='low'] { background: transparent; color: #555; }
.task-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.task-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
.tag {
font-size: 11px;
@@ -161,8 +186,6 @@ main { padding: 1.25rem; }
.clickable-tag { cursor: pointer; }
.clickable-tag:hover { background: #363650; color: #aabbee; }
.task-actions { display: flex; gap: 0.4rem; }
.btn-expand {
width: 1.25rem;
height: 1.25rem;

24
public/templates.html
View File

@@ -2,19 +2,23 @@
<template id="t-entry-row">
<div class="task-row">
<button class="btn-expand" hidden></button>
<span class="task-id"></span>
<span class="task-status"></span>
<span class="task-priority"></span>
<div class="task-main">
<div class="task-meta">
<div class="entry-type-chip" hidden></div>
<span class="task-id"></span>
<span class="task-status"></span>
<span class="task-priority"></span>
</div>
<div class="task-main">
<div class="task-title markup"></div>
<div class="task-body markup" hidden></div>
</div>
<span class="task-tags"></span>
<div class="task-actions">
<button class="btn-sub">+ Sub</button>
<button class="btn-edit">Edit</button>
<button class="btn-delete">Delete</button>
<div class="task-footer">
<span class="task-tags"></span>
<div class="task-actions">
<button class="btn-sub">+ Sub</button>
<button class="btn-edit">Edit</button>
<button class="btn-delete">Delete</button>
</div>
</div>
</div>
</div>
</template>