From 12b16ed0dab04c0ca307263ff9bef325172276d5 Mon Sep 17 00:00:00 2001 From: agent-linusswartz Date: Fri, 31 Jul 2026 00:05:10 -0300 Subject: [PATCH] feat(help): redesign help documentation --- index.html | 508 ++++++++++++++++-- .../help-feature-request.test.mjs | 39 ++ scripts/validate-browser-quality.mjs | 86 ++- scripts/validate-runtime-smoke.mjs | 10 +- src/capabilities/03a-localization-messages.js | 47 +- src/index.template.html | 166 ++++-- src/styles/03-components.css | 281 +++++++++- src/ui/71-bindings-library.js | 14 +- 8 files changed, 1046 insertions(+), 105 deletions(-) diff --git a/index.html b/index.html index 8c07b86..77fbfa8 100644 --- a/index.html +++ b/index.html @@ -1584,30 +1584,287 @@ } .help-modal { -width: min(860px, 100%); - max-height: min(86vh, 900px); - overflow: auto; +width: min(960px, 100%); + height: min(90vh, 940px); + height: min(90dvh, 940px); + max-height: min(90vh, 940px); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.help-modal > p { +flex: 0 0 auto; + max-width: 72ch; } -.help-grid { +.help-document { display: grid; - gap: 10px; - margin: 8px 0 14px; + grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); + gap: 24px; + flex: 1 1 auto; + min-height: 0; + margin: 8px 0 0; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-gutter: stable; + border-top: 1px solid var(--border); } -.help-grid section { -border: 1px solid var(--border); - border-radius: 10px; - background: var(--input-bg); - padding: 10px 12px; +.help-index { +position: sticky; + top: 0; + align-self: start; + display: grid; + gap: 2px; + padding: 16px 16px 0 0; + border-right: 1px solid var(--border); + background: var(--panel); + z-index: 1; +} + +.help-index a { +display: block; + padding: 7px 8px; + border-left: 2px solid transparent; + color: var(--mutedText); + font-size: 13px; + font-weight: 700; + text-decoration: none; +} + +.help-index a:hover { +border-left-color: var(--accent); + color: var(--foreground); +} + +.help-index a:focus-visible { +outline: 2px solid var(--ring); + outline-offset: 1px; +} + +.help-content { +min-width: 0; +} + +.help-content section { +padding: 16px 0; + border-bottom: 1px solid var(--border); + scroll-margin-top: 16px; +} + +.help-content section:last-child { +border-bottom: 0; } -.help-grid h4 { +.help-content h4 { +margin: 0 0 8px; + font-size: 15px; + color: var(--foreground); +} + +.help-content h5 { margin: 0 0 6px; font-size: 13px; color: var(--foreground); } +.help-content p { +margin: 0 0 10px; + color: var(--mutedText); + line-height: 1.55; +} + +.help-content p:last-child { +margin-bottom: 0; +} + +.help-content ul { +margin: 0; + padding-left: 18px; + color: var(--mutedText); + line-height: 1.5; +} + +.help-extension-list { +display: flex; + flex-wrap: wrap; + gap: 6px 12px; + padding: 0 !important; + margin: 0 0 12px !important; + list-style: none; +} + +.help-extension-list code { +font-weight: 750; +} + +.help-persistence-columns { +display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 20px; + margin: 14px 0 18px; +} + +.help-persistence-columns ul { +font-size: 14px; + line-height: 1.55; +} + +.help-persistence-columns > div + div { +padding-left: 20px; + border-left: 1px solid var(--border); +} + +.help-event-table { +width: 100%; + min-width: 0; + table-layout: fixed; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + font-size: 13px; +} + +.help-event-table caption { +padding: 0 0 8px; + color: var(--foreground); + font-size: 13px; + font-weight: 800; + text-align: left; +} + +.help-event-table th, +.help-event-table td { +padding: 9px 10px; + border: 0; + border-top: 1px solid var(--border); + color: var(--mutedText); + line-height: 1.45; + overflow: visible; + text-align: left; + text-overflow: clip; + vertical-align: top; + white-space: normal; + overflow-wrap: anywhere; +} + +.help-event-table thead th { +color: var(--foreground); + font-size: 12px; + font-weight: 800; +} + +.help-event-table tbody th { +width: 19%; + color: var(--foreground); + font-weight: 750; +} + +.help-event-table tbody td { +background: transparent; +} + +.help-mobile-cell-label { +display: none; +} + +.help-modal > .modal-actions { +flex: 0 0 auto; + gap: 10px; + margin: 0 -18px -18px; + padding: 12px 18px; + border-top: 1px solid var(--border); + background: var(--panel); +} + +@media (max-width: 640px) { +.help-document { +display: block; +} + +.help-index { +position: static; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + padding: 12px 0; + border-right: 0; + border-bottom: 1px solid var(--border); +} + +.help-index a { +padding: 6px; +} + +.help-persistence-columns { +display: block; +} + +.help-persistence-columns > div + div { +padding: 14px 0 0; + margin-top: 14px; + border-top: 1px solid var(--border); + border-left: 0; +} + +.help-event-table, +.help-event-table tbody, +.help-event-table tr, +.help-event-table th, +.help-event-table td { +display: block; + width: 100%; + box-sizing: border-box; +} + +.help-event-table caption { +display: block; + width: 100%; + box-sizing: border-box; +} + +.help-event-table thead { +position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +.help-event-table tbody tr { +padding: 10px 0; + border-top: 1px solid var(--border); +} + +.help-event-table tbody th, +.help-event-table tbody td { +padding: 3px 0; + border: 0; +} + +.help-event-table tbody th { +width: 100%; + margin-bottom: 4px; + overflow-wrap: normal; +} + +.help-event-table tbody td { +display: grid; + grid-template-columns: minmax(74px, 0.34fr) minmax(0, 1fr); + gap: 8px; +} + +.help-mobile-cell-label { +display: block; + color: var(--foreground); + font-size: 11px; + font-weight: 800; +} +} + .top-command-bar { display: flex; align-items: center; @@ -6047,45 +6304,145 @@

Atalhos principais