jon.recoil.org
this repo has no description
Restyle sidebar: wider, better chevrons, indentation guides
- Widen sidebar from 200px to 260px with updated max-width calculations
- Collapse top two wrapper levels so content aligns with header
- Add border-left indentation guides on nested lists
- Replace original toggle arrows with larger inline chevrons (1em, rotate on expand)
- Separate click targets: chevrons toggle expand/collapse, links navigate
- Align childless items with toggle items via 20px margin-left
- Fix CSS cascade where .jon-shell-main ul overrode sidebar ul padding
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+77
-23
odoc-jon-shell/src/odoc_jon_shell_css.ml
+77
-23
odoc-jon-shell/src/odoc_jon_shell_css.ml
···
89
89
display: flex;
90
90
align-items: center;
91
91
justify-content: space-between;
92
-
max-width: calc(var(--max-width) + 220px);
92
+
max-width: calc(var(--max-width) + 300px);
93
93
margin: 0 auto;
94
94
padding: 16px 20px;
95
95
font-size: 14px;
···
121
121
122
122
/* Main content */
123
123
.jon-shell-main {
124
-
max-width: calc(var(--max-width) + 220px);
124
+
max-width: calc(var(--max-width) + 300px);
125
125
margin: 0 auto;
126
126
padding: 24px 20px 60px;
127
127
display: flex;
···
135
135
136
136
/* Sidebar */
137
137
.jon-shell-sidebar {
138
-
width: 200px;
138
+
width: 260px;
139
139
flex-shrink: 0;
140
140
font-size: 0.85rem;
141
141
line-height: 1.5;
···
146
146
overflow-y: auto;
147
147
}
148
148
149
-
.jon-shell-sidebar ul {
150
-
list-style: none;
151
-
padding: 0;
152
-
margin: 0;
149
+
/* Collapse the top two wrapper levels so content aligns with header */
150
+
.jon-shell-sidebar > ul > li > ul,
151
+
.jon-shell-sidebar > ul > li > ul > li > ul {
152
+
padding-left: 0;
153
+
margin-left: 0;
154
+
border-left: none;
153
155
}
154
156
155
157
.jon-shell-sidebar ul ul {
156
158
padding-left: 12px;
159
+
margin-left: 4px;
160
+
border-left: 1px solid var(--border-color);
157
161
}
158
162
159
163
.jon-shell-sidebar li {
···
163
167
.jon-shell-sidebar a,
164
168
.jon-shell-sidebar .sidebar-label {
165
169
display: block;
166
-
padding: 3px 8px;
170
+
padding: 2px 8px;
167
171
color: var(--text-muted);
168
172
text-decoration: none;
169
173
border-radius: 4px;
···
180
184
font-weight: 600;
181
185
}
182
186
183
-
/* Collapsible entries */
187
+
/* Collapsible entries — small inline chevron before the link */
184
188
.jon-shell-sidebar .sidebar-toggle {
185
-
display: inline-block;
186
-
width: 16px;
187
-
height: 16px;
189
+
display: inline-flex;
190
+
align-items: center;
191
+
justify-content: center;
192
+
width: 20px;
193
+
height: 20px;
188
194
cursor: pointer;
195
+
color: var(--text-muted);
196
+
opacity: 0.55;
197
+
font-size: 1em;
189
198
vertical-align: middle;
190
-
margin-right: 2px;
191
-
position: relative;
192
-
top: -1px;
199
+
flex-shrink: 0;
200
+
transition: opacity 0.15s, transform 0.15s;
201
+
user-select: none;
202
+
}
203
+
204
+
.jon-shell-sidebar .sidebar-toggle:hover {
205
+
opacity: 0.8;
193
206
}
194
207
195
208
.jon-shell-sidebar .sidebar-toggle::before {
196
-
content: "";
209
+
content: "\25B8";
197
210
display: block;
198
-
width: 0;
199
-
height: 0;
200
-
border-style: solid;
201
-
border-width: 4px 0 4px 6px;
202
-
border-color: transparent transparent transparent var(--text-muted);
203
-
margin: 4px auto;
204
211
transition: transform 0.15s;
205
212
}
206
213
···
212
219
display: none;
213
220
}
214
221
222
+
/* Items with children: put toggle and link on same line */
223
+
.jon-shell-sidebar li:has(> .sidebar-toggle) {
224
+
display: flex;
225
+
flex-wrap: wrap;
226
+
align-items: baseline;
227
+
}
228
+
229
+
.jon-shell-sidebar li:has(> .sidebar-toggle) > a,
230
+
.jon-shell-sidebar li:has(> .sidebar-toggle) > .sidebar-label {
231
+
flex: 1;
232
+
min-width: 0;
233
+
}
234
+
235
+
.jon-shell-sidebar li:has(> .sidebar-toggle) > ul {
236
+
flex-basis: 100%;
237
+
}
238
+
239
+
/* Items without children: indent to align with toggle items */
240
+
.jon-shell-sidebar li:not(:has(> .sidebar-toggle)) > a,
241
+
.jon-shell-sidebar li:not(:has(> .sidebar-toggle)) > .sidebar-label {
242
+
margin-left: 20px;
243
+
}
244
+
245
+
/* Ensure collapsed children are fully hidden including overflow */
246
+
.jon-shell-sidebar li.collapsed > ul {
247
+
display: none !important;
248
+
}
249
+
215
250
/* Hide the bare "index" text breadcrumb from odoc sidebar */
216
251
.jon-shell-sidebar > ul > li:last-child:not(:has(a)) {
252
+
display: none;
253
+
}
254
+
255
+
/* Hide the top-level wrapper entries (e.g. "OCaml package documentation" >
256
+
"reference") — they waste space and add confusing nesting. Show their
257
+
children directly. */
258
+
.jon-shell-sidebar > ul > li > .sidebar-toggle,
259
+
.jon-shell-sidebar > ul > li > a,
260
+
.jon-shell-sidebar > ul > li > .sidebar-label,
261
+
.jon-shell-sidebar > ul > li > ul > li > .sidebar-toggle,
262
+
.jon-shell-sidebar > ul > li > ul > li > a,
263
+
.jon-shell-sidebar > ul > li > ul > li > .sidebar-label {
217
264
display: none;
218
265
}
219
266
···
256
303
.jon-shell-main ol {
257
304
margin-bottom: 16px;
258
305
padding-left: 28px;
306
+
}
307
+
308
+
/* Sidebar lists reset — must come after .jon-shell-main ul to win cascade */
309
+
.jon-shell-sidebar ul {
310
+
list-style: none;
311
+
padding: 0;
312
+
margin: 0;
259
313
}
260
314
261
315
.jon-shell-main li {
···
558
612
559
613
/* Footer */
560
614
.jon-shell-footer {
561
-
max-width: calc(var(--max-width) + 220px);
615
+
max-width: calc(var(--max-width) + 300px);
562
616
margin: 0 auto;
563
617
padding: 24px 20px;
564
618
border-top: 1px solid var(--border-color);
+3
-1
odoc-jon-shell/src/odoc_jon_shell_js.ml
+3
-1
odoc-jon-shell/src/odoc_jon_shell_js.ml
···
42
42
var html = '<ul>' + data.map(renderEntry).join('') + '</ul>';
43
43
container.innerHTML = html;
44
44
45
-
// Toggle click handler
45
+
// Toggle click handler — only the chevron toggle controls expand/collapse
46
46
container.addEventListener('click', function(e) {
47
47
var toggle = e.target.closest('.sidebar-toggle');
48
48
if (!toggle) return;
49
+
e.preventDefault();
50
+
e.stopPropagation();
49
51
var li = toggle.parentElement;
50
52
li.classList.toggle('collapsed');
51
53
});