From 311f5261cdb23b46d3f510e40fd4e2ac06e376c0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Wed, 17 Apr 2024 10:58:08 +0200
Subject: [PATCH] Fix and tweak pull request commit list (#30528)
Fixes https://github.com/go-gitea/gitea/issues/30493, regression from
https://github.com/go-gitea/gitea/pull/30374.
Also did the flexbox convertion as suggested by the existing comment.
<img width="850" alt="Screenshot 2024-04-16 at 22 28 48"
src="https://github.com/go-gitea/gitea/assets/115237/e8905944-620a-4211-b5c5-53ed3b3ee23e">
Co-authored-by: Giteabot <teabot@gitea.io>
---
templates/repo/commits_list_small.tmpl | 23 ++++++++++----------
web_src/css/repo.css | 30 ++++++++++++--------------
2 files changed, 26 insertions(+), 27 deletions(-)
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index d96b314d01..6ca6dd5cdc 100644
--- a/templates/repo/commits_list_small.tmpl
+++ b/templates/repo/commits_list_small.tmpl
@@ -6,14 +6,23 @@
<div class="singular-commit" id="{{$tag}}">
<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
{{if .User}}
- <a class="avatar" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User}}</a>
+ <a class="avatar" href="{{.User.HomeLink}}">{{ctx.AvatarUtils.Avatar .User 20}}</a>
{{else}}
- {{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name}}
+ {{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 20}}
{{end}}
{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
- <span class="shabox tw-flex tw-items-center tw-float-right">
+ <span class="tw-flex-1 gt-ellipsis tw-font-mono{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.root.Context .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</span>
+
+ {{if IsMultilineCommitMessage .Message}}
+ <button class="ui button js-toggle-commit-body ellipsis-button" aria-expanded="false">...</button>
+ {{end}}
+ {{if IsMultilineCommitMessage .Message}}
+ <pre class="commit-body tw-hidden">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</pre>
+ {{end}}
+
+ <span class="shabox tw-flex tw-items-center">
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
{{$class := "ui sha label"}}
{{if .Signature}}
@@ -37,14 +46,6 @@
{{end}}
</a>
</span>
-
- <span class="tw-font-mono commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject $.root.Context .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</span>
- {{if IsMultilineCommitMessage .Message}}
- <button class="ui button js-toggle-commit-body ellipsis-button" aria-expanded="false">...</button>
- {{end}}
- {{if IsMultilineCommitMessage .Message}}
- <pre class="commit-body tw-hidden">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}}</pre>
- {{end}}
</div>
{{end}}
</div>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 8d1f60d158..882d86c4f6 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -832,55 +832,53 @@ td .commit-summary {
margin-right: 0.25em;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit {
- line-height: 34px; /* this must be same as .badge height, to avoid overflow */
- clear: both; /* reset the "float right shabox", in the future, use flexbox instead */
+.singular-commit {
+ display: flex;
+ align-items: center;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit > img.avatar,
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit > .avatar img {
- position: relative;
- top: -2px;
+.singular-commit .badge {
+ height: 30px !important;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label {
+.singular-commit .shabox .sha.label {
margin: 0;
border: 1px solid var(--color-light-border);
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning {
+.singular-commit .shabox .sha.label.isSigned.isWarning {
border: 1px solid var(--color-red-badge);
background: var(--color-red-badge-bg);
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isWarning:hover {
+.singular-commit .shabox .sha.label.isSigned.isWarning:hover {
background: var(--color-red-badge-hover-bg) !important;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified {
+.singular-commit .shabox .sha.label.isSigned.isVerified {
border: 1px solid var(--color-green-badge);
background: var(--color-green-badge-bg);
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerified:hover {
+.singular-commit .shabox .sha.label.isSigned.isVerified:hover {
background: var(--color-green-badge-hover-bg) !important;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted {
border: 1px solid var(--color-yellow-badge);
background: var(--color-yellow-badge-bg);
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUntrusted:hover {
background: var(--color-yellow-badge-hover-bg) !important;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched {
border: 1px solid var(--color-orange-badge);
background: var(--color-orange-badge-bg);
}
-.repository.view.issue .comment-list .timeline-item.commits-list .singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
+.singular-commit .shabox .sha.label.isSigned.isVerifiedUnmatched:hover {
background: var(--color-orange-badge-hover-bg) !important;
}