[OCaml] Mobile-friendly clone of cgit.
refactor replace chevron breadcrumbs with a path pill
The file path trail is now shown as a single horizontal pill (styled like commit type pills) rather than individual chevron-shaped segments. This unifies the design language — both commit types and file paths act as contextual filters displayed in pill form. The pill uses monospace font, the docs color scheme (#1a3a4d / #93dbfd), and links to the deepest directory in the trail. When at root, no pill is shown. Removed all .breadcrumbs CSS (clip-path chevrons, multi-segment ul).
Changed files
lib/static/styles.css
@@ -503,60 +503,27 @@
503
503
border: 1px solid #303030;
504
504
}
505
505
506
Removed:
.breadcrumbs {
507
Removed:
padding: 0;
508
Removed:
font-family: monospace;
509
Removed:
}
506
Added:
/* Path pill — breadcrumb trail as a single rounded pill */
510
507
511
Removed:
.breadcrumbs ul {
512
Removed:
display: flex;
513
Removed:
flex-wrap: nowrap;
514
Removed:
list-style: none;
515
Removed:
padding: 0;
516
Removed:
margin: 0;
517
Removed:
overflow-x: auto;
518
Removed:
scrollbar-width: none;
519
Removed:
}
520
Removed:
521
Removed:
.breadcrumbs ul::-webkit-scrollbar {
522
Removed:
display: none;
523
Removed:
}
524
Removed:
525
Removed:
.breadcrumbs li {
526
Removed:
position: relative;
527
Removed:
margin-right: 4px;
508
Added:
.path-pill {
509
Added:
display: inline-flex;
510
Added:
align-items: center;
528
511
flex-shrink: 0;
512
Added:
padding: 0.35em 0.75em;
513
Added:
border-radius: 9999px;
514
Added:
font-size: 0.85em;
515
Added:
font-family: monospace;
516
Added:
background-color: #1a3a4d;
517
Added:
color: #93dbfd;
529
518
}
530
519
531
Removed:
.breadcrumbs li a {
532
Removed:
display: block;
533
Removed:
padding: 0.4em 1.4em 0.4em 1.6em;
534
Removed:
background-color: #2a2a2a;
535
Removed:
color: skyblue;
520
Added:
.path-pill a {
521
Added:
color: inherit;
536
522
text-decoration: none;
537
Removed:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%, 0.6em 50%);
538
523
}
539
524
540
Removed:
.breadcrumbs li:first-child a {
541
Removed:
padding-left: 1em;
542
Removed:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%);
543
Removed:
border-radius: 0.25rem 0 0 0.25rem;
544
Removed:
}
545
Removed:
546
Removed:
.breadcrumbs li:last-child a {
547
Removed:
background-color: #3a3a3a;
548
Removed:
color: white;
549
Removed:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%, 0.6em 50%);
550
Removed:
}
551
Removed:
552
Removed:
.breadcrumbs li:first-child:last-child a {
553
Removed:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%);
554
Removed:
border-radius: 0.25rem 0 0 0.25rem;
555
Removed:
}
556
Removed:
557
Removed:
.breadcrumbs li a:hover {
558
Removed:
background-color: #444;
559
Removed:
color: white;
525
Added:
.path-pill a:hover {
526
Added:
text-decoration: underline;
560
527
}
561
528
562
529
/* Tree directory expand/collapse */
lib/views/repo.ml
@@ -303,22 +303,20 @@
303
303
pagination;
304
304
]
305
305
306
Removed:
let breadcrumbs repo (trail : (string * string) list) =
307
Removed:
let root_link = HTML.li [] [ Routes.link_to (Files repo) (txt "Home") ] in
308
Removed:
let crumbs =
309
Removed:
List.map
310
Removed:
(fun (name, hash) ->
311
Removed:
HTML.li [] [ Routes.link_to (File (repo, hash)) (txt "%s" name) ])
312
Removed:
trail
313
Removed:
in
314
Removed:
HTML.(
315
Removed:
nav
316
Removed:
[ class_ "breadcrumbs"; Aria.label "File path" ]
317
Removed:
[ ul [] (root_link :: crumbs) ])
306
Added:
let breadcrumb_pill repo (trail : (string * string) list) =
307
Added:
match trail with
308
Added:
| [] -> HTML.null []
309
Added:
| _ ->
310
Added:
let path_text = String.concat "/" (List.map fst trail) in
311
Added:
let deepest_hash = snd (List.nth trail (List.length trail - 1)) in
312
Added:
HTML.(
313
Added:
span
314
Added:
[ class_ "path-pill" ]
315
Added:
[ Routes.link_to (File (repo, deepest_hash)) (txt "%s" path_text) ])
318
316
319
317
let files context trail (entries : Resolvers.Tree.preloaded_entry list) =
320
Removed:
let bc = breadcrumbs context.repo trail in
321
Removed:
let tb = toolbar [ bc ] in
318
Added:
let pill = breadcrumb_pill context.repo trail in
319
Added:
let tb = toolbar [ pill ] in
322
320
render_page context ~active:Files
323
321
HTML.[ tb; ul [] (List.map (li_of_preloaded context.repo) entries) ]
324
322
@@ -345,7 +343,7 @@
345
343
render_page context ~active
346
344
HTML.
347
345
[
348
Removed:
toolbar [ breadcrumbs context.repo trail ];
346
Added:
toolbar [ breadcrumb_pill context.repo trail ];
349
347
div [ id "blob" ] formatted_blob;
350
348
]
351
349