[OCaml] Mobile-friendly clone of cgit.
style make toolbar sticky, horizontally scrollable, widen breadcrumbs
The toolbar is now position:sticky below the navbar (top:44px) with horizontal overflow scrolling for many filters or deep breadcrumb paths. Scrollbars are hidden for a clean appearance. In the commits view, the toolbar is only displayed when a filter is active. The files view always shows it (wrapping breadcrumbs). Breadcrumbs padding increased for wider click targets. Sticky positioning removed from .breadcrumbs since the parent toolbar now handles it.
Changed files
lib/static/styles.css
@@ -345,12 +345,25 @@
345
345
gap: 0.75em;
346
346
min-height: 44px;
347
347
box-sizing: border-box;
348
Added:
position: sticky;
349
Added:
top: 44px;
350
Added:
z-index: 9;
351
Added:
background-color: #181818;
352
Added:
padding: 0.5em 0;
353
Added:
overflow-x: auto;
354
Added:
scrollbar-width: none;
355
Added:
flex-wrap: nowrap;
348
356
}
349
357
358
Added:
.toolbar::-webkit-scrollbar {
359
Added:
display: none;
360
Added:
}
361
Added:
350
362
.toolbar-filter {
351
363
display: inline-flex;
352
364
align-items: center;
353
365
gap: 0.35em;
366
Added:
flex-shrink: 0;
354
367
}
355
368
356
369
.toolbar-dismiss {
@@ -449,11 +462,7 @@
449
462
}
450
463
451
464
.breadcrumbs {
452
Removed:
position: sticky;
453
Removed:
top: 44px;
454
Removed:
z-index: 9;
455
Removed:
background-color: #181818;
456
Removed:
padding: 0.75em 0 0.5em;
465
Added:
padding: 0;
457
466
font-family: monospace;
458
467
}
459
468
@@ -479,7 +488,7 @@
479
488
480
489
.breadcrumbs li a {
481
490
display: block;
482
Removed:
padding: 0.4em 1em 0.4em 1.25em;
491
Added:
padding: 0.4em 1.4em 0.4em 1.6em;
483
492
background-color: #2a2a2a;
484
493
color: skyblue;
485
494
text-decoration: none;
@@ -487,7 +496,7 @@
487
496
}
488
497
489
498
.breadcrumbs li:first-child a {
490
Removed:
padding-left: 0.75em;
499
Added:
padding-left: 1em;
491
500
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%);
492
501
border-radius: 0.25rem 0 0 0.25rem;
493
502
}
lib/views/repo.ml
@@ -194,7 +194,9 @@
194
194
| Some ct -> Some (ct, Printf.sprintf "/%s/commits/" context.repo)
195
195
in
196
196
let hide_pill = Option.is_some filter_type in
197
Removed:
let tb = toolbar ?filter [] in
197
Added:
let tb =
198
Added:
match filter with None -> HTML.null [] | Some _ -> toolbar ?filter []
199
Added:
in
198
200
render_page context ~active:Commits
199
201
HTML.[ tb; ul [] (List.map (li_of_commit ~hide_pill context.repo) commits) ]
200
202