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; }
/* Info sections inside Scheduler Information panel */
.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-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; }
+37 -17
View File
@@ -503,26 +503,29 @@ $runningScripts = array_unique($runningScripts);
<div class="vv-sug-header" onclick="vvToggleSug(this)">
<span class="vv-sug-chevron">▾</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>
<!-- 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
assistant gives are the same text and cannot drift — the same argument that
makes this page parse script PURPOSE blocks instead of restating them.
Two views of one file, swapped rather than stacked. Collapsed shows the terse
one-line-per-control list this help used to be — short enough that Next Runs and
the error blocks stay on screen, which an earlier always-visible tier of 33
table rows was not. Expanding replaces it with the full document.
.vv-sug-brief is the inverse of .vv-sug-body; vvToggleSug() and
vvRestoreSugStates() drive both. -->
Two views of one file, both inside the collapsible body so the chevron still
means what it means everywhere else on this page. Open lands on the terse
one-line-per-control list — short enough that Next Runs and the error blocks
stay on screen. "More info" swaps in the full document for when you actually
need the walkthroughs. -->
<div class="vv-sug-body vv-info-body">
<div class="vv-doc">
<ul class="vv-info-cols" id="vv-howto-brief">
<?= vv_docs_brief('Plugin/unraid/pages/readme/scheduler-readme.md', $_vv_doc_vars,
fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?>
</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>
<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,
fn($h) => is_string($h) && str_starts_with($h, 'Reference —')) ?>
</ul>
</div>
<!-- ── Next Runs ── -->
@@ -2109,13 +2112,31 @@ function vvToggleSug(header) {
body.style.display = open ? 'none' : '';
chevron.textContent = open ? '▸' : '▾';
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');
}
// 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() {
document.querySelectorAll('[data-save-key]').forEach(block => {
const saved = localStorage.getItem('vv-sug-' + block.dataset.saveKey);
@@ -2126,9 +2147,8 @@ function vvRestoreSugStates() {
const open = saved === '1';
body.style.display = open ? '' : 'none';
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