Reclaim height: seven data rows, slimmer headers, charts scroll sideways
Some checks are pending
build-gate / build (push) Waiting to run
Some checks are pending
build-gate / build (push) Waiting to run
Driver: "we are trying to reclaim height." TABLE = SEVEN DATA ROWS, stated in ROWS rather than pixels. The old formula derived the keyhole by subtraction (shell - map - bar - foot), so the row count was whatever fell out -- measured 300px = 11 rows. Now calc(var(--rd-table-rows,7) * var(--rd-table-row-h,26px)), so the promise is the declaration: change the row height and seven rows stays seven rows. His own arithmetic settles an earlier ambiguity (he had said both 77 and 7): seven is DATA rows, excluding field, footer and table header. HEADERS 137px -> 125px: topbar 52 -> 44, stats 30 -> 26, both now vars so a host tunes them in one place instead of three grid-template-rows that must agree. CHARTS scroll sideways instead of wrapping. This is the third pass on that trade and it resolves rather than reverses it: pass 1 was nowrap + ellipsis + overflow-x HIDDEN, so labels were truncated and unrecoverable -- the defect he rejected. This is nowrap + overflow-x AUTO, so the full label still exists and is reachable. Legend cap 176 -> 120. Measured at 1440x900: grid-template-rows 44/55/26/476/244, keyhole 182px, exactly 7 data rows, shell 863 -> 849 with the map gaining 116px.
This commit is contained in:
doxa-maps-88655c70
parent
e5c66272c2
commit
a69386582c
9 changed files with 62 additions and 35 deletions
|
|
@ -270,13 +270,16 @@ useShadowStyles(`
|
|||
Tokenized (not a bare literal) because 42px is repeated in THREE places that must stay in
|
||||
sync — the default row template below, .rd-table-collapsed's, and .rd-narrow's — the same
|
||||
failure mode --rd-edge was introduced to prevent for the horizontal gutter. */
|
||||
--rd-stats-h:30px;
|
||||
/* ★ HEIGHT RECLAIM 2026-09-23: topbar 52->44, stats 30->26. Both are now VARS so a host can
|
||||
tune them without editing three grid-template-rows declarations that must agree. */
|
||||
--rd-topbar-h:44px;
|
||||
--rd-stats-h:26px;
|
||||
--fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-lg:13px; --fs-xl:16px;
|
||||
--r-lg:10px; --r-md:6px; --r-pill:999px; }
|
||||
.profile-loader{ width:100%; height:100%; }
|
||||
.rd-shell{ position:relative; display:grid; width:100%; height:100%; min-height:560px; box-sizing:border-box;
|
||||
grid-template-columns: var(--facet-w,296px) minmax(0,1fr) var(--rail-w,264px);
|
||||
grid-template-rows: 52px auto var(--rd-stats-h,30px) 1fr var(--table-h,34%);
|
||||
grid-template-rows: var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) 1fr var(--table-h,34%);
|
||||
grid-template-areas: "topbar topbar topbar" "filters filters filters" "stats stats stats" "facets map rail" "facets table rail";
|
||||
gap:1px; background:var(--rd-line, #d1d4cd); container-type:inline-size;
|
||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
||||
|
|
@ -294,7 +297,7 @@ useShadowStyles(`
|
|||
still showing the live matched count and the Export CSV button (card
|
||||
BUILD-CSV-EXPORT-MOVE-TO-TABLE-HEADER-ALL-FIELDS). The row shrinks to the bar's height
|
||||
instead of 0, so the map still takes back nearly the whole cell via its 1fr. */
|
||||
.rd-shell.rd-table-collapsed{ grid-template-rows:52px auto var(--rd-stats-h,30px) 1fr var(--table-bar-h,30px); }
|
||||
.rd-shell.rd-table-collapsed{ grid-template-rows:var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) 1fr var(--table-bar-h,30px); }
|
||||
/* Facet/rail collapse — override the COLUMN template (not the --*-w vars) so collapse wins
|
||||
over a dragged inline width, exactly like the table row-template above. Map is minmax(0,1fr)
|
||||
and self-resizes via DashboardMapPanel's ResizeObserver → map.resize(). */
|
||||
|
|
@ -440,8 +443,20 @@ useShadowStyles(`
|
|||
table's real bottom edge, i.e. the sidebar grey-gap bug this card is fixing. --rd-table-foot-h
|
||||
is a var (not a literal) for the same reason --rd-table-bar-h is: DashboardDataTable can correct
|
||||
it if the footer's height ever changes, without this rule going stale. */
|
||||
/* ★ SEVEN DATA ROWS BY DEFAULT (Driver 2026-09-23, and he did the arithmetic himself):
|
||||
"the table needs to only show SEVEN rows by default height. 7 people group rows. That's NOT
|
||||
including the header. If you include the field, there'll be 8 rows. If you include the footer,
|
||||
that'd be 9. If you include the table's header, 10. But 7 actual data people groups."
|
||||
That also settles an earlier ambiguity: he had said 77 and 7 in one breath; 7 is DATA ROWS.
|
||||
★ STATED IN ROWS, NOT PIXELS, deliberately. The old formula derived the keyhole by subtraction
|
||||
(shell - map - bar - foot), so the row count was whatever fell out — MEASURED 300px = 11 rows,
|
||||
not 7. Deriving from --rd-table-rows x --rd-table-row-h means the promise is the declaration:
|
||||
change the row height and 7 rows stays 7 rows. --rd-table-max-h remains the escape hatch for a
|
||||
host that wants an explicit pixel cap.
|
||||
GOAL CONTEXT: "we are trying to RECLAIM HEIGHT." 7 rows is 182px against today's 300px keyhole,
|
||||
so this alone returns 118px of the ~147px available. */
|
||||
.rd-shell.rd-page-scroll .rd-grid{
|
||||
max-height:var(--rd-table-max-h, calc(var(--rd-shell-h, 80svh) - var(--rd-map-h, 40svh) - var(--rd-table-bar-h, 32px) - var(--rd-table-foot-h, 28px))); }
|
||||
max-height:var(--rd-table-max-h, calc(var(--rd-table-rows, 7) * var(--rd-table-row-h, 26px))); }
|
||||
/* ── FACETS/RAIL COLUMNS BOUNDED IN PAGE-SCROLL MODE (BUG-DASHBOARD-BAND-GROWS-ENORMOUS) ──────
|
||||
THE ROOT CAUSE, one level up from the table rule above. .rd-facets/.rd-rail are authored
|
||||
height:100%, which is correct in the FIXED-VIEWPORT grid (rows sum to a real, bounded
|
||||
|
|
@ -546,7 +561,7 @@ useShadowStyles(`
|
|||
UNPROVEN because no host has yet been measured before-and-after through this path. */
|
||||
:host([data-page-scroll="true"]){ height:auto; min-height:0; }
|
||||
|
||||
.rd-shell.rd-narrow{ grid-template-columns:1fr; grid-template-rows:52px auto var(--rd-stats-h,30px) minmax(0,1fr) 46px;
|
||||
.rd-shell.rd-narrow{ grid-template-columns:1fr; grid-template-rows:var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) minmax(0,1fr) 46px;
|
||||
grid-template-areas:"topbar" "filters" "stats" "body" "seg"; }
|
||||
.rd-shell.rd-narrow > [data-region]{ grid-area:body; min-width:0; min-height:0; }
|
||||
.rd-shell.rd-narrow > [data-region="topbar"]{ grid-area:topbar; }
|
||||
|
|
|
|||
|
|
@ -189,8 +189,8 @@ useShadowStyles(`
|
|||
reclaim vertical space, lower -webkit-line-clamp or trim the LABEL TEXT upstream — do NOT
|
||||
restore white-space:nowrap + ellipsis here, and do not re-cap this to the donut's height:
|
||||
that cap is precisely what forced the unreadable ellipsis the Driver rejected. */
|
||||
.rd-legend{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--dx-text, #3b463d); max-height:176px;
|
||||
overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-width:0;
|
||||
.rd-legend{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--dx-text, #3b463d); max-height:120px;
|
||||
overflow-y:auto; overflow-x:auto; flex:1 1 auto; min-width:0;
|
||||
scrollbar-width:thin; scrollbar-color:var(--dx-scroll-thumb, #c4c8c0) transparent; }
|
||||
.rd-legend::-webkit-scrollbar{ width:6px; height:6px; }
|
||||
.rd-legend::-webkit-scrollbar-track{ background:transparent; }
|
||||
|
|
@ -229,8 +229,20 @@ useShadowStyles(`
|
|||
overflow-wrap:anywhere breaks only words that genuinely cannot fit, so ordinary labels still
|
||||
break at spaces. Keep .rd-li's count at flex:0 0 auto — the number must never be the thing
|
||||
that yields. */
|
||||
.rd-lt{ flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.28;
|
||||
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
|
||||
/* ★ THIRD AND RESOLVING PASS ON THIS TRADE (2026-09-23) — read the block above first.
|
||||
History: (1) capped at 108px to match the donut, which forced ELLIPSIS; (2) the Driver rejected
|
||||
that on 2026-09-22 — "I cannot SCROLL RIGHT to read the rest of the text" — so wrapping was
|
||||
enabled, the cap raised to 176px, and a taller card was accepted as the cost.
|
||||
(3) He has now asked for the thing that was missing from BOTH: "add horizontal scrolling to the
|
||||
charts, we can remove line wrapping and save a lot of space in terms of height... we are trying
|
||||
to RECLAIM HEIGHT."
|
||||
★ THIS IS NOT A FLIP-FLOP BACK TO PASS 1, and the difference is the whole point. Pass 1 was
|
||||
nowrap + ellipsis + overflow-x:HIDDEN — the label was truncated and UNRECOVERABLE, which is the
|
||||
defect he rejected. This is nowrap + overflow-x:AUTO on the scroller: the full label still
|
||||
exists and is reachable by scrolling right. The old warning said "do NOT restore nowrap", and it
|
||||
was right given hidden overflow; with a real horizontal scrollbar its precondition is gone.
|
||||
The vertical saving is the reason: a 3-line clamp makes every long row ~2.5x tall. */
|
||||
.rd-lt{ flex:1 1 auto; min-width:0; white-space:nowrap; line-height:1.28; overflow:visible; }
|
||||
.rd-bars{ display:flex; flex-direction:column; gap:3px; }
|
||||
.rd-bar{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:10.5px; padding:1px 2px; border-radius:3px; }
|
||||
.rd-bar:hover{ background:var(--dx-surface, #f3f3f1); } .rd-bar.on{ background:#fff4ea; font-weight:700; color:var(--rd-ink, #3b463d); }
|
||||
|
|
|
|||
|
|
@ -557,8 +557,8 @@
|
|||
.rd-donut.has-sel .rd-slice{ opacity:.42; }
|
||||
.rd-slice.on, .rd-donut.has-sel .rd-slice.on{ opacity:1; stroke:var(--rd-ink, #3b463d); stroke-width:2.5;
|
||||
transform:scale(1.08); filter:drop-shadow(0 1px 2px rgba(31,39,51,.35)); }
|
||||
.rd-legend{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--dx-text, #3b463d); max-height:176px;
|
||||
overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-width:0;
|
||||
.rd-legend{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--dx-text, #3b463d); max-height:120px;
|
||||
overflow-y:auto; overflow-x:auto; flex:1 1 auto; min-width:0;
|
||||
scrollbar-width:thin; scrollbar-color:var(--dx-scroll-thumb, #c4c8c0) transparent; }
|
||||
.rd-legend::-webkit-scrollbar{ width:6px; height:6px; }
|
||||
.rd-legend::-webkit-scrollbar-track{ background:transparent; }
|
||||
|
|
@ -567,8 +567,7 @@
|
|||
.rd-li{ display:flex; align-items:flex-start; gap:5px; cursor:pointer; padding:1px 2px; border-radius:3px; }
|
||||
.rd-li:hover{ background:var(--dx-surface, #f3f3f1); } .rd-li.on{ background:#fff4ea; font-weight:700; color:var(--rd-ink, #3b463d); }
|
||||
.rd-li i{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; margin-top:3px; } .rd-li b{ margin-left:auto; color:var(--rd-muted, #6d766e); font-variant-numeric:tabular-nums; flex:0 0 auto; padding-left:4px; margin-top:1px; }
|
||||
.rd-lt{ flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.28;
|
||||
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
|
||||
.rd-lt{ flex:1 1 auto; min-width:0; white-space:nowrap; line-height:1.28; overflow:visible; }
|
||||
.rd-bars{ display:flex; flex-direction:column; gap:3px; }
|
||||
.rd-bar{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:10.5px; padding:1px 2px; border-radius:3px; }
|
||||
.rd-bar:hover{ background:var(--dx-surface, #f3f3f1); } .rd-bar.on{ background:#fff4ea; font-weight:700; color:var(--rd-ink, #3b463d); }
|
||||
|
|
@ -680,13 +679,14 @@
|
|||
--rd-primary:var(--dx-accent);
|
||||
--facet-w:296px; --rail-w:264px;
|
||||
--rd-edge:14px;
|
||||
--rd-stats-h:30px;
|
||||
--rd-topbar-h:44px;
|
||||
--rd-stats-h:26px;
|
||||
--fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-lg:13px; --fs-xl:16px;
|
||||
--r-lg:10px; --r-md:6px; --r-pill:999px; }
|
||||
.profile-loader{ width:100%; height:100%; }
|
||||
.rd-shell{ position:relative; display:grid; width:100%; height:100%; min-height:560px; box-sizing:border-box;
|
||||
grid-template-columns: var(--facet-w,296px) minmax(0,1fr) var(--rail-w,264px);
|
||||
grid-template-rows: 52px auto var(--rd-stats-h,30px) 1fr var(--table-h,34%);
|
||||
grid-template-rows: var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) 1fr var(--table-h,34%);
|
||||
grid-template-areas: "topbar topbar topbar" "filters filters filters" "stats stats stats" "facets map rail" "facets table rail";
|
||||
gap:1px; background:var(--rd-line, #d1d4cd); container-type:inline-size;
|
||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
||||
|
|
@ -700,7 +700,7 @@
|
|||
.rd-shell > [data-region="rail"]{ grid-area:rail; min-width:0; min-height:0; }
|
||||
.rd-rail{ display:flex; flex-direction:column; min-height:0; height:100%; background:var(--rd-bg, #f3f3f1); }
|
||||
.rd-rail > [data-region="charts-rail"]{ flex:1 1 auto; min-height:0; }
|
||||
.rd-shell.rd-table-collapsed{ grid-template-rows:52px auto var(--rd-stats-h,30px) 1fr var(--table-bar-h,30px); }
|
||||
.rd-shell.rd-table-collapsed{ grid-template-rows:var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) 1fr var(--table-bar-h,30px); }
|
||||
.rd-shell.rd-facet-collapsed{ grid-template-columns:0 minmax(0,1fr) var(--rail-w,264px); }
|
||||
.rd-shell.rd-rail-collapsed{ grid-template-columns:var(--facet-w,296px) minmax(0,1fr) 0; }
|
||||
.rd-shell.rd-facet-collapsed.rd-rail-collapsed{ grid-template-columns:0 minmax(0,1fr) 0; }
|
||||
|
|
@ -739,12 +739,12 @@
|
|||
.rd-shell.rd-page-scroll > [data-region="table"]{ overflow:visible; }
|
||||
.rd-shell.rd-page-scroll .rd-table-wrap{ height:auto; }
|
||||
.rd-shell.rd-page-scroll .rd-grid{
|
||||
max-height:var(--rd-table-max-h, calc(var(--rd-shell-h, 80svh) - var(--rd-map-h, 40svh) - var(--rd-table-bar-h, 32px) - var(--rd-table-foot-h, 28px))); }
|
||||
max-height:var(--rd-table-max-h, calc(var(--rd-table-rows, 7) * var(--rd-table-row-h, 26px))); }
|
||||
.rd-shell.rd-page-scroll > [data-region="facets"],
|
||||
.rd-shell.rd-page-scroll > [data-region="rail"]{ min-height:0; overflow:hidden;
|
||||
max-height:calc(var(--rd-shell-h, 80svh) + 1px); }
|
||||
:host([data-page-scroll="true"]){ height:auto; min-height:0; }
|
||||
.rd-shell.rd-narrow{ grid-template-columns:1fr; grid-template-rows:52px auto var(--rd-stats-h,30px) minmax(0,1fr) 46px;
|
||||
.rd-shell.rd-narrow{ grid-template-columns:1fr; grid-template-rows:var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) minmax(0,1fr) 46px;
|
||||
grid-template-areas:"topbar" "filters" "stats" "body" "seg"; }
|
||||
.rd-shell.rd-narrow > [data-region]{ grid-area:body; min-width:0; min-height:0; }
|
||||
.rd-shell.rd-narrow > [data-region="topbar"]{ grid-area:topbar; }
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <dashboard-plus-grid> custom element. -->
|
||||
<script src="../../dashboard-plus-grid.js" integrity="sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z" crossorigin="anonymous"></script>
|
||||
<script src="../../dashboard-plus-grid.js" integrity="sha384-w8aVTRyH8dlsHIjJMHrFe6QbnZaafEb3wGjykrVlqWvj+I0S5eMwXfyBHy/SS/X0" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <dashboard-plus-grid> custom element. -->
|
||||
<script src="../dashboard-plus-grid.js" integrity="sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z" crossorigin="anonymous"></script>
|
||||
<script src="../dashboard-plus-grid.js" integrity="sha384-w8aVTRyH8dlsHIjJMHrFe6QbnZaafEb3wGjykrVlqWvj+I0S5eMwXfyBHy/SS/X0" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
2
public/doxa-maps/index.html
generated
2
public/doxa-maps/index.html
generated
File diff suppressed because one or more lines are too long
8
public/doxa-maps/manifest.json
generated
8
public/doxa-maps/manifest.json
generated
|
|
@ -193,7 +193,7 @@
|
|||
"bundle": "dashboard-plus-grid",
|
||||
"scriptUrl": "./dashboard-plus-grid/dashboard-plus-grid.js",
|
||||
"output": "doxa-maps/dashboard-plus-grid/dashboard-plus-grid.js",
|
||||
"integrity": "sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z",
|
||||
"integrity": "sha384-w8aVTRyH8dlsHIjJMHrFe6QbnZaafEb3wGjykrVlqWvj+I0S5eMwXfyBHy/SS/X0",
|
||||
"elements": [
|
||||
"dashboard-plus-grid"
|
||||
],
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
"scriptUrl": "./dashboard-plus-grid/dashboard-plus-grid.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./dashboard-plus-grid/dashboard-plus-grid/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./dashboard-plus-grid/dashboard-plus-grid.js\" integrity=\"sha384-MbVOlkO0f80hxAA+LYHRv/GXQlQo99AzPpJ2LrRoOFkCAkSqCnd9D8IDGghbW5/z\" crossorigin=\"anonymous\"></script>\n<dashboard-plus-grid profile-config='{\"profile\":\"dashboard-plus-grid\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></dashboard-plus-grid>"
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./dashboard-plus-grid/dashboard-plus-grid.js\" integrity=\"sha384-w8aVTRyH8dlsHIjJMHrFe6QbnZaafEb3wGjykrVlqWvj+I0S5eMwXfyBHy/SS/X0\" crossorigin=\"anonymous\"></script>\n<dashboard-plus-grid profile-config='{\"profile\":\"dashboard-plus-grid\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></dashboard-plus-grid>"
|
||||
},
|
||||
"instances": [
|
||||
{
|
||||
|
|
@ -878,7 +878,7 @@
|
|||
"bundle": "research-dashboard",
|
||||
"scriptUrl": "./research-dashboard/research-dashboard.js",
|
||||
"output": "doxa-maps/research-dashboard/research-dashboard.js",
|
||||
"integrity": "sha384-N7jBTcEBb9f4tpzH8y5q6rD4b7hMf26rQeoBeMYfhSkiu1qjgDaBLYTU6BLrKqPW",
|
||||
"integrity": "sha384-sQL0nI6tuJD+PpCrg4TbNH5QwazCgMmk/oLwCH7QVbtoh4uYdoPhIPdokF1WLTgT",
|
||||
"elements": [
|
||||
"research-dashboard-map"
|
||||
],
|
||||
|
|
@ -894,7 +894,7 @@
|
|||
"scriptUrl": "./research-dashboard/research-dashboard.js",
|
||||
"embed": {
|
||||
"iframe": "<iframe src=\"./research-dashboard/research-dashboard/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./research-dashboard/research-dashboard.js\" integrity=\"sha384-N7jBTcEBb9f4tpzH8y5q6rD4b7hMf26rQeoBeMYfhSkiu1qjgDaBLYTU6BLrKqPW\" crossorigin=\"anonymous\"></script>\n<research-dashboard-map profile-config='{\"profile\":\"research-dashboard\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></research-dashboard-map>"
|
||||
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./research-dashboard/research-dashboard.js\" integrity=\"sha384-sQL0nI6tuJD+PpCrg4TbNH5QwazCgMmk/oLwCH7QVbtoh4uYdoPhIPdokF1WLTgT\" crossorigin=\"anonymous\"></script>\n<research-dashboard-map profile-config='{\"profile\":\"research-dashboard\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></research-dashboard-map>"
|
||||
},
|
||||
"bundle": "research-dashboard"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -559,8 +559,8 @@
|
|||
.rd-donut.has-sel .rd-slice{ opacity:.42; }
|
||||
.rd-slice.on, .rd-donut.has-sel .rd-slice.on{ opacity:1; stroke:var(--rd-ink, #3b463d); stroke-width:2.5;
|
||||
transform:scale(1.08); filter:drop-shadow(0 1px 2px rgba(31,39,51,.35)); }
|
||||
.rd-legend{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--dx-text, #3b463d); max-height:176px;
|
||||
overflow-y:auto; overflow-x:hidden; flex:1 1 auto; min-width:0;
|
||||
.rd-legend{ display:flex; flex-direction:column; gap:2px; font-size:10.5px; color:var(--dx-text, #3b463d); max-height:120px;
|
||||
overflow-y:auto; overflow-x:auto; flex:1 1 auto; min-width:0;
|
||||
scrollbar-width:thin; scrollbar-color:var(--dx-scroll-thumb, #c4c8c0) transparent; }
|
||||
.rd-legend::-webkit-scrollbar{ width:6px; height:6px; }
|
||||
.rd-legend::-webkit-scrollbar-track{ background:transparent; }
|
||||
|
|
@ -569,8 +569,7 @@
|
|||
.rd-li{ display:flex; align-items:flex-start; gap:5px; cursor:pointer; padding:1px 2px; border-radius:3px; }
|
||||
.rd-li:hover{ background:var(--dx-surface, #f3f3f1); } .rd-li.on{ background:#fff4ea; font-weight:700; color:var(--rd-ink, #3b463d); }
|
||||
.rd-li i{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; margin-top:3px; } .rd-li b{ margin-left:auto; color:var(--rd-muted, #6d766e); font-variant-numeric:tabular-nums; flex:0 0 auto; padding-left:4px; margin-top:1px; }
|
||||
.rd-lt{ flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; line-height:1.28;
|
||||
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
|
||||
.rd-lt{ flex:1 1 auto; min-width:0; white-space:nowrap; line-height:1.28; overflow:visible; }
|
||||
.rd-bars{ display:flex; flex-direction:column; gap:3px; }
|
||||
.rd-bar{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:10.5px; padding:1px 2px; border-radius:3px; }
|
||||
.rd-bar:hover{ background:var(--dx-surface, #f3f3f1); } .rd-bar.on{ background:#fff4ea; font-weight:700; color:var(--rd-ink, #3b463d); }
|
||||
|
|
@ -682,13 +681,14 @@
|
|||
--rd-primary:var(--dx-accent);
|
||||
--facet-w:296px; --rail-w:264px;
|
||||
--rd-edge:14px;
|
||||
--rd-stats-h:30px;
|
||||
--rd-topbar-h:44px;
|
||||
--rd-stats-h:26px;
|
||||
--fs-xs:10px; --fs-sm:11px; --fs-md:12px; --fs-lg:13px; --fs-xl:16px;
|
||||
--r-lg:10px; --r-md:6px; --r-pill:999px; }
|
||||
.profile-loader{ width:100%; height:100%; }
|
||||
.rd-shell{ position:relative; display:grid; width:100%; height:100%; min-height:560px; box-sizing:border-box;
|
||||
grid-template-columns: var(--facet-w,296px) minmax(0,1fr) var(--rail-w,264px);
|
||||
grid-template-rows: 52px auto var(--rd-stats-h,30px) 1fr var(--table-h,34%);
|
||||
grid-template-rows: var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) 1fr var(--table-h,34%);
|
||||
grid-template-areas: "topbar topbar topbar" "filters filters filters" "stats stats stats" "facets map rail" "facets table rail";
|
||||
gap:1px; background:var(--rd-line, #d1d4cd); container-type:inline-size;
|
||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
|
||||
|
|
@ -702,7 +702,7 @@
|
|||
.rd-shell > [data-region="rail"]{ grid-area:rail; min-width:0; min-height:0; }
|
||||
.rd-rail{ display:flex; flex-direction:column; min-height:0; height:100%; background:var(--rd-bg, #f3f3f1); }
|
||||
.rd-rail > [data-region="charts-rail"]{ flex:1 1 auto; min-height:0; }
|
||||
.rd-shell.rd-table-collapsed{ grid-template-rows:52px auto var(--rd-stats-h,30px) 1fr var(--table-bar-h,30px); }
|
||||
.rd-shell.rd-table-collapsed{ grid-template-rows:var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) 1fr var(--table-bar-h,30px); }
|
||||
.rd-shell.rd-facet-collapsed{ grid-template-columns:0 minmax(0,1fr) var(--rail-w,264px); }
|
||||
.rd-shell.rd-rail-collapsed{ grid-template-columns:var(--facet-w,296px) minmax(0,1fr) 0; }
|
||||
.rd-shell.rd-facet-collapsed.rd-rail-collapsed{ grid-template-columns:0 minmax(0,1fr) 0; }
|
||||
|
|
@ -741,12 +741,12 @@
|
|||
.rd-shell.rd-page-scroll > [data-region="table"]{ overflow:visible; }
|
||||
.rd-shell.rd-page-scroll .rd-table-wrap{ height:auto; }
|
||||
.rd-shell.rd-page-scroll .rd-grid{
|
||||
max-height:var(--rd-table-max-h, calc(var(--rd-shell-h, 80svh) - var(--rd-map-h, 40svh) - var(--rd-table-bar-h, 32px) - var(--rd-table-foot-h, 28px))); }
|
||||
max-height:var(--rd-table-max-h, calc(var(--rd-table-rows, 7) * var(--rd-table-row-h, 26px))); }
|
||||
.rd-shell.rd-page-scroll > [data-region="facets"],
|
||||
.rd-shell.rd-page-scroll > [data-region="rail"]{ min-height:0; overflow:hidden;
|
||||
max-height:calc(var(--rd-shell-h, 80svh) + 1px); }
|
||||
:host([data-page-scroll="true"]){ height:auto; min-height:0; }
|
||||
.rd-shell.rd-narrow{ grid-template-columns:1fr; grid-template-rows:52px auto var(--rd-stats-h,30px) minmax(0,1fr) 46px;
|
||||
.rd-shell.rd-narrow{ grid-template-columns:1fr; grid-template-rows:var(--rd-topbar-h,44px) auto var(--rd-stats-h,26px) minmax(0,1fr) 46px;
|
||||
grid-template-areas:"topbar" "filters" "stats" "body" "seg"; }
|
||||
.rd-shell.rd-narrow > [data-region]{ grid-area:body; min-width:0; min-height:0; }
|
||||
.rd-shell.rd-narrow > [data-region="topbar"]{ grid-area:topbar; }
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
|
||||
<!-- Bundle IIFE — registers the <research-dashboard-map> custom element. -->
|
||||
<script src="../research-dashboard.js" integrity="sha384-N7jBTcEBb9f4tpzH8y5q6rD4b7hMf26rQeoBeMYfhSkiu1qjgDaBLYTU6BLrKqPW" crossorigin="anonymous"></script>
|
||||
<script src="../research-dashboard.js" integrity="sha384-sQL0nI6tuJD+PpCrg4TbNH5QwazCgMmk/oLwCH7QVbtoh4uYdoPhIPdokF1WLTgT" crossorigin="anonymous"></script>
|
||||
|
||||
<script>
|
||||
// Mapbox token resolution — the A3 ladder, in precedence order:
|
||||
|
|
|
|||
Loading…
Reference in a new issue