doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Vertical legend: sticky section headers, markdown-file style
Some checks are pending
build-gate / build (push) Waiting to run
Details

Browse source 
PEOPLE/PLACE/LANGUAGE/RELIGION headers stay pinned while their rows
scroll, and the next section's header pushes the previous one away --
position:sticky top:0 inside the scrolling .fr-body, the exact GitHub
markdown-preview mechanism. Opaque panel background so rows scroll
under the pinned label instead of through it.
This commit is contained in:
doxa-maps-88655c70 2026-09-23 22:39:32 +00:00
parent 9bddccbb5e
commit e2ff53cb96
8 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
plugin-designs/research-dashboard/src/components/dashboards/DashboardFacetRail.vue
View file

@ -480,7 +480,15 @@ useShadowStyles(`
.rd-facets .fr-body::-webkit-scrollbar-thumb{ background:var(--dx-scroll-thumb, #c4c8c0); border-radius:8px; }
.rd-facets .fr-body::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
.fr-sec{ border-bottom:1px solid var(--rd-line, #d1d4cd); }
.fr-sech{ display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
/* ★ STICKY SECTION HEADERS, GITHUB-MARKDOWN STYLE (Driver 2026-09-23: "when I am scrolling
down it needs to keep the section headers visible until you scroll into the next section --
like markdown files"). The conventional mechanism does all of it natively: position:sticky
top:0 inside the scrolling .fr-body pins the current header, and the NEXT header pushes the
previous one away as it arrives, because two sticky siblings at the same top contend for the
slot. The opaque background is required -- rows scroll UNDER the pinned header, and sticky
over transparent paints the rows through the label. z-index keeps it above row hover states. */
.fr-sech{ position:sticky; top:0; z-index:2; background:var(--rd-panel,#fff);
display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--rd-muted, #6d766e); }
.fr-sech:hover{ background:var(--rd-bg, #f3f3f1); }
.fr-sech .chev{ margin-left:auto; transition:transform .15s; font-size:10px; color:var(--dx-muted, #6d766e); }

3
public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid.js generated
View file

@ -418,7 +418,8 @@
.rd-facets .fr-body::-webkit-scrollbar-thumb{ background:var(--dx-scroll-thumb, #c4c8c0); border-radius:8px; }
.rd-facets .fr-body::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
.fr-sec{ border-bottom:1px solid var(--rd-line, #d1d4cd); }
.fr-sech{ display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
.fr-sech{ position:sticky; top:0; z-index:2; background:var(--rd-panel,#fff);
display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--rd-muted, #6d766e); }
.fr-sech:hover{ background:var(--rd-bg, #f3f3f1); }
.fr-sech .chev{ margin-left:auto; transition:transform .15s; font-size:10px; color:var(--dx-muted, #6d766e); }

2
public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/default/index.html generated
View file

@ -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-jKOwLanozR+O6mlmT9pVy5AbBM+fKtvI4UmUsgiolOcrH6/culs82vUmsTOKLNd7" crossorigin="anonymous"></script>
<script src="../../dashboard-plus-grid.js" integrity="sha384-iAr0qbc31N5SDDHZD5iemUI2e2KKbBcZmPSjkllKxW3Zj0SaLOajxWItBR0ATEI7" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/dashboard-plus-grid/dashboard-plus-grid/index.html generated
View file

@ -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-jKOwLanozR+O6mlmT9pVy5AbBM+fKtvI4UmUsgiolOcrH6/culs82vUmsTOKLNd7" crossorigin="anonymous"></script>
<script src="../dashboard-plus-grid.js" integrity="sha384-iAr0qbc31N5SDDHZD5iemUI2e2KKbBcZmPSjkllKxW3Zj0SaLOajxWItBR0ATEI7" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/index.html generated
View file

File diff suppressed because one or more lines are too long

8
public/doxa-maps/manifest.json generated
View file

@ -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-jKOwLanozR+O6mlmT9pVy5AbBM+fKtvI4UmUsgiolOcrH6/culs82vUmsTOKLNd7",
"integrity": "sha384-iAr0qbc31N5SDDHZD5iemUI2e2KKbBcZmPSjkllKxW3Zj0SaLOajxWItBR0ATEI7",
"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-jKOwLanozR+O6mlmT9pVy5AbBM+fKtvI4UmUsgiolOcrH6/culs82vUmsTOKLNd7\" 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-iAr0qbc31N5SDDHZD5iemUI2e2KKbBcZmPSjkllKxW3Zj0SaLOajxWItBR0ATEI7\" 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-2f3/uqetIjziSJf8AGJjFcAyPziq4VsblVOQ0aDxeorpG5Cqf+d2ZtXAKjZY7cxU",
"integrity": "sha384-/5dGLFJ3rAlenLy82U6X/fuNLszOB8wYTGKuu3adqaP7XnqPOlJAQ8lhQYYuuLdG",
"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-2f3/uqetIjziSJf8AGJjFcAyPziq4VsblVOQ0aDxeorpG5Cqf+d2ZtXAKjZY7cxU\" 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-/5dGLFJ3rAlenLy82U6X/fuNLszOB8wYTGKuu3adqaP7XnqPOlJAQ8lhQYYuuLdG\" 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"
}

3
public/doxa-maps/research-dashboard/research-dashboard.js generated
View file

@ -420,7 +420,8 @@
.rd-facets .fr-body::-webkit-scrollbar-thumb{ background:var(--dx-scroll-thumb, #c4c8c0); border-radius:8px; }
.rd-facets .fr-body::-webkit-scrollbar-thumb:hover{ background:#9aa197; }
.fr-sec{ border-bottom:1px solid var(--rd-line, #d1d4cd); }
.fr-sech{ display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
.fr-sech{ position:sticky; top:0; z-index:2; background:var(--rd-panel,#fff);
display:flex; align-items:center; gap:6px; padding:5px 12px; cursor:pointer; user-select:none;
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--rd-muted, #6d766e); }
.fr-sech:hover{ background:var(--rd-bg, #f3f3f1); }
.fr-sech .chev{ margin-left:auto; transition:transform .15s; font-size:10px; color:var(--dx-muted, #6d766e); }

2
public/doxa-maps/research-dashboard/research-dashboard/index.html generated
View file

@ -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-2f3/uqetIjziSJf8AGJjFcAyPziq4VsblVOQ0aDxeorpG5Cqf+d2ZtXAKjZY7cxU" crossorigin="anonymous"></script>
<script src="../research-dashboard.js" integrity="sha384-/5dGLFJ3rAlenLy82U6X/fuNLszOB8wYTGKuu3adqaP7XnqPOlJAQ8lhQYYuuLdG" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order: