FailedProxy/Varaverk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scheduler: two-panel responsive layout with running indicator

Browse Source 
Scripts list on left, persistent log panel on right. On screens ≤880px
falls back to stacked single-column. Right panel stays open until page
refresh or another selection. Running dot pulses green on the job row
and in the log header while script executes, clears when log goes stale.
This commit is contained in:
Gmer4Lfe
2026-05-23 17:59:51 -04:00
parent d0b842a489
commit 706ef2dd72
2 changed files with 212 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Plugin/usr/local/emhttp/plugins/varaverk/css/varaverk.css
+27 -2
View File
@@ -38,8 +38,8 @@
.vv-script { background: #161616; border: 1px solid #333; border-radius: 4px;
padding: 6px 10px; margin: 4px 0; margin-left: 20px; }
.vv-job-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vv-job-label { flex: 1; font-size: 14px; min-width: 160px; }
.vv-cron { width: 150px; background: #111; border: 1px solid #444; color: #ddd;
.vv-job-label { flex: 1; font-size: 14px; min-width: 120px; }
.vv-cron { width: 140px; background: #111; border: 1px solid #444; color: #ddd;
padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 13px; }
.vv-children { padding-top: 8px; border-top: 1px solid #333; margin-top: 8px; }
.vv-advanced-toggle { background: none; border: 1px solid #555; color: #aaa;
@@ -51,6 +51,31 @@
.vv-btn-sm:hover { border-color: #888; color: #fff; }
.vv-btn-sm.active { border-color: #4caf50; color: #4caf50; }
/* Running dot */
.vv-job-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vv-dot-running { background: #4caf50; animation: vv-pulse-dot 1s ease-in-out infinite; }
#vv-log-dot { animation: vv-pulse-dot 1s ease-in-out infinite; }
@keyframes vv-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
/* Selected job row */
.vv-row-selected { background: rgba(255,255,255,0.05); border-radius: 4px;
outline: 1px solid #555; }
/* Two-panel layout */
#vv-sched-layout { display: flex; gap: 16px; align-items: flex-start; }
#vv-sched-left { flex: 0 0 500px; min-width: 0; }
#vv-sched-right { display: none; flex: 1; min-width: 0; position: sticky; top: 16px; }
#vv-sched-right.vv-panel-visible { display: block; }
.vv-log-right-pre { min-height: 360px; max-height: calc(100vh - 200px); }
/* Mobile: stack vertically, right panel full-width below cards */
@media (max-width: 880px) {
#vv-sched-layout { flex-direction: column; }
#vv-sched-left { flex: none; width: 100%; }
#vv-sched-right { position: static; width: 100%; }
.vv-log-right-pre { min-height: 200px; max-height: 340px; }
}
/* Card footer */
.vv-card-footer { display: flex; align-items: center; gap: 10px;
margin-top: 12px; padding-top: 10px; border-top: 1px solid #333; }