nodes/co5dt-ComfyUI-Persistent-Queue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve pending queue card UI and responsiveness

Browse Source
This commit is contained in:
Simon Cordt
2025-09-26 18:17:51 +02:00
parent 21a930a58b
commit 42a1beffc8
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/queue_style.css
+3 -2
View File
@@ -38,11 +38,12 @@
.pqueue-sections{display:flex;flex-direction:column;gap:1rem;overflow:auto;padding-bottom:5.5rem;overflow-anchor:none;overflow-x:hidden}
.pqueue-toolbar-host{position:sticky;bottom:0;z-index:1000;margin-top:.5rem}
.pqueue-card{background:#1a1a1a;backdrop-filter:blur(22px);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:1rem 1.15rem;display:flex;flex-direction:column;gap:.75rem;border:1px solid rgba(82,82,91,.22)}
.pqueue-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.pqueue-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pqueue-card__title-wrap{display:flex;align-items:center;gap:.6rem;color:var(--heading-text,#f9fafb)}
.pqueue-card__title{margin:0;font-size:1.05rem;font-weight:600}
.pqueue-card__subtitle{font-size:.78rem;color:var(--subtle-text,#94a3b8)}
.pqueue-card__actions{display:flex;gap:.4rem;align-items:center}
.pqueue-card__actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pqueue-card__actions .pqueue-input{min-width:0;width:clamp(140px,32vw,260px);max-width:100%}
.pqueue-card__body{display:flex;flex-direction:column;gap:.75rem}
.pqueue-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}
.pqueue-metric{padding:.75rem;border-radius:12px;background:linear-gradient(145deg,rgba(26,26,26,.9),rgba(34,34,34,.85));border:1px solid rgba(82,82,91,.24);display:flex;flex-direction:column;gap:.5rem}
web/js/pqueue.ui.queue.js
+2 -2
View File
@@ -191,7 +191,7 @@
]);
// Build collapsible card (mirrors metrics behavior)
const bodyInner = UI.el("div", { class: "pqueue-pending" }, [wrapper, footer]);
const bodyInner = UI.el("div", { class: "pqueue-pending" }, [filter, wrapper, footer]);
const body = UI.el("div", { class: "pqueue-card__body" }, [bodyInner]);
try {
body.style.overflow = 'hidden';
@@ -245,7 +245,7 @@
} catch (err) { /* noop */ }
});
const actions = UI.el("div", { class: "pqueue-card__actions" }, [filter, toggle]);
const actions = UI.el("div", { class: "pqueue-card__actions" }, [toggle]);
const header = UI.el("header", { class: "pqueue-card__header" }, [titleWrap, actions]);
const wrap = UI.el("section", { class: ["pqueue-card"] }, [header]);
try { wrap.setAttribute('data-collapsed', state.uiQueueCollapsed ? 'true' : 'false'); } catch (err) { /* noop */ }