Number and stripe the per-script settings so each one reads as its own row
This commit is contained in:
@@ -320,7 +320,17 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
|
||||
.vv-cf-file { font-size: 10px; color: #555; background: #1a1a1a; border: 1px solid #2e2e2e;
|
||||
padding: 1px 6px; border-radius: 3px; font-weight: normal; text-transform: none;
|
||||
letter-spacing: 0; }
|
||||
.vv-cf-field { margin-bottom: 10px; }
|
||||
/* One setting per striped row, numbered down the left. Previously these were separated only by
|
||||
a 10px margin, which read as one continuous block once a script had more than a few. The
|
||||
stripe is what actually does the separating; the number gives each one a handle to refer to. */
|
||||
.vv-cf-field { display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 8px 10px; border-radius: 3px; border-left: 2px solid transparent; }
|
||||
.vv-cf-alt { background: #141414; }
|
||||
.vv-cf-field:hover { border-left-color: #2d4a6a; }
|
||||
.vv-cf-num { font-family: monospace; font-size: 10px; color: #3a3a3a; min-width: 20px;
|
||||
text-align: right; padding-top: 2px; flex-shrink: 0; user-select: none; }
|
||||
.vv-cf-field:hover .vv-cf-num { color: #6a6a6a; }
|
||||
.vv-cf-body { flex: 1; min-width: 0; }
|
||||
.vv-cf-key { font-family: monospace; font-size: 12px; color: #ccc; margin-bottom: 3px; }
|
||||
.vv-cf-desc { font-size: 11px; color: #666; margin-bottom: 4px; font-style: italic; line-height: 1.4; }
|
||||
.vv-cf-scalar { display: block; width: 100%; box-sizing: border-box; background: #111; border: 1px solid #333;
|
||||
|
||||
@@ -2036,12 +2036,21 @@ function vvEditConf(id) {
|
||||
function vvRenderConfForm(groups) {
|
||||
const esc = s => String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
let html = '';
|
||||
// Continuous numbering across the whole panel, not restarting per group. It mirrors the
|
||||
// editor's line gutter, and it gives every setting one unambiguous handle — "number 12"
|
||||
// beats "the third one under Docker Watchdog" when someone is reading it back to you.
|
||||
// The stripe is driven by this counter rather than :nth-child, because the group header is
|
||||
// also a child and would throw the parity off inside every section.
|
||||
let n = 0;
|
||||
for (const g of groups) {
|
||||
html += '<div class="vv-cf-group">';
|
||||
html += '<div class="vv-cf-group-header">' + esc(g.subsection)
|
||||
+ ' <span class="vv-cf-file">' + esc(g.file) + '</span></div>';
|
||||
for (const f of g.fields) {
|
||||
html += '<div class="vv-cf-field">';
|
||||
n++;
|
||||
html += '<div class="vv-cf-field' + (n % 2 === 0 ? ' vv-cf-alt' : '') + '">';
|
||||
html += '<span class="vv-cf-num">' + n + '</span>';
|
||||
html += '<div class="vv-cf-body">';
|
||||
html += '<div class="vv-cf-key">' + esc(f.key) + '</div>';
|
||||
if (f.desc) html += '<div class="vv-cf-desc">' + esc(f.desc) + '</div>';
|
||||
if (f.type === 'scalar') {
|
||||
@@ -2054,7 +2063,7 @@ function vvRenderConfForm(groups) {
|
||||
+ ' data-key="' + esc(f.key) + '" data-file="' + esc(f.file) + '" data-type="' + esc(f.type) + '"'
|
||||
+ ' rows="' + rows + '">' + esc(f.value) + '</textarea>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '</div></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user