Merge 97727a5e889109378fb7e7c86140a5216ef85e21 into dd1fd89185103958cb504e362df91fd2f7856939

templates/repo/commits_list.tmpl

@@ -1,89 +1,79 @@
 <div class="ui attached table segment commit-table">
-	<table class="ui very basic striped table unstackable" id="commits-table">
-		<thead>
-			<tr>
-				<th class="three wide">{{ctx.Locale.Tr "repo.commits.author"}}</th>
-				<th class="two wide sha">{{StringUtils.ToUpper $.Repository.ObjectFormatName}}</th>
-				<th class="eight wide message">{{ctx.Locale.Tr "repo.commits.message"}}</th>
-				<th class="two wide tw-text-right">{{ctx.Locale.Tr "repo.commits.date"}}</th>
-				<th class="one wide"></th>
-			</tr>
-		</thead>
-		<tbody class="commit-list">
-			{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
-			{{range .Commits}}
-				<tr>
-					<td class="author">
-						<div class="tw-flex">
-							{{$userName := .Author.Name}}
-							{{if .User}}
-								{{if and .User.FullName DefaultShowFullName}}
-									{{$userName = .User.FullName}}
-								{{end}}
-								{{ctx.AvatarUtils.Avatar .User 28 "tw-mr-2"}}<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
-							{{else}}
-								{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 28 "tw-mr-2"}}
-								<span class="author-wrapper">{{$userName}}</span>
-							{{end}}
-						</div>
-					</td>
-					<td class="sha">
-						{{$commitBaseLink := ""}}
-						{{if $.PageIsWiki}}
-							{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
-						{{else if $.PageIsPullCommits}}
-							{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
-						{{else if $.Reponame}}
-							{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
-						{{end}}
-						{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
-					</td>
-					<td class="message">
+	<div class="flex-list">
+		{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
+		{{range .Commits}}
+			<div class="flex-item tw-p-2 tw-items-center">
+				<div class="flex-item-main">
+					<div class="flex-item-title">
 						<span class="message-wrapper">
-						{{if $.PageIsWiki}}
-							<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | ctx.RenderUtils.RenderEmoji}}</span>
-						{{else}}
-							{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
-							<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</span>
-						{{end}}
+							{{if $.PageIsWiki}}
+								<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | ctx.RenderUtils.RenderEmoji}}</span>
+							{{else}}
+								{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
+								<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</span>
+							{{end}}
 						</span>
 						{{if IsMultilineCommitMessage .Message}}
-						<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
+							<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
 						{{end}}
+						<div class="sha">
+							{{$commitBaseLink := ""}}
+							{{if $.PageIsWiki}}
+								{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
+							{{else if $.PageIsPullCommits}}
+								{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
+							{{else if $.Reponame}}
+								{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
+							{{end}}
+							{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
+						</div>
 						{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
-						{{if IsMultilineCommitMessage .Message}}
-						<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .Message $.Repository}}</pre>
-						{{end}}
 						{{if $.CommitsTagsMap}}
 							{{range (index $.CommitsTagsMap .ID.String)}}
 								{{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .TagName "IsRelease" (not .IsTag) -}}
 							{{end}}
 						{{end}}
-					</td>
-					{{if .Committer}}
-						<td class="tw-text-right">{{DateUtils.TimeSince .Committer.When}}</td>
-					{{else}}
-						<td class="tw-text-right">{{DateUtils.TimeSince .Author.When}}</td>
+					</div>
+					{{if IsMultilineCommitMessage .Message}}
+						<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .Message $.Repository}}</pre>
 					{{end}}
-					<td class="tw-text-right tw-py-0">
-						<button class="btn interact-bg tw-p-2 copy-commit-id" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
-						{{/* at the moment, wiki doesn't support these "view" links like "view at history point" */}}
-						{{if not $.PageIsWiki}}
-							{{/* view single file diff */}}
-							{{if $.FileTreePath}}
-							<a class="btn interact-bg tw-p-2 view-single-diff" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_file_diff"}}"
-								href="{{$commitRepoLink}}/commit/{{.ID.String}}?files={{$.FileTreePath}}"
-							>{{svg "octicon-file-diff"}}</a>
+					<div class="flex-item-body">
+						{{$userName := .Author.Name}}
+						{{if .User}}
+							{{if and .User.FullName DefaultShowFullName}}
+								{{$userName = .User.FullName}}
 							{{end}}
-
-							{{/* view at history point */}}
-							{{$viewCommitLink := printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
-							{{if $.FileTreePath}}{{$viewCommitLink = printf "%s/%s" $viewCommitLink (PathEscapeSegments $.FileTreePath)}}{{end}}
-							<a class="btn interact-bg tw-p-2 view-commit-path" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_path"}}" href="{{$viewCommitLink}}">{{svg "octicon-file-code"}}</a>
+							{{ctx.AvatarUtils.Avatar .User 20}}
+							<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
+						{{else}}
+							{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 28 "tw-mr-2"}}
+							<span class="author-wrapper">{{$userName}}</span>
 						{{end}}
-					</td>
-				</tr>
-			{{end}}
-		</tbody>
-	</table>
+						{{if .Committer}}
+							{{DateUtils.TimeSince .Committer.When}}
+						{{else}}
+							{{DateUtils.TimeSince .Author.When}}
+						{{end}}
+					</div>
+				</div>
+				<div class="flex-item-trailing">
+					<button class="btn interact-bg tw-p-2 copy-commit-id" data-tooltip-content="{{ctx.Locale.Tr "copy_hash"}}" data-clipboard-text="{{.ID}}">{{svg "octicon-copy"}}</button>
+					{{/* at the moment, wiki doesn't support these "view" links like "view at history point" */}}
+					{{if not $.PageIsWiki}}
+						{{/* view single file diff */}}
+						{{if $.FileTreePath}}
+						<a class="btn interact-bg tw-p-2 view-single-diff" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_file_diff"}}"
+							href="{{$commitRepoLink}}/commit/{{.ID.String}}?files={{$.FileTreePath}}"
+						>{{svg "octicon-file-diff"}}</a>
+						{{end}}
+
+						{{/* view at history point */}}
+						{{$viewCommitLink := printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
+						{{if $.FileTreePath}}{{$viewCommitLink = printf "%s/%s" $viewCommitLink (PathEscapeSegments $.FileTreePath)}}{{end}}
+						<a class="btn interact-bg tw-p-2 view-commit-path" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_path"}}" href="{{$viewCommitLink}}">{{svg "octicon-file-code"}}</a>
+					{{end}}
+				</div>
+			</div>
+		{{end}}
+	</div>
 </div>

tests/integration/git_general_test.go

@@ -708,7 +708,7 @@ func doAutoPRMerge(baseCtx *APITestContext, dstPath string) func(t *testing.T) {
 		doc := NewHTMLParser(t, resp.Body)
 
 		// Get first commit URL
-		commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Last().Attr("href")
+		commitURL, exists := doc.doc.Find(".commit-table .flex-list .flex-item .sha a").Last().Attr("href")
 		assert.True(t, exists)
 		assert.NotEmpty(t, commitURL)
 

tests/integration/pull_status_test.go

@@ -50,7 +50,7 @@ func TestPullCreate_CommitStatus(t *testing.T) {
 		doc := NewHTMLParser(t, resp.Body)
 
 		// Get first commit URL
-		commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Last().Attr("href")
+		commitURL, exists := doc.doc.Find(".commit-table .flex-list .flex-item .sha a").Last().Attr("href")
 		assert.True(t, exists)
 		assert.NotEmpty(t, commitURL)
 
@@ -88,12 +88,12 @@ func TestPullCreate_CommitStatus(t *testing.T) {
 			resp = session.MakeRequest(t, req, http.StatusOK)
 			doc = NewHTMLParser(t, resp.Body)
 
-			commitURL, exists = doc.doc.Find("#commits-table tbody tr td.sha a").Last().Attr("href")
+			commitURL, exists = doc.doc.Find(".commit-table .flex-list .flex-item .sha a").Last().Attr("href")
 			assert.True(t, exists)
 			assert.NotEmpty(t, commitURL)
 			assert.Equal(t, commitID, path.Base(commitURL))
 
-			cls, ok := doc.doc.Find("#commits-table tbody tr td.message .commit-status").Last().Attr("class")
+			cls, ok := doc.doc.Find(".commit-table .flex-list .flex-item .flex-item-title .commit-status").Last().Attr("class")
 			assert.True(t, ok)
 			assert.Contains(t, cls, statesIcons[status])
 		}

tests/integration/repo_commits_search_test.go

@@ -22,7 +22,7 @@ func testRepoCommitsSearch(t *testing.T, query, commit string) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	doc := NewHTMLParser(t, resp.Body)
-	sel := doc.doc.Find("#commits-table tbody tr td.sha a")
+	sel := doc.doc.Find(".commit-table .flex-list .flex-item .sha a")
 	assert.Equal(t, commit, strings.TrimSpace(sel.Text()))
 }
 

tests/integration/repo_commits_test.go

@@ -32,7 +32,7 @@ func TestRepoCommits(t *testing.T) {
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
 	doc := NewHTMLParser(t, resp.Body)
-	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
+	commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 }
@@ -45,14 +45,14 @@ func Test_ReposGitCommitListNotMaster(t *testing.T) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	var commits []string
-	doc.doc.Find("#commits-table .commit-id-short").Each(func(i int, s *goquery.Selection) {
+	doc.doc.Find(".commit-table .commit-id-short").Each(func(i int, s *goquery.Selection) {
 		commitURL, _ := s.Attr("href")
 		commits = append(commits, path.Base(commitURL))
 	})
 	assert.Equal(t, []string{"69554a64c1e6030f051e5c3f94bfbd773cd6a324", "27566bd5738fc8b4e3fef3c5e72cce608537bd95", "5099b81332712fe655e34e8dd63574f503f61811"}, commits)
 
 	var userHrefs []string
-	doc.doc.Find("#commits-table .author-wrapper").Each(func(i int, s *goquery.Selection) {
+	doc.doc.Find(".commit-table .author-wrapper").Each(func(i int, s *goquery.Selection) {
 		userHref, _ := s.Attr("href")
 		userHrefs = append(userHrefs, userHref)
 	})
@@ -70,7 +70,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	// Get first commit URL
-	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
+	commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 
@@ -88,7 +88,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
 
 	doc = NewHTMLParser(t, resp.Body)
 	// Check if commit status is displayed in message column (.tippy-target to ignore the tippy trigger)
-	sel := doc.doc.Find("#commits-table .message .tippy-target .commit-status")
+	sel := doc.doc.Find(".commit-table .flex-item-title .tippy-target .commit-status")
 	assert.Equal(t, 1, sel.Length())
 	for _, class := range classes {
 		assert.True(t, sel.HasClass(class))
@@ -164,7 +164,7 @@ func TestRepoCommitsStatusParallel(t *testing.T) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	// Get first commit URL
-	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
+	commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 
@@ -199,7 +199,7 @@ func TestRepoCommitsStatusMultiple(t *testing.T) {
 
 	doc := NewHTMLParser(t, resp.Body)
 	// Get first commit URL
-	commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
+	commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
 	assert.True(t, exists)
 	assert.NotEmpty(t, commitURL)
 
@@ -224,6 +224,6 @@ func TestRepoCommitsStatusMultiple(t *testing.T) {
 
 	doc = NewHTMLParser(t, resp.Body)
 	// Check that the data-global-init="initCommitStatuses" (for trigger) and commit-status (svg) are present
-	sel := doc.doc.Find(`#commits-table .message [data-global-init="initCommitStatuses"] .commit-status`)
+	sel := doc.doc.Find(`.commit-table .flex-list .flex-item .flex-item-title [data-global-init="initCommitStatuses"] .commit-status`)
 	assert.Equal(t, 1, sel.Length())
 }

tests/integration/view_test.go

@@ -36,9 +36,9 @@ func TestCommitListActions(t *testing.T) {
 		req := NewRequest(t, "GET", "/user2/repo1/wiki/Home?action=_revision")
 		resp := session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc := NewHTMLParser(t, resp.Body)
-		AssertHTMLElement(t, htmlDoc, ".commit-list .copy-commit-id", true)
-		AssertHTMLElement(t, htmlDoc, `.commit-list .view-single-diff`, false)
-		AssertHTMLElement(t, htmlDoc, `.commit-list .view-commit-path`, false)
+		AssertHTMLElement(t, htmlDoc, ".commit-table .copy-commit-id", true)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .view-single-diff`, false)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .view-commit-path`, false)
 	})
 
 	t.Run("RepoCommitList", func(t *testing.T) {
@@ -48,9 +48,9 @@ func TestCommitListActions(t *testing.T) {
 		resp := session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc := NewHTMLParser(t, resp.Body)
 
-		AssertHTMLElement(t, htmlDoc, `.commit-list .copy-commit-id`, true)
-		AssertHTMLElement(t, htmlDoc, `.commit-list .view-single-diff`, false)
-		AssertHTMLElement(t, htmlDoc, `.commit-list .view-commit-path`, true)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .copy-commit-id`, true)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .view-single-diff`, false)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .view-commit-path`, true)
 	})
 
 	t.Run("RepoFileHistory", func(t *testing.T) {
@@ -60,8 +60,8 @@ func TestCommitListActions(t *testing.T) {
 		resp := session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc := NewHTMLParser(t, resp.Body)
 
-		AssertHTMLElement(t, htmlDoc, `.commit-list .copy-commit-id`, true)
-		AssertHTMLElement(t, htmlDoc, `.commit-list .view-single-diff`, true)
-		AssertHTMLElement(t, htmlDoc, `.commit-list .view-commit-path`, true)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .copy-commit-id`, true)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .view-single-diff`, true)
+		AssertHTMLElement(t, htmlDoc, `.commit-table .view-commit-path`, true)
 	})
 }

web_src/css/repo.css

@@ -572,12 +572,6 @@ td .commit-summary {
   padding-top: 0;
 }
 
-.repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
-  float: right;
-  margin-right: 8px;
-  margin-top: 4px;
-}
-
 .repository.view.issue .comment-list .timeline-item .comparebox {
   line-height: 32px;
   vertical-align: middle;
@@ -878,17 +872,6 @@ td .commit-summary {
   padding: 5px 10px;
 }
 
-.repository #commits-table td:not(.message) {
-  white-space: nowrap;
-}
-.repository #commits-table thead .sha {
-  width: 200px;
-}
-
-.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
-  background-color: var(--color-light) !important;
-}
-
 .repository .data-table {
   width: 100%;
 }
@@ -1541,10 +1524,6 @@ td .commit-summary {
   min-height: 30px;
 }
 
-tbody.commit-list {
-  vertical-align: baseline;
-}
-
 .message-wrapper,
 .author-wrapper {
   overflow: hidden;
@@ -1564,44 +1543,12 @@ tbody.commit-list {
   max-width: calc(100% - 2.5rem);
 }
 
-/* in the commit list, messages can wrap so we can use inline */
-.commit-list .message-wrapper {
-  display: inline;
-  overflow-wrap: anywhere;
-}
-
 @media (max-width: 767.98px) {
-  tr.commit-list {
-    width: 100%;
-  }
   .author-wrapper {
     max-width: 80px;
   }
 }
 
-@media (min-width: 768px) and (max-width: 991.98px) {
-  tr.commit-list {
-    width: 723px;
-  }
-}
-
-@media (min-width: 992px) and (max-width: 1200px) {
-  tr.commit-list {
-    width: 933px;
-  }
-}
-
-@media (min-width: 1201px) {
-  tr.commit-list {
-    width: 1127px;
-  }
-}
-
-.commit-list .commit-status-link {
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .commit-body {
   margin: 0.25em 0;
   white-space: pre-wrap;
@@ -2010,10 +1957,6 @@ tbody.commit-list {
   .commit-table {
     overflow-x: auto;
   }
-  .commit-table td.sha,
-  .commit-table th.sha {
-    display: none !important;
-  }
   .comment-header {
     flex-wrap: wrap;
   }

web_src/js/features/repo-commit.ts

@@ -6,7 +6,7 @@ export function initRepoEllipsisButton() {
   registerGlobalEventFunc('click', 'onRepoEllipsisButtonClick', async (el: HTMLInputElement, e: Event) => {
     e.preventDefault();
     const expanded = el.getAttribute('aria-expanded') === 'true';
-    toggleElem(el.parentElement.querySelector('.commit-body'));
+    toggleElem(el.parentElement.parentElement.querySelector('.commit-body'));
     el.setAttribute('aria-expanded', String(!expanded));
   });
 }