[OCaml] Mobile-friendly clone of cgit.
feat collapsible sections and two-column layout on root page
Favorites, Repositories, and Archived sections are wrapped in <details> elements for collapsible display. Archived defaults to collapsed; the others default to open. On wide screens (>= 960px) the page uses a two-column grid with repos on the left and README on the right. Section headings stick below the navbar when scrolling. Repo item flex styling is shared across all sections.
Changed files
lib/static/styles.css
@@ -239,15 +239,71 @@
239
239
background-color: #252525;
240
240
}
241
241
242
Added:
/* Root page layout */
243
Added:
.root-layout {
244
Added:
display: flex;
245
Added:
flex-direction: column;
246
Added:
}
247
Added:
248
Added:
.root-readme:empty {
249
Added:
display: none;
250
Added:
}
251
Added:
252
Added:
@media (min-width: 960px) {
253
Added:
.root-layout {
254
Added:
display: grid;
255
Added:
grid-template-columns: 2fr 1fr;
256
Added:
gap: 2em;
257
Added:
}
258
Added:
}
259
Added:
260
Added:
/* Root page section toggles */
261
Added:
.section-toggle {
262
Added:
cursor: pointer;
263
Added:
list-style: none;
264
Added:
user-select: none;
265
Added:
}
266
Added:
267
Added:
.section-toggle::-webkit-details-marker {
268
Added:
display: none;
269
Added:
}
270
Added:
271
Added:
.section-toggle h3 {
272
Added:
display: inline;
273
Added:
}
274
Added:
275
Added:
.section-toggle::before {
276
Added:
content: "\25be";
277
Added:
display: inline-block;
278
Added:
margin-right: 0.4em;
279
Added:
transition: transform 0.15s ease;
280
Added:
}
281
Added:
282
Added:
details:not([open]) > .section-toggle::before {
283
Added:
transform: rotate(-90deg);
284
Added:
}
285
Added:
286
Added:
@media (min-width: 960px) {
287
Added:
.section-toggle {
288
Added:
position: sticky;
289
Added:
top: var(--nav-height);
290
Added:
background-color: #1a1a1a;
291
Added:
z-index: 5;
292
Added:
padding: 0.5em 0;
293
Added:
}
294
Added:
}
295
Added:
242
296
/* Root page repository items */
243
Removed:
#repositories li {
297
Added:
#repositories li,
298
Added:
.repo-section li {
244
299
display: flex;
245
300
align-items: center;
246
301
flex-wrap: wrap;
247
302
gap: 0 1em;
248
303
}
249
304
250
Removed:
div#main #repositories li > a {
305
Added:
div#main #repositories li > a,
306
Added:
div#main .repo-section li > a {
251
307
display: flex;
252
308
align-items: center;
253
309
flex: 1;
lib/views/root.ml
@@ -67,7 +67,15 @@
67
67
HTML.(
68
68
section
69
69
[ class_ "repo-section repo-favorites" ]
70
Removed:
[ h3 [] [ txt "Favorites" ]; repo_list favorites ])
70
Added:
[
71
Added:
details [ open_ ]
72
Added:
[
73
Added:
summary
74
Added:
[ class_ "section-toggle" ]
75
Added:
[ h3 [] [ txt "Favorites" ] ];
76
Added:
repo_list favorites;
77
Added:
];
78
Added:
])
71
79
in
72
80
let main_section =
73
81
HTML.(
@@ -79,7 +87,16 @@
79
87
[ repo_list nodes ]
80
88
| _ ->
81
89
if nodes = [] then []
82
Removed:
else [ h3 [] [ txt "Repositories" ]; repo_list nodes ]))
90
Added:
else
91
Added:
[
92
Added:
details [ open_ ]
93
Added:
[
94
Added:
summary
95
Added:
[ class_ "section-toggle" ]
96
Added:
[ h3 [] [ txt "Repositories" ] ];
97
Added:
repo_list nodes;
98
Added:
];
99
Added:
]))
83
100
in
84
101
let archived_section =
85
102
match archived with
@@ -88,7 +105,15 @@
88
105
HTML.(
89
106
section
90
107
[ class_ "repo-section repo-archived" ]
91
Removed:
[ h3 [] [ txt "Archived" ]; repo_list archived ])
108
Added:
[
109
Added:
details []
110
Added:
[
111
Added:
summary
112
Added:
[ class_ "section-toggle" ]
113
Added:
[ h3 [] [ txt "Archived" ] ];
114
Added:
repo_list archived;
115
Added:
];
116
Added:
])
92
117
in
93
118
let readme_section =
94
119
match readme with
@@ -125,5 +150,15 @@
125
150
subtitle = "";
126
151
active = Summary;
127
152
content =
128
Removed:
[ favorites_section; main_section; archived_section; readme_section ];
153
Added:
[
154
Added:
HTML.(
155
Added:
div
156
Added:
[ class_ "root-layout" ]
157
Added:
[
158
Added:
div
159
Added:
[ class_ "root-repos" ]
160
Added:
[ favorites_section; main_section; archived_section ];
161
Added:
div [ class_ "root-readme" ] [ readme_section ];
162
Added:
]);
163
Added:
];
129
164
}