[OCaml] Mobile-friendly clone of cgit.
style beveled chevron breadcrumbs, sticky below navbar
Replace slash-separated breadcrumbs with a CSS-only beveled chevron style using clip-path polygons. Root link labeled 'Home'. Breadcrumbs use a ul/li structure, are sticky below the navbar, and follow the dark color theme. All items including the last have a pointy chevron shape. The list scrolls horizontally with a hidden scrollbar for long paths on mobile. Breadcrumb li elements excluded from div#main border. Top padding preserves visual space between the navbar and breadcrumbs.
Changed files
lib/static/styles.css
@@ -160,6 +160,10 @@
160
160
border: 1px solid #303030;
161
161
}
162
162
163
Added:
div#main .breadcrumbs li {
164
Added:
border: none;
165
Added:
}
166
Added:
163
167
div#main ul li a {
164
168
display: block;
165
169
color: white;
@@ -238,17 +242,63 @@
238
242
}
239
243
240
244
.breadcrumbs {
245
Added:
position: sticky;
246
Added:
top: 44px;
247
Added:
z-index: 9;
248
Added:
background-color: #181818;
249
Added:
padding: 0.75em 0 0.5em;
241
250
font-family: monospace;
242
Removed:
padding: 0.5em 0;
243
251
}
244
252
245
Removed:
.breadcrumbs a {
253
Added:
.breadcrumbs ul {
254
Added:
display: flex;
255
Added:
flex-wrap: nowrap;
256
Added:
list-style: none;
257
Added:
padding: 0;
258
Added:
margin: 0;
259
Added:
overflow-x: auto;
260
Added:
scrollbar-width: none;
261
Added:
}
262
Added:
263
Added:
.breadcrumbs ul::-webkit-scrollbar {
264
Added:
display: none;
265
Added:
}
266
Added:
267
Added:
.breadcrumbs li {
268
Added:
position: relative;
269
Added:
margin-right: 4px;
270
Added:
flex-shrink: 0;
271
Added:
}
272
Added:
273
Added:
.breadcrumbs li a {
274
Added:
display: block;
275
Added:
padding: 0.4em 1em 0.4em 1.25em;
276
Added:
background-color: #2a2a2a;
246
277
color: skyblue;
247
278
text-decoration: none;
279
Added:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%, 0.6em 50%);
248
280
}
249
281
250
Removed:
.breadcrumbs a:hover {
251
Removed:
text-decoration: underline;
282
Added:
.breadcrumbs li:first-child a {
283
Added:
padding-left: 0.75em;
284
Added:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%);
285
Added:
border-radius: 0.25rem 0 0 0.25rem;
286
Added:
}
287
Added:
288
Added:
.breadcrumbs li:last-child a {
289
Added:
background-color: #3a3a3a;
290
Added:
color: white;
291
Added:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%, 0.6em 50%);
292
Added:
}
293
Added:
294
Added:
.breadcrumbs li:first-child:last-child a {
295
Added:
clip-path: polygon(0 0, calc(100% - 0.6em) 0, 100% 50%, calc(100% - 0.6em) 100%, 0 100%);
296
Added:
border-radius: 0.25rem 0 0 0.25rem;
297
Added:
}
298
Added:
299
Added:
.breadcrumbs li a:hover {
300
Added:
background-color: #444;
301
Added:
color: white;
252
302
}
253
303
254
304
.diff-file {
lib/views/repo.ml
@@ -86,22 +86,17 @@
86
86
}
87
87
88
88
let breadcrumbs repo (trail : (string * string) list) =
89
Removed:
let root_link = Routes.link_to (Files repo) (txt "/") in
89
Added:
let root_link = HTML.li [] [ Routes.link_to (Files repo) (txt "Home") ] in
90
90
let crumbs =
91
91
List.map
92
Removed:
(fun (name, hash) -> Routes.link_to (File (repo, hash)) (txt "%s" name))
92
Added:
(fun (name, hash) ->
93
Added:
HTML.li [] [ Routes.link_to (File (repo, hash)) (txt "%s" name) ])
93
94
trail
94
95
in
95
Removed:
let separator = txt " / " in
96
Removed:
let rec interleave = function
97
Removed:
| [] -> []
98
Removed:
| [ x ] -> [ x ]
99
Removed:
| x :: rest -> x :: separator :: interleave rest
100
Removed:
in
101
96
HTML.(
102
97
nav
103
98
[ class_ "breadcrumbs"; Aria.label "File path" ]
104
Removed:
(interleave (root_link :: crumbs)))
99
Added:
[ ul [] (root_link :: crumbs) ])
105
100
106
101
let files repo trail (tree : Resolvers.Tree.t) =
107
102
respond