Skip to content

Commit 362d168

Browse files
RafnussRafnuss
committed
minor tweak of overview
1 parent 0731fc0 commit 362d168

3 files changed

Lines changed: 108 additions & 77 deletions

File tree

‎_includes/schema-diagram-embed.html‎

Lines changed: 57 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -112,44 +112,31 @@
112112

113113
.schema-title {
114114
margin: 0;
115-
padding: 14px 14px;
116115
background: var(--header-bg);
117116
color: var(--table-header-text);
118117
font-size: 1.3rem;
119118
line-height: 1.25;
120119
text-align: center;
121120
text-transform: none;
122-
transition: filter 140ms ease;
121+
transition: background-color 140ms ease;
122+
display: flex;
123+
align-items: center;
124+
justify-content: center;
123125
cursor: default;
124126
}
125127

126128
.schema-title:hover {
127-
filter: brightness(0.96);
129+
background: var(--header-bg);
130+
background: color-mix(in srgb, var(--header-bg) 92%, #000 8%);
128131
}
129132

130133
.schema-title-content {
131134
display: inline-flex;
132135
align-items: center;
136+
justify-content: center;
133137
gap: 8px;
134-
}
135-
136-
.schema-title-link {
137-
color: inherit;
138-
text-decoration: none;
139-
border-radius: 999px;
140-
padding: 3px 10px;
141-
transition:
142-
background-color 140ms ease,
143-
box-shadow 140ms ease,
144-
transform 140ms ease;
145-
}
146-
147-
.schema-title-link:hover,
148-
.schema-title-link:focus-visible {
149-
text-decoration: none;
150-
background: rgba(255, 255, 255, 0.6);
151-
box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.18);
152-
transform: translateY(-1px);
138+
width: 100%;
139+
padding: 14px 14px;
153140
}
154141

155142
.schema-title-icon {
@@ -186,15 +173,20 @@
186173
line-height: 1.2;
187174
font-size: 1.2rem;
188175
background: #fff;
189-
transition: background-color 140ms ease;
176+
transition: background-color 0.15s ease;
190177
cursor: default;
191178
}
192179

193180
.schema-field:hover {
194-
background: #eaeaea;
181+
background: #f0f0f0;
195182
box-shadow: none;
196183
}
197184

185+
.schema-title[data-bs-toggle="tooltip"],
186+
.schema-field[data-bs-toggle="tooltip"] {
187+
cursor: pointer;
188+
}
189+
198190
.schema-field-content {
199191
display: inline-flex;
200192
align-items: center;
@@ -230,8 +222,8 @@
230222
stroke-linecap: round;
231223
stroke-linejoin: round;
232224
marker-end: url(#connector-arrowhead);
233-
pointer-events: stroke;
234-
cursor: pointer;
225+
pointer-events: none;
226+
cursor: default;
235227
transition:
236228
opacity 120ms ease,
237229
stroke-width 120ms ease;
@@ -855,21 +847,22 @@
855847
const heading = document.createElement("h2");
856848
heading.className = "schema-title";
857849
heading.id = `title-${tableId}`;
858-
const headingTooltipMarkdown = firstMarkdownParagraph(table.description);
850+
const tableDocHref = CONFIG.tableDocs[table.name];
851+
const headingTooltipMarkdown = [
852+
firstMarkdownParagraph(table.description),
853+
tableDocHref ? `[Open table page](${tableDocHref})` : "",
854+
]
855+
.filter(Boolean)
856+
.join("\n\n");
859857
if (headingTooltipMarkdown) {
860858
heading.setAttribute("data-bs-toggle", "tooltip");
861859
heading.setAttribute("data-bs-title", headingTooltipMarkdown);
862860
heading.setAttribute("data-md-description", headingTooltipMarkdown);
863861
heading.setAttribute("data-bs-custom-class", "schema-tooltip");
864862
heading.setAttribute("data-bs-placement", "top");
865863
}
866-
const tableDocHref = CONFIG.tableDocs[table.name];
867-
const titleContent = document.createElement(tableDocHref ? "a" : "span");
868-
titleContent.className = `schema-title-content${tableDocHref ? " schema-title-link" : ""}`;
869-
if (tableDocHref) {
870-
titleContent.href = tableDocHref;
871-
titleContent.setAttribute("aria-label", `${table.name} table documentation`);
872-
}
864+
const titleContent = document.createElement("span");
865+
titleContent.className = "schema-title-content";
873866
const iconPath = CONFIG.tableIcons[table.name];
874867
if (iconPath) {
875868
const icon = document.createElement("span");
@@ -1079,7 +1072,6 @@
10791072
if (!window.bootstrap || !window.bootstrap.Tooltip) {
10801073
return;
10811074
}
1082-
const hideDelayMs = 150;
10831075
const elements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
10841076
for (const el of elements) {
10851077
const existing = window.bootstrap.Tooltip.getInstance(el);
@@ -1089,45 +1081,45 @@
10891081
const markdown =
10901082
el.getAttribute("data-md-description") || el.getAttribute("data-bs-title") || "";
10911083
const htmlTitle = markdownToHtml(markdown);
1092-
const tooltip = new window.bootstrap.Tooltip(el, {
1084+
new window.bootstrap.Tooltip(el, {
10931085
container: "body",
1094-
trigger: "manual",
1086+
trigger: "click",
10951087
html: true,
10961088
sanitize: false,
10971089
title: htmlTitle,
10981090
});
10991091

1100-
let hideTimer = null;
1101-
const clearHideTimer = () => {
1102-
if (hideTimer) {
1103-
window.clearTimeout(hideTimer);
1104-
hideTimer = null;
1092+
// Keep only one diagram tooltip open at a time.
1093+
el.addEventListener("show.bs.tooltip", () => {
1094+
for (const otherEl of elements) {
1095+
if (otherEl === el) {
1096+
continue;
1097+
}
1098+
const otherTooltip = window.bootstrap.Tooltip.getInstance(otherEl);
1099+
if (otherTooltip) {
1100+
otherTooltip.hide();
1101+
}
1102+
}
1103+
});
1104+
}
1105+
1106+
if (document.body.dataset.schemaTooltipDismissBound !== "true") {
1107+
document.body.dataset.schemaTooltipDismissBound = "true";
1108+
document.addEventListener("click", (event) => {
1109+
const target = event.target;
1110+
if (!(target instanceof Element)) {
1111+
return;
11051112
}
1106-
};
1107-
const showTooltip = () => {
1108-
clearHideTimer();
1109-
tooltip.show();
1110-
};
1111-
const scheduleHide = () => {
1112-
clearHideTimer();
1113-
hideTimer = window.setTimeout(() => {
1114-
tooltip.hide();
1115-
}, hideDelayMs);
1116-
};
1117-
1118-
el.addEventListener("mouseenter", showTooltip);
1119-
el.addEventListener("focusin", showTooltip);
1120-
el.addEventListener("mouseleave", scheduleHide);
1121-
el.addEventListener("focusout", scheduleHide);
1122-
el.addEventListener("shown.bs.tooltip", () => {
1123-
const tipEl =
1124-
typeof tooltip.getTipElement === "function" ? tooltip.getTipElement() : tooltip.tip;
1125-
if (!tipEl || tipEl.dataset.hoverBound === "true") {
1113+
if (target.closest('[data-bs-toggle="tooltip"], .tooltip')) {
11261114
return;
11271115
}
1128-
tipEl.dataset.hoverBound = "true";
1129-
tipEl.addEventListener("mouseenter", clearHideTimer);
1130-
tipEl.addEventListener("mouseleave", scheduleHide);
1116+
const activeElements = document.querySelectorAll('[data-bs-toggle="tooltip"]');
1117+
for (const el of activeElements) {
1118+
const tooltip = window.bootstrap.Tooltip.getInstance(el);
1119+
if (tooltip) {
1120+
tooltip.hide();
1121+
}
1122+
}
11311123
});
11321124
}
11331125
}
@@ -1521,7 +1513,6 @@
15211513
renderTables(tables);
15221514
initTooltips();
15231515
drawConnectors(state.relations);
1524-
setupConnectorHover();
15251516
setLoadingState(false, "", "loading");
15261517
setLegendState(true);
15271518
} catch (err) {

‎_sass/_custom.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,16 @@
11
// Alert palette overrides to align Bootstrap callouts with GeoLocator DP branding.
22

3+
// Override theme blue disclosure marker color in content details blocks.
4+
body .content details summary::marker {
5+
color: currentColor;
6+
}
7+
8+
// Remove theme vertical padding on details summary rows.
9+
body .content details summary {
10+
padding-top: 0 !important;
11+
padding-bottom: 0 !important;
12+
}
13+
314
.alert {
415
border-left-width: 0.35rem;
516
padding-left: 2.75rem !important;

‎pages/schema-overview.md‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,51 @@ permalink: /schema-overview/
1919
}
2020
}
2121

22-
.schema-overview-help summary {
22+
body .content details.schema-overview-help > summary {
2323
cursor: pointer;
24-
font-weight: 700;
24+
display: flex;
25+
align-items: center;
26+
gap: 0.45rem;
27+
list-style: none;
28+
font-size: 1.05rem !important;
29+
font-weight: 500 !important;
30+
line-height: 1.35;
31+
color: inherit !important;
2532
}
2633

27-
.schema-overview-help[open] summary {
34+
body .content details.schema-overview-help > summary::marker {
35+
content: "";
36+
}
37+
38+
body .content details.schema-overview-help > summary::-webkit-details-marker {
39+
display: none;
40+
}
41+
42+
body .content details.schema-overview-help > summary::before {
43+
content: "▸";
44+
display: inline-block;
45+
font-size: 0.9em;
46+
line-height: 1;
47+
color: #7b6a35;
48+
transform: translateY(0.02em);
49+
transition: transform 120ms ease;
50+
}
51+
52+
body .content details.schema-overview-help[open] > summary::before {
53+
transform: rotate(90deg);
54+
}
55+
56+
body .content details.schema-overview-help[open] > summary {
2857
margin-bottom: 8px;
2958
}
30-
</style>
3159

32-
This diagram shows how the GeoLocator DP tables are connected.
33-
Each table and each column is documented in detail on its own dedicated page.
34-
Click a table name in the diagram to open that table reference page.
60+
body .content details.schema-overview-help.alert::before {
61+
top: calc(var(--bs-alert-padding-y) + 0.68rem);
62+
transform: translateY(-50%);
63+
}
64+
</style>
3565

36-
<details class="schema-overview-help alert alert-tips" style="padding-left: 32px;">
66+
<details class="schema-overview-help alert alert-tips">
3767
<summary>How to read this diagram?</summary>
3868
<div markdown="1">
3969

@@ -43,9 +73,8 @@ Click a table name in the diagram to open that table reference page.
4373
- The key icon marks columns in the [primary key](https://en.wikipedia.org/wiki/Primary_key): values that uniquely identify each row (sometimes using multiple columns together).
4474
- Arrows show [foreign key](https://en.wikipedia.org/wiki/Foreign_key) relationships: a column in one table points to a row in another table.
4575
- `...` means additional columns are allowed by the schema but not listed here.
46-
- Click a table name to open the dedicated page with full column-level details.
47-
- Hover table names and fields to read descriptions.
48-
- Hover arrows to inspect which source and target fields are linked.
76+
- Click table names and fields to read descriptions.
77+
- Use the `Open table page` link shown in a table-name tooltip to open the dedicated table page.
4978

5079
</div>
5180
</details>

0 commit comments

Comments
 (0)