q6 commited on
Commit
9b5f085
·
1 Parent(s): 5514a58

Simplify explorer task rows

Browse files
Files changed (2) hide show
  1. frontend/app.js +2 -2
  2. frontend/style.css +12 -8
frontend/app.js CHANGED
@@ -97,12 +97,11 @@ async function loadSearches(page = 1) {
97
  const searches = data.items || []
98
  if (!searches.length && !active.length) { list.innerHTML = "No searches yet"; return }
99
  const activeHtml = active.map(t => {
100
- const pct = t.total > 0 ? Math.round(t.done / t.total * 100) : 0
101
  const label = t.total > 0 ? `${t.done}/${t.total}` : "..."
102
  return `<div class="search-item active-task" data-id="${esc(t.id)}">
103
  <span class="id">${esc(t.id)}</span>
104
  <span class="time">${esc(t.type)} ${esc(t.phase)} ${label}</span>
105
- <div class="mini-bar"><div style="width:${pct}%"></div></div>
106
  </div>`
107
  }).join("")
108
  const savedHtml = searches.map(s => {
@@ -112,6 +111,7 @@ async function loadSearches(page = 1) {
112
  <span class="id">${esc(s.id)}</span>
113
  <span class="time">${ts}</span>
114
  <span class="search-actions">
 
115
  <button class="btn-icon btn-rename" title="Rename">&#9998;</button>
116
  <button class="btn-icon btn-delete" title="Delete">&times;</button>
117
  </span>
 
97
  const searches = data.items || []
98
  if (!searches.length && !active.length) { list.innerHTML = "No searches yet"; return }
99
  const activeHtml = active.map(t => {
 
100
  const label = t.total > 0 ? `${t.done}/${t.total}` : "..."
101
  return `<div class="search-item active-task" data-id="${esc(t.id)}">
102
  <span class="id">${esc(t.id)}</span>
103
  <span class="time">${esc(t.type)} ${esc(t.phase)} ${label}</span>
104
+ <span class="search-status active-mark">...</span>
105
  </div>`
106
  }).join("")
107
  const savedHtml = searches.map(s => {
 
111
  <span class="id">${esc(s.id)}</span>
112
  <span class="time">${ts}</span>
113
  <span class="search-actions">
114
+ <span class="search-status done-mark">✓</span>
115
  <button class="btn-icon btn-rename" title="Rename">&#9998;</button>
116
  <button class="btn-icon btn-delete" title="Delete">&times;</button>
117
  </span>
frontend/style.css CHANGED
@@ -198,17 +198,21 @@ input:focus, select:focus { outline: none; border-color: var(--accent); backgrou
198
  }
199
  .search-actions {
200
  display: flex;
 
201
  gap: .3rem;
202
  }
203
- .active-task { border-color: #754; }
204
- .mini-bar {
205
- width: 120px;
206
- height: 5px;
207
- background: #25282b;
 
208
  border-radius: 999px;
209
- overflow: hidden;
 
210
  }
211
- .mini-bar div { height: 100%; background: var(--warn); }
 
212
  .list-pager, #pager {
213
  display: flex;
214
  align-items: center;
@@ -395,7 +399,7 @@ input:focus, select:focus { outline: none; border-color: var(--accent); backgrou
395
  .submit-grid { grid-template-columns: 1fr; }
396
  .btn-primary { width: 100%; }
397
  .search-item { grid-template-columns: minmax(0, 1fr) auto; }
398
- .search-actions, .mini-bar { grid-column: 1 / -1; }
399
  .detail-header { grid-template-columns: 1fr; }
400
  #results-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; }
401
  }
 
198
  }
199
  .search-actions {
200
  display: flex;
201
+ align-items: center;
202
  gap: .3rem;
203
  }
204
+ .active-task { border-color: #3a3222; }
205
+ .search-status {
206
+ display: inline-grid;
207
+ place-items: center;
208
+ width: 24px;
209
+ height: 24px;
210
  border-radius: 999px;
211
+ font-size: .8rem;
212
+ font-weight: 900;
213
  }
214
+ .active-mark { color: var(--warn); background: #2d2515; }
215
+ .done-mark { color: var(--ok); background: #13281d; }
216
  .list-pager, #pager {
217
  display: flex;
218
  align-items: center;
 
399
  .submit-grid { grid-template-columns: 1fr; }
400
  .btn-primary { width: 100%; }
401
  .search-item { grid-template-columns: minmax(0, 1fr) auto; }
402
+ .search-actions { grid-column: 1 / -1; }
403
  .detail-header { grid-template-columns: 1fr; }
404
  #results-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); max-height: none; }
405
  }