Переглянути джерело

style: table-like layout for feeds management view

Restructured feed-toggle-list into a proper table layout:
- Two fixed-width checkbox columns on the left (Enable, Re-enrich)
- Feed URL column takes remaining space
- Last-seen column right-aligned
- Header row with uppercase labels
- Border-radius container with row separators
- Moved all inline styles to CSS (.feed-col-check, .feed-col-url, .feed-col-hint)
Lukas Goldschmidt 5 днів тому
батько
коміт
49551b58be
2 змінених файлів з 72 додано та 10 видалено
  1. 14 5
      dashboard/dashboard.js
  2. 58 5
      dashboard/style.css

+ 14 - 5
dashboard/dashboard.js

@@ -148,6 +148,13 @@ function renderFeedsList() {
     '<button onclick="loadFeeds()" style="font-size:.75rem;padding:.25rem .6rem;background:var(--surface2);border:1px solid var(--border);border-radius:6px;color:var(--text);cursor:pointer">↻ Refresh</button>' +
   '</div>';
   html += '<div class="feed-toggle-list">';
+  // Table header
+  html += '<div class="feed-toggle-header">' +
+    '<div class="feed-col-check">Enable</div>' +
+    '<div class="feed-col-check">Re-enrich</div>' +
+    '<div class="feed-col-url">Feed URL</div>' +
+    '<div class="feed-col-hint">Last seen</div>' +
+    '</div>';
   for (var i = 0; i < _feedsData.length; i++) {
     var f = _feedsData[i];
     var domain = f.feed_key.replace(/^https?:\/\//, '').replace(/\/$/, '');
@@ -156,14 +163,16 @@ function renderFeedsList() {
     var isEnabled = f.enabled !== false;
     var isReEnrich = f.re_enrich === true;
     html += '<div class="feed-toggle-row">' +
+      '<div class="feed-col-check">' +
       '<input type="checkbox" id="feed-' + esc(String(i)) + '"' + (isEnabled ? ' checked' : '') +
       ' onchange="toggleFeed(\'' + esc(f.feed_key) + '\', this.checked)" />' +
-      '<div class="feed-url">' + esc(domain) + '</div>' +
-      '<span class="feed-toggle-hint">' + lastItems + lastSeen + '</span>' +
-      '<label class="feed-re-enrich-label" style="font-size:.7rem;color:var(--text-dim);display:flex;align-items:center;gap:.2rem;margin-left:auto">' +
+      '</div>' +
+      '<div class="feed-col-check">' +
       '<input type="checkbox" id="re-enrich-' + esc(String(i)) + '"' + (isReEnrich ? ' checked' : '') +
-      ' onchange="toggleReEnrich(\'' + esc(f.feed_key) + '\', this.checked)" />' +
-      're-enrich</label>' +
+      ' onchange="toggleReEnrich(\'' + esc(f.feed_key) + '\', this.checked)" title="Re-enrich on content change" />' +
+      '</div>' +
+      '<div class="feed-col-url">' + esc(domain) + '</div>' +
+      '<div class="feed-col-hint">' + lastItems + lastSeen + '</div>' +
       '</div>';
   }
   html += '</div>';

+ 58 - 5
dashboard/style.css

@@ -205,13 +205,66 @@ tr:hover td { background: rgba(91,138,245,.05); }
 .feed-item .feed-count { color: var(--text-dim); font-size: .78rem; min-width: 50px; text-align: right; }
 
 /* ── Feeds management view ───────────────────────── */
-.feed-toggle-row { display: flex; align-items: center; padding: .55rem .6rem; border-bottom: 1px solid rgba(42,46,58,.4); }
+.feed-toggle-list {
+  display: flex;
+  flex-direction: column;
+  gap: .15rem;
+  border: 1px solid rgba(42,46,58,.4);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.feed-toggle-header,
+.feed-toggle-row {
+  display: flex;
+  align-items: center;
+  padding: .5rem .6rem;
+}
+.feed-toggle-header {
+  background: var(--surface2);
+  border-bottom: 1px solid rgba(42,46,58,.5);
+  padding: .35rem .6rem;
+}
+.feed-toggle-row {
+  border-bottom: 1px solid rgba(42,46,58,.3);
+}
 .feed-toggle-row:last-child { border: none; }
-.feed-toggle-row input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; margin-right: .6rem; }
-.feed-toggle-row .feed-url { flex: 1; font-size: .82rem; font-weight: 500; word-break: break-all; }
-.feed-toggle-row .feed-toggle-hint { font-size: .72rem; color: var(--text-dim); margin-left: .5rem; white-space: nowrap; }
 
-/* ── Toast ────────────────────────────────────────── */
+.feed-col-check {
+  width: 36px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.feed-col-check input[type=checkbox] {
+  accent-color: var(--accent);
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+.feed-col-url {
+  flex: 1;
+  min-width: 0;
+  font-size: .82rem;
+  font-weight: 500;
+  word-break: break-all;
+  padding: 0 .6rem;
+}
+.feed-col-hint {
+  font-size: .72rem;
+  color: var(--text-dim);
+  white-space: nowrap;
+  flex-shrink: 0;
+  text-align: right;
+}
+.feed-toggle-header .feed-col-url,
+.feed-toggle-header .feed-col-hint,
+.feed-toggle-header .feed-col-check {
+  font-size: .65rem;
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  color: var(--text-dim);
+}
 .toast {
   position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
   background: var(--surface); border: 1px solid var(--border); color: var(--text);