HTML: Don't use <table> for the repo index page's commit list

References: https://todo.sr.ht/~runxiyu/forge/9

2 files changed, 73 insertions, 30 deletions

diff --git a/static/style.css b/static/style.css
index d31e0fc..077f2f6 100644
--- a/static/style.css
+++ b/static/style.css
@@ -546,7 +546,7 @@ td > ul {
 	padding-bottom: 0.2rem;
 }
 
-.repo-header, .padding-wrapper, .repo-header-extension-content, #main-header, .readingwidth {
+.repo-header, .padding-wrapper, .repo-header-extension-content, #main-header, .readingwidth, .commit-list-small {
 	padding-left: 1rem;
 	padding-right: 1rem;
 	max-width: 60rem;
@@ -558,3 +558,55 @@ td > ul {
 .padding-wrapper {
 	margin-bottom: 1rem;
 }
+
+/* TODO */
+
+.commit-list-small .event {
+	border: 1px solid var(--lighter-border-color);
+	background-color: var(--lighter-box-background-color);
+	padding: 0.5rem;
+	margin-bottom: 1rem;
+	max-width: 30rem;
+}
+
+.commit-list-small .event:last-child {
+	margin-bottom: 1rem;
+}
+
+.commit-list-small a {
+	color: var(--link-color);
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.commit-list-small a:hover {
+	text-decoration: underline;
+	text-decoration-color: var(--text-decoration-color);
+}
+
+.commit-list-small .event > div {
+	font-size: 0.95rem;
+	line-height: 1.4;
+}
+
+.commit-list-small .pull-right {
+	float: right;
+	font-size: 0.85em;
+	color: var(--light-text-color);
+	margin-left: 1rem;
+}
+
+.commit-list-small pre.commit {
+	margin: 0.25rem 0 0 0;
+	padding: 0;
+	font-family: inherit;
+	font-size: 0.95rem;
+	color: var(--text-color);
+	white-space: pre-wrap;
+}
+
+.commit-list-small .commit-error {
+	color: var(--danger-color);
+	font-weight: bold;
+	margin-top: 1rem;
+}
diff --git a/templates/repo_index.tmpl b/templates/repo_index.tmpl
index 666eaeb..21eb5f6 100644
--- a/templates/repo_index.tmpl
+++ b/templates/repo_index.tmpl
@@ -52,35 +52,26 @@
 		{{- end -}}
 		<p class="readingwidth"><code>{{- .ssh_clone_url -}}</code></p>
 		{{- if .commits -}}
-			<div class="padding-wrapper scroll">
-				<table id="recent-commits" class="wide">
-					<thead>
-						<tr class="title-row">
-							<th colspan="3">Recent commits (<a href="log/{{- template "ref_query" $root -}}">see all</a>)</th>
-						</tr>
-						<tr>
-							<th scope="col">Title</th>
-							<th scope="col">Author</th>
-							<th scope="col">Author date</th>
-						</tr>
-					</thead>
-					<tbody>
-						{{- range .commits -}}
-							<tr>
-								<td class="commit-title"><a href="commit/{{- .Hash -}}">{{- .Message | first_line -}}</a></td>
-								<td class="commit-author">
-									<a class="email-name" href="mailto:{{- .Email -}}">{{- .Author -}}</a>
-								</td>
-								<td class="commit-time">
-									{{- .Date -}}
-								</td>
-							</tr>
-						{{- end -}}
-						{{- if dereference_error .commits_err -}}
-							Error while obtaining commit log: {{ .commits_err }}
-						{{- end -}}
-					</tbody>
-				</table>
+			<div class="commit-list-small">
+				{{- range .commits -}}
+					<div class="event">
+						<div>
+							<a href="commit/{{- .Hash -}}" title="{{- .Hash -}}" rel="nofollow">
+								{{- .Hash | printf "%.8s" -}}
+							</a>
+							&nbsp;&mdash;&nbsp;<a href="mailto:{{- .Email -}}">{{- .Author -}}</a>
+							<small class="pull-right">
+								<span title="{{- .Date -}}">{{- .Date -}}</span>
+							</small>
+						</div>
+						<pre class="commit">{{- .Message | first_line -}}</pre>
+					</div>
+				{{- end -}}
+				{{- if dereference_error .commits_err -}}
+					<div class="commit-error">
+						Error while obtaining commit log: {{ .commits_err }}
+					</div>
+				{{- end -}}
 			</div>
 		{{- end -}}
 		{{- if .readme -}}