Skip to content

Commit dbb34ac

Browse files
Snooz82Snooz82
committed
implemented dynamic glossary
Signed-off-by: René <snooz@posteo.de>
1 parent 3c25a41 commit dbb34ac

5 files changed

Lines changed: 927 additions & 0 deletions

File tree

‎website/docs/glossary/Glossary.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
id: interactive-glossary
3+
title: Interactive Glossary
4+
---
5+
6+
import GlossaryTable from '@site/src/components/Glossary/GlossaryTable';
7+
8+
Use the search boxes to filter by term or perform a fuzzy free-text search across definitions. Click any row or alias to deep-link to a glossary entry.
9+
10+
<GlossaryTable />

‎website/src/components/Glossary/GlossaryTable.module.css‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
.wrapper {
2+
margin: 1.5rem 0;
3+
display: flex;
4+
flex-direction: column;
5+
gap: 1rem;
6+
}
7+
8+
.controls {
9+
display: grid;
10+
gap: 0.75rem;
11+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
12+
}
13+
14+
.control {
15+
display: flex;
16+
flex-direction: column;
17+
gap: 0.35rem;
18+
font-weight: 600;
19+
color: var(--ifm-color-primary);
20+
}
21+
22+
.control input {
23+
padding: 0.5rem 0.75rem;
24+
border-radius: 0.35rem;
25+
border: 1px solid var(--ifm-color-emphasis-300);
26+
background: var(--ifm-background-color);
27+
color: var(--ifm-font-color-base);
28+
}
29+
30+
.tableWrapper {
31+
overflow-x: auto;
32+
border: 1px solid var(--ifm-color-emphasis-200);
33+
border-radius: 0.5rem;
34+
}
35+
36+
.table {
37+
width: 100%;
38+
border-collapse: collapse;
39+
table-layout: fixed;
40+
}
41+
42+
.termCol {
43+
width: 28%;
44+
}
45+
46+
.definitionCol {
47+
width: 72%;
48+
}
49+
50+
th,
51+
td {
52+
padding: 0.85rem 1rem;
53+
text-align: left;
54+
vertical-align: top;
55+
}
56+
57+
th {
58+
background: var(--ifm-color-emphasis-100);
59+
font-size: 0.95rem;
60+
letter-spacing: 0.01em;
61+
}
62+
63+
tr:nth-child(even) {
64+
background: var(--ifm-table-stripe-background);
65+
}
66+
67+
tbody tr {
68+
scroll-margin-top: 72px; /* leave space for sticky header */
69+
}
70+
71+
.activeRow {
72+
outline: 2px solid var(--ifm-color-primary);
73+
outline-offset: -2px;
74+
background: var(--ifm-color-emphasis-100);
75+
}
76+
77+
.termCell {
78+
min-width: 180px;
79+
font-weight: 700;
80+
}
81+
82+
.clickable {
83+
cursor: pointer;
84+
}
85+
86+
.termName {
87+
margin-bottom: 0.25rem;
88+
}
89+
90+
.definitionCell {
91+
width: 100%;
92+
}
93+
94+
.emptyState {
95+
text-align: center;
96+
padding: 1rem;
97+
color: var(--ifm-color-emphasis-700);
98+
}
99+
100+
.definitionText > :first-child {
101+
margin-top: 0;
102+
}
103+
104+
.definitionText > :last-child {
105+
margin-bottom: 0;
106+
}
107+
108+
.pillRow {
109+
display: flex;
110+
gap: 0.4rem;
111+
flex-wrap: wrap;
112+
margin-top: 0.5rem;
113+
}
114+
115+
.pill {
116+
display: inline-flex;
117+
align-items: center;
118+
gap: 0.25rem;
119+
padding: 0.15rem 0.6rem;
120+
border-radius: 999px;
121+
font-size: 0.8rem;
122+
border: 1px solid var(--ifm-color-emphasis-300);
123+
background: var(--ifm-color-emphasis-100);
124+
color: var(--ifm-font-color-base);
125+
text-decoration: none;
126+
}
127+
128+
.pill:hover,
129+
.pill:focus-visible {
130+
border-color: var(--ifm-color-primary);
131+
color: var(--ifm-color-primary);
132+
}
133+
134+
.abbreviationPill {
135+
font-weight: 700;
136+
}
137+
138+
.aliasPill {
139+
font-weight: 600;
140+
}
141+
142+
.aliasLink {
143+
color: var(--ifm-color-primary);
144+
text-decoration: underline;
145+
font-weight: 600;
146+
}
147+
148+
.aliasLink:hover,
149+
.aliasLink:focus-visible {
150+
color: var(--ifm-color-primary-darker);
151+
}

0 commit comments

Comments
 (0)