giteadmin/lifeos-prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: consistent row styling for capture and focus items

Browse Source 
- Remove card-style spacing (margin, border-radius, background) from capture-item and focus-item
- Use border-bottom pattern matching list-row for uniform density
- Wrap capture and focus items in .card containers

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Michael
2026-03-03 01:57:59 +00:00
parent 1c2279664c
commit 6871330ce8
3 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
static/style.css
View File

@@ -795,10 +795,8 @@ a:hover { color: var(--accent-hover); }
align-items: flex-start; align-items: flex-start;
gap: 8px; gap: 8px;
padding: 6px 12px; padding: 6px 12px;
background: var(--surface); border-bottom: 1px solid var(--border);
border: 1px solid var(--border); transition: background var(--transition);
border-radius: var(--radius);
margin-bottom: 8px;
} }
.capture-text { .capture-text {
@@ -818,14 +816,11 @@ a:hover { color: var(--accent-hover); }
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 6px 12px; padding: 6px 12px;
background: var(--surface); border-bottom: 1px solid var(--border);
border: 1px solid var(--border); transition: background var(--transition);
border-radius: var(--radius);
margin-bottom: 6px;
transition: all var(--transition);
} }
.focus-item:hover { border-color: var(--accent); } .focus-item:hover { background: var(--surface2); }
.focus-item.completed { opacity: 0.6; } .focus-item.completed { opacity: 0.6; }
.focus-item.completed .focus-title { text-decoration: line-through; } .focus-item.completed .focus-title { text-decoration: line-through; }

4
templates/capture.html
View File

@@ -53,11 +53,12 @@
</div> </div>
{% if items %} {% if items %}
<div class="card">
{% for item in items %} {% for item in items %}
{# Batch header #} {# Batch header #}
{% if item._batch_first and item.import_batch_id %} {% if item._batch_first and item.import_batch_id %}
<div class="flex items-center justify-between mb-2 mt-3" style="padding:6px 12px;background:var(--surface2);border-radius:var(--radius-sm)"> <div class="flex items-center justify-between" style="padding:6px 12px;background:var(--surface2);">
<span class="text-xs text-muted">Batch &middot; {{ batches[item.import_batch_id|string] }} items</span> <span class="text-xs text-muted">Batch &middot; {{ batches[item.import_batch_id|string] }} items</span>
<form action="/capture/batch/{{ item.import_batch_id }}/undo" method="post" style="display:inline" data-confirm="Delete all items in this batch?"> <form action="/capture/batch/{{ item.import_batch_id }}/undo" method="post" style="display:inline" data-confirm="Delete all items in this batch?">
<button class="btn btn-ghost btn-xs" style="color:var(--red)">Undo batch</button> <button class="btn btn-ghost btn-xs" style="color:var(--red)">Undo batch</button>
@@ -99,6 +100,7 @@
{% endif %} {% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div>
{% else %} {% else %}
<div class="empty-state"> <div class="empty-state">
<div class="empty-state-icon">&#128229;</div> <div class="empty-state-icon">&#128229;</div>

2
templates/focus.html
View File

@@ -14,6 +14,7 @@
<!-- Focus items --> <!-- Focus items -->
{% if items %} {% if items %}
<div class="card">
{% for item in items %} {% for item in items %}
<div class="focus-item {{ 'completed' if item.completed }}"> <div class="focus-item {{ 'completed' if item.completed }}">
{% with reorder_url="/focus/reorder", item_id=item.id, extra_fields={"focus_date": focus_date|string} %} {% with reorder_url="/focus/reorder", item_id=item.id, extra_fields={"focus_date": focus_date|string} %}
@@ -35,6 +36,7 @@
</form> </form>
</div> </div>
{% endfor %} {% endfor %}
</div>
{% else %} {% else %}
<div class="empty-state mb-4"><div class="empty-state-text">No focus items for this day</div></div> <div class="empty-state mb-4"><div class="empty-state-text">No focus items for this day</div></div>
{% endif %} {% endif %}