[OCaml] Mobile-friendly clone of cgit.
refactor mobile commit-list uses compact two-row layout
Break commit-pill out of .commit-title span so pill, title, ago, and author are independent flex children of the li. On mobile (<=600px), CSS order produces: Row 1: commit title (full width, reflows naturally) Row 2: pill, relative time, author (pushed right)
Changed files
lib/static/styles.css
@@ -494,7 +494,6 @@
494
494
min-width: 0;
495
495
overflow: hidden;
496
496
align-self: stretch;
497
Removed:
gap: 0.5em;
498
497
}
499
498
500
499
.commit-title > a {
@@ -1110,20 +1109,40 @@
1110
1109
1111
1110
#main ul li:has(.commit-title) {
1112
1111
flex-wrap: wrap;
1112
Added:
align-items: baseline;
1113
Added:
padding-top: 0.5em;
1114
Added:
padding-bottom: 0.5em;
1113
1115
}
1114
1116
1115
1117
.commit-title {
1116
1118
flex: 1 0 100%;
1119
Added:
overflow: visible;
1120
Added:
order: 1;
1117
1121
}
1118
1122
1123
Added:
.commit-title > a {
1124
Added:
white-space: normal;
1125
Added:
overflow: visible;
1126
Added:
text-overflow: unset;
1127
Added:
height: auto;
1128
Added:
line-height: 1.4;
1129
Added:
}
1130
Added:
1131
Added:
#main ul li:has(.commit-title) > .commit-pill {
1132
Added:
flex: 0 0 auto;
1133
Added:
order: 2;
1134
Added:
}
1135
Added:
1119
1136
.commit-ago {
1137
Added:
order: 3;
1120
1138
padding-top: 0;
1121
Removed:
padding-bottom: 0.5em;
1139
Added:
padding-bottom: 0;
1122
1140
}
1123
1141
1124
1142
.commit-author {
1143
Added:
order: 4;
1125
1144
margin-left: auto;
1126
Removed:
padding-bottom: 0.5em;
1145
Added:
padding-bottom: 0;
1127
1146
}
1128
1147
1129
1148
nav#top #nav-home {
lib/views/repo.ml
@@ -126,8 +126,9 @@
126
126
[
127
127
Ui.inline_text ~class_:"timestamp"
128
128
(Time_format.short_time commit.author.date);
129
Added:
badge;
129
130
Ui.inline ~class_:"commit-title"
130
Removed:
[ badge; Components.route_link (Commit (repo, commit.hash)) title ];
131
Added:
[ Components.route_link (Commit (repo, commit.hash)) title ];
131
132
Ui.inline_text ~class_:"commit-ago"
132
133
(Time_format.relative_time commit.author.date);
133
134
(match author with