[OCaml] Mobile-friendly clone of cgit.
feat sticky diff-file-header and hunk-header on vertical scroll
diff-file-header sticks below the top navbar; hunk-header sticks beneath the stickied diff-file-header. overflow:hidden replaced with overflow:clip on .diff-file so sticky positioning works on descendants.
lib/static/styles.css
@@ -18,6 +18,7 @@
18
18
--nav-height: 48px;
19
19
--toolbar-height: 52px;
20
20
--target-size: 44px;
21
Added:
--diff-file-header-height: 2.2rem;
21
22
22
23
/* Color tokens */
23
24
--color-muted: #b0b0b0;
@@ -872,6 +873,14 @@
872
873
top: calc(var(--nav-height) + var(--toolbar-height));
873
874
}
874
875
876
Added:
body.has-toolbar .diff-file-header {
877
Added:
top: calc(var(--nav-height) + var(--toolbar-height));
878
Added:
}
879
Added:
880
Added:
body.has-toolbar .hunk-header {
881
Added:
top: calc(var(--nav-height) + var(--toolbar-height) + var(--diff-file-header-height));
882
Added:
}
883
Added:
875
884
#repositories details > .tree-toggle,
876
885
.repo-section details > .tree-toggle {
877
886
position: static;
@@ -954,7 +963,7 @@
954
963
margin: 1.5em 0;
955
964
border: 1px solid var(--color-border-subtle);
956
965
border-radius: 0.25rem;
957
Removed:
overflow: hidden;
966
Added:
overflow: clip;
958
967
}
959
968
960
969
.diff-hunk {
@@ -973,6 +982,9 @@
973
982
background: #242424;
974
983
cursor: pointer;
975
984
list-style: none;
985
Added:
position: sticky;
986
Added:
top: var(--nav-height);
987
Added:
z-index: 7;
976
988
}
977
989
978
990
.diff-file-header::-webkit-details-marker {
@@ -993,6 +1005,9 @@
993
1005
background: #252535;
994
1006
cursor: pointer;
995
1007
list-style: none;
1008
Added:
position: sticky;
1009
Added:
top: calc(var(--nav-height) + var(--diff-file-header-height));
1010
Added:
z-index: 6;
996
1011
}
997
1012
998
1013
.hunk-header::-webkit-details-marker {