[OCaml] Mobile-friendly clone of cgit.
fix toolbar occludes nav logo/home but not nav links
Toolbar sticks at top:0 with z-index:10, overlaying the nav logo and nav-home when scrolled. Nav links (#nav-links) get z-index:11 so they remain visible above the toolbar.
Changed files
lib/static/styles.css
@@ -133,6 +133,11 @@
133
133
box-sizing: border-box;
134
134
}
135
135
136
Added:
.toolbar ~ .nav-home,
137
Added:
.nav-home:has(~ .toolbar) {
138
Added:
display: none;
139
Added:
}
140
Added:
136
141
.nav-home:hover {
137
142
background-color: white;
138
143
color: black;
@@ -512,9 +517,8 @@
512
517
gap: 0.75em;
513
518
min-height: var(--target-size);
514
519
box-sizing: border-box;
515
Removed:
position: sticky;
516
Removed:
top: var(--nav-height);
517
Removed:
z-index: 9;
520
Added:
flex: 1;
521
Added:
min-width: 0;
518
522
background-color: black;
519
523
padding: 0.5em 0.75em;
520
524
overflow-x: auto;
@@ -775,12 +779,6 @@
775
779
z-index: 8;
776
780
background-color: #181818;
777
781
}
778
Removed:
779
Removed:
.toolbar ~ * details[open] > .tree-toggle,
780
Removed:
.toolbar ~ details[open] > .tree-toggle {
781
Removed:
top: calc(var(--nav-height) + var(--toolbar-height));
782
Removed:
}
783
Removed:
784
782
.tree-toggle::-webkit-details-marker {
785
783
display: none;
786
784
}
lib/views/layout.ml
@@ -32,7 +32,7 @@
32
32
span [ class_ "nav-home" ] [ txt "%s" nav_title ];
33
33
])
34
34
35
Removed:
let topnav ?(active = Summary) repo =
35
Added:
let topnav ?(active = Summary) ?(toolbar = []) repo =
36
36
let nav_items =
37
37
List.map (page_to_nav_item repo)
38
38
[ Summary; Commits; Files; Branches; Tags; Readme ]
@@ -44,19 +44,22 @@
44
44
HTML.(
45
45
nav
46
46
[ id "top"; Aria.label "Repository navigation" ]
47
Removed:
[
48
Removed:
Routes.link_to Root
49
Removed:
~other_attrs:[ class_ "nav-logo" ]
50
Removed:
(img [ src "/static/git_icon.svg"; alt "Home"; class_ "site-logo" ]);
51
Removed:
Routes.link_to (Repo repo)
52
Removed:
~other_attrs:[ class_ "nav-home" ]
53
Removed:
(txt "%s" repo);
54
Removed:
input [ type_ "checkbox"; id "nav-toggle"; class_ "nav-toggle" ];
55
Removed:
label
56
Removed:
[ for_ "nav-toggle"; class_ "nav-hamburger"; Aria.label "Menu" ]
57
Removed:
[ txt "\xe2\x8b\xae" ];
58
Removed:
ul [ id "nav-links" ] (List.map li_of_item nav_items);
59
Removed:
])
47
Added:
([
48
Added:
Routes.link_to Root
49
Added:
~other_attrs:[ class_ "nav-logo" ]
50
Added:
(img [ src "/static/git_icon.svg"; alt "Home"; class_ "site-logo" ]);
51
Added:
Routes.link_to (Repo repo)
52
Added:
~other_attrs:[ class_ "nav-home" ]
53
Added:
(txt "%s" repo);
54
Added:
]
55
Added:
@ toolbar
56
Added:
@ [
57
Added:
input [ type_ "checkbox"; id "nav-toggle"; class_ "nav-toggle" ];
58
Added:
label
59
Added:
[ for_ "nav-toggle"; class_ "nav-hamburger"; Aria.label "Menu" ]
60
Added:
[ txt "\xe2\x8b\xae" ];
61
Added:
ul [ id "nav-links" ] (List.map li_of_item nav_items);
62
Added:
]))
60
63
61
64
let page_header ~has_repo page_title subtitle =
62
65
let subtitle =
@@ -141,8 +144,8 @@
141
144
a [ href "#main"; class_ "skip-link" ] [ txt "Skip to content" ];
142
145
(match page_data.repo with
143
146
| None -> rootnav ~title:root_title
144
Removed:
| Some repo -> topnav ~active:page_data.active repo);
145
Removed:
null page_data.toolbar;
147
Added:
| Some repo ->
148
Added:
topnav ~active:page_data.active ~toolbar:page_data.toolbar repo);
146
149
HTML.main
147
150
[ id "main" ]
148
151
((match page_data.repo with