Open on the condensed list, with a More info button for the full document
This commit is contained in:
@@ -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; }
|
||||
|
||||
@@ -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">
|
||||
<?= 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">
|
||||
<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>
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user