Open on the condensed list, with a More info button for the full document

This commit is contained in:
Gmer4Lfe
2026-08-05 18:03:47 -04:00
parent aeb8c01370
commit 99486b1eaf
2 changed files with 45 additions and 17 deletions
+8
View File
@@ -503,6 +503,14 @@ body.vv-fullscreen #displaybox { padding-left: 1rem !important; padding-top: .5r
.vv-sug-configured { color: #4caf50; font-size: 11px; } .vv-sug-configured { color: #4caf50; font-size: 11px; }
/* Info sections inside Scheduler Information panel */ /* Info sections inside Scheduler Information panel */
.vv-info-block .vv-sug-title { color: #9ab; } .vv-info-block .vv-sug-title { color: #9ab; }
/* Depth switch on the help header. Outlined rather than filled — it changes what you are
reading, it does not do anything to the machine, and every button on this page that does
is filled. */
.vv-more-btn { flex-shrink: 0; background: none; border: 1px solid #8a8a8a; color: #ccc;
font-size: 10px; letter-spacing: .04em; padding: 2px 9px; border-radius: 3px;
cursor: pointer; font-family: inherit; }
.vv-more-btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.06); }
.vv-more-btn.vv-more-on { border-color: #2d4a6a; color: #7a9eb5; background: #14202c; }
.vv-info-body { padding: 2px 10px 10px; } .vv-info-body { padding: 2px 10px 10px; }
.vv-info-cols { margin: 0; padding-left: 16px; columns: 2; column-gap: 20px; column-fill: balance; } .vv-info-cols { margin: 0; padding-left: 16px; columns: 2; column-gap: 20px; column-fill: balance; }
.vv-info-cols li { font-size: 12px; color: #aaa; margin-bottom: 5px; break-inside: avoid; line-height: 1.5; } .vv-info-cols li { font-size: 12px; color: #aaa; margin-bottom: 5px; break-inside: avoid; line-height: 1.5; }
+37 -17
View File
@@ -503,26 +503,29 @@ $runningScripts = array_unique($runningScripts);
<div class="vv-sug-header" onclick="vvToggleSug(this)"> <div class="vv-sug-header" onclick="vvToggleSug(this)">
<span class="vv-sug-chevron">▾</span> <span class="vv-sug-chevron">▾</span>
<span class="vv-sug-title">How do I use this</span> <span class="vv-sug-title">How do I use this</span>
<!-- stopPropagation: the whole header is the collapse target, so without it the
button would switch view and immediately shut the block it just changed. -->
<button class="vv-more-btn" id="vv-howto-more" type="button"
onclick="event.stopPropagation(); vvToggleHowToMore(this)">More info</button>
</div> </div>
<!-- Rendered from pages/readme/scheduler-readme.md, not maintained here. That file is <!-- Rendered from pages/readme/scheduler-readme.md, not maintained here. That file is
also what the AI tab retrieves, so the panel you read and the answer the also what the AI tab retrieves, so the panel you read and the answer the
assistant gives are the same text and cannot drift — the same argument that assistant gives are the same text and cannot drift — the same argument that
makes this page parse script PURPOSE blocks instead of restating them. makes this page parse script PURPOSE blocks instead of restating them.
Two views of one file, swapped rather than stacked. Collapsed shows the terse Two views of one file, both inside the collapsible body so the chevron still
one-line-per-control list this help used to be — short enough that Next Runs and means what it means everywhere else on this page. Open lands on the terse
the error blocks stay on screen, which an earlier always-visible tier of 33 one-line-per-control list — short enough that Next Runs and the error blocks
table rows was not. Expanding replaces it with the full document. stay on screen. "More info" swaps in the full document for when you actually
.vv-sug-brief is the inverse of .vv-sug-body; vvToggleSug() and need the walkthroughs. -->
vvRestoreSugStates() drive both. -->
<div class="vv-sug-body vv-info-body"> <div class="vv-sug-body vv-info-body">
<div class="vv-doc"> <ul class="vv-info-cols" id="vv-howto-brief">
<?= vv_docs_render('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars) ?>
</div>
</div>
<ul class="vv-info-cols vv-sug-brief vv-info-body" style="display:none">
<?= vv_docs_brief('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars, <?= vv_docs_brief('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars,
fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?> fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?>
</ul> </ul>
<div class="vv-doc" id="vv-howto-full" style="display:none">
<?= vv_docs_render('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars) ?>
</div>
</div>
</div> </div>
<!-- ── Next Runs ── --> <!-- ── Next Runs ── -->
@@ -2109,13 +2112,31 @@ function vvToggleSug(header) {
body.style.display = open ? 'none' : ''; body.style.display = open ? 'none' : '';
chevron.textContent = open ? '▸' : '▾'; chevron.textContent = open ? '▸' : '▾';
const block = header.closest('[data-save-key]'); const block = header.closest('[data-save-key]');
// Optional collapsed-state summary: shown exactly when the body is hidden. Lets a block put
// something terse on screen while shut instead of nothing, without a second toggle to manage.
const brief = block && block.querySelector('.vv-sug-brief');
if (brief) brief.style.display = open ? '' : 'none';
if (block) localStorage.setItem('vv-sug-' + block.dataset.saveKey, open ? '0' : '1'); if (block) localStorage.setItem('vv-sug-' + block.dataset.saveKey, open ? '0' : '1');
} }
// Condensed ↔ full for the help block. Both views live inside the collapsible body, so this is
// only about which one is on screen — the chevron still collapses the block outright, the same
// as every other block on the page. Persisted, because which depth you want is a preference and
// not a per-visit decision.
function vvToggleHowToMore(btn) {
const brief = document.getElementById('vv-howto-brief');
const full = document.getElementById('vv-howto-full');
if (!brief || !full) return;
const showFull = full.style.display === 'none';
full.style.display = showFull ? '' : 'none';
brief.style.display = showFull ? 'none' : '';
btn.textContent = showFull ? 'Less' : 'More info';
btn.classList.toggle('vv-more-on', showFull);
localStorage.setItem('vv-howto-more', showFull ? '1' : '0');
}
function vvRestoreHowToMore() {
if (localStorage.getItem('vv-howto-more') !== '1') return;
const btn = document.getElementById('vv-howto-more');
if (btn) vvToggleHowToMore(btn);
}
function vvRestoreSugStates() { function vvRestoreSugStates() {
document.querySelectorAll('[data-save-key]').forEach(block => { document.querySelectorAll('[data-save-key]').forEach(block => {
const saved = localStorage.getItem('vv-sug-' + block.dataset.saveKey); const saved = localStorage.getItem('vv-sug-' + block.dataset.saveKey);
@@ -2126,9 +2147,8 @@ function vvRestoreSugStates() {
const open = saved === '1'; const open = saved === '1';
body.style.display = open ? '' : 'none'; body.style.display = open ? '' : 'none';
if (chevron) chevron.textContent = open ? '▾' : '▸'; if (chevron) chevron.textContent = open ? '▾' : '▸';
const brief = block.querySelector('.vv-sug-brief');
if (brief) brief.style.display = open ? 'none' : '';
}); });
vvRestoreHowToMore();
} }
// Suggested cron click in script browser tree: apply to the matching card cron input and save // Suggested cron click in script browser tree: apply to the matching card cron input and save