generated from coulomb/repo-seed
dashboard: move Decision Health card into TOC sidebar column
Inject the KPI box into #observablehq-toc (the framework's right-column aside) instead of position:fixed. The TOC column already doesn't scroll, so no CSS tricks are needed. Falls back to a float:right inline block if the TOC element is absent. - Remove .kpi-sidebar-outer and its fixed positioning - Remove min-width/max-width from .kpi-infobox; add margin-bottom to separate it from the TOC links below Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -150,8 +150,10 @@ const _kpiBox = html`<div class="kpi-infobox">
|
|||||||
|
|
||||||
withDocHelp(_kpiBox, "/docs/decisions-kpi");
|
withDocHelp(_kpiBox, "/docs/decisions-kpi");
|
||||||
|
|
||||||
// ── Fixed sidebar — stays in viewport top-right corner while scrolling ──────
|
// ── Inject into the TOC sidebar (right column, non-scrolling) ───────────────
|
||||||
display(html`<div class="kpi-sidebar-outer">${_kpiBox}</div>`);
|
const _toc = document.querySelector("#observablehq-toc");
|
||||||
|
if (_toc) _toc.prepend(_kpiBox);
|
||||||
|
else display(html`<div style="float:right;width:215px;margin-left:1rem">${_kpiBox}</div>`);
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@@ -353,15 +355,6 @@ if (escalated.length > 0) {
|
|||||||
```
|
```
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* ── Fixed KPI sidebar ────────────────────────────────────────────────────── */
|
|
||||||
.kpi-sidebar-outer {
|
|
||||||
position: fixed;
|
|
||||||
top: 3.75rem;
|
|
||||||
right: 1.5rem;
|
|
||||||
width: 215px;
|
|
||||||
z-index: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Live indicator ───────────────────────────────────────────────────────── */
|
/* ── Live indicator ───────────────────────────────────────────────────────── */
|
||||||
.live-indicator {
|
.live-indicator {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
@@ -376,11 +369,9 @@ if (escalated.length > 0) {
|
|||||||
border: 1px solid var(--theme-foreground-faint, #e0e0e0);
|
border: 1px solid var(--theme-foreground-faint, #e0e0e0);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 0.75rem 1rem;
|
padding: 0.75rem 1rem;
|
||||||
min-width: 195px;
|
|
||||||
max-width: 240px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 1px 6px rgba(0,0,0,0.07);
|
box-shadow: 0 1px 6px rgba(0,0,0,0.07);
|
||||||
flex-shrink: 0;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
.kpi-infobox-title {
|
.kpi-infobox-title {
|
||||||
font-size: 0.68rem;
|
font-size: 0.68rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user