Skip to content

Commit 3807b2f

Browse files
denyskondenyskon
committed
Refactor commit list to flex-item
1 parent 8df59fa commit 3807b2f

File tree

6 files changed

+75
-142
lines changed

6 files changed

+75
-142
lines changed

‎templates/repo/commits_list.tmpl‎

Lines changed: 62 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,79 @@
11
<div class="ui attached table segment commit-table">
2-
<table class="ui very basic striped table unstackable" id="commits-table">
3-
<thead>
4-
<tr>
5-
<th class="three wide">{{ctx.Locale.Tr "repo.commits.author"}}</th>
6-
<th class="two wide sha">{{StringUtils.ToUpper $.Repository.ObjectFormatName}}</th>
7-
<th class="eight wide message">{{ctx.Locale.Tr "repo.commits.message"}}</th>
8-
<th class="two wide tw-text-right">{{ctx.Locale.Tr "repo.commits.date"}}</th>
9-
<th class="one wide"></th>
10-
</tr>
11-
</thead>
12-
<tbody class="commit-list">
13-
{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
14-
{{range .Commits}}
15-
<tr>
16-
<td class="author">
17-
<div class="tw-flex">
18-
{{$userName := .Author.Name}}
19-
{{if .User}}
20-
{{if and .User.FullName DefaultShowFullName}}
21-
{{$userName = .User.FullName}}
22-
{{end}}
23-
{{ctx.AvatarUtils.Avatar .User 28 "tw-mr-2"}}<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
2+
<div class="flex-list">
3+
{{$commitRepoLink := $.RepoLink}}{{if $.CommitRepoLink}}{{$commitRepoLink = $.CommitRepoLink}}{{end}}
4+
{{range .Commits}}
5+
<div class="flex-item tw-p-2 tw-items-center">
6+
<div class="flex-item-main">
7+
<div class="flex-item-title">
8+
<span class="message-wrapper">
9+
{{if $.PageIsWiki}}
10+
<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | ctx.RenderUtils.RenderEmoji}}</span>
2411
{{else}}
25-
{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 28 "tw-mr-2"}}
26-
<span class="author-wrapper">{{$userName}}</span>
12+
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
13+
<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</span>
2714
{{end}}
28-
</div>
29-
</td>
30-
<td class="sha">
31-
{{$commitBaseLink := ""}}
32-
{{if $.PageIsWiki}}
33-
{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
34-
{{else if $.PageIsPullCommits}}
35-
{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
36-
{{else if $.Reponame}}
37-
{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
38-
{{end}}
39-
{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
40-
</td>
41-
<td class="message">
42-
<span class="message-wrapper">
43-
{{if $.PageIsWiki}}
44-
<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary | ctx.RenderUtils.RenderEmoji}}</span>
45-
{{else}}
46-
{{$commitLink:= printf "%s/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
47-
<span class="commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{ctx.RenderUtils.RenderCommitMessageLinkSubject .Message $commitLink $.Repository}}</span>
48-
{{end}}
4915
</span>
5016
{{if IsMultilineCommitMessage .Message}}
51-
<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
17+
<button class="ui button ellipsis-button" aria-expanded="false" data-global-click="onRepoEllipsisButtonClick">...</button>
5218
{{end}}
19+
<div class="sha">
20+
{{$commitBaseLink := ""}}
21+
{{if $.PageIsWiki}}
22+
{{$commitBaseLink = printf "%s/wiki/commit" $commitRepoLink}}
23+
{{else if $.PageIsPullCommits}}
24+
{{$commitBaseLink = printf "%s/pulls/%d/commits" $commitRepoLink $.Issue.Index}}
25+
{{else if $.Reponame}}
26+
{{$commitBaseLink = printf "%s/commit" $commitRepoLink}}
27+
{{end}}
28+
{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
29+
</div>
5330
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
5431
{{if IsMultilineCommitMessage .Message}}
55-
<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .Message $.Repository}}</pre>
32+
<pre class="commit-body tw-hidden">{{ctx.RenderUtils.RenderCommitBody .Message $.Repository}}</pre>
5633
{{end}}
5734
{{if $.CommitsTagsMap}}
5835
{{range (index $.CommitsTagsMap .ID.String)}}
5936
{{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .TagName "IsRelease" (not .IsTag) -}}
6037
{{end}}
6138
{{end}}
62-
</td>
63-
{{if .Committer}}
64-
<td class="tw-text-right">{{DateUtils.TimeSince .Committer.When}}</td>
65-
{{else}}
66-
<td class="tw-text-right">{{DateUtils.TimeSince .Author.When}}</td>
67-
{{end}}
68-
<td class="tw-text-right tw-py-0">
69-
<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>
70-
{{/* at the moment, wiki doesn't support these "view" links like "view at history point" */}}
71-
{{if not $.PageIsWiki}}
72-
{{/* view single file diff */}}
73-
{{if $.FileTreePath}}
74-
<a class="btn interact-bg tw-p-2 view-single-diff" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_file_diff"}}"
75-
href="{{$commitRepoLink}}/commit/{{.ID.String}}?files={{$.FileTreePath}}"
76-
>{{svg "octicon-file-diff"}}</a>
39+
</div>
40+
<div class="flex-item-body">
41+
{{$userName := .Author.Name}}
42+
{{if .User}}
43+
{{if and .User.FullName DefaultShowFullName}}
44+
{{$userName = .User.FullName}}
7745
{{end}}
78-
79-
{{/* view at history point */}}
80-
{{$viewCommitLink := printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
81-
{{if $.FileTreePath}}{{$viewCommitLink = printf "%s/%s" $viewCommitLink (PathEscapeSegments $.FileTreePath)}}{{end}}
82-
<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>
46+
{{ctx.AvatarUtils.Avatar .User 20}}
47+
<a class="muted author-wrapper" href="{{.User.HomeLink}}">{{$userName}}</a>
48+
{{else}}
49+
{{ctx.AvatarUtils.AvatarByEmail .Author.Email .Author.Name 28 "tw-mr-2"}}
50+
<span class="author-wrapper">{{$userName}}</span>
51+
{{end}}
52+
{{if .Committer}}
53+
{{DateUtils.TimeSince .Committer.When}}
54+
{{else}}
55+
{{DateUtils.TimeSince .Author.When}}
56+
{{end}}
57+
</div>
58+
</div>
59+
<div class="flex-item-trailing">
60+
<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>
61+
{{/* at the moment, wiki doesn't support these "view" links like "view at history point" */}}
62+
{{if not $.PageIsWiki}}
63+
{{/* view single file diff */}}
64+
{{if $.FileTreePath}}
65+
<a class="btn interact-bg tw-p-2 view-single-diff" data-tooltip-content="{{ctx.Locale.Tr "repo.commits.view_file_diff"}}"
66+
href="{{$commitRepoLink}}/commit/{{.ID.String}}?files={{$.FileTreePath}}"
67+
>{{svg "octicon-file-diff"}}</a>
8368
{{end}}
84-
</td>
85-
</tr>
86-
{{end}}
87-
</tbody>
88-
</table>
69+
70+
{{/* view at history point */}}
71+
{{$viewCommitLink := printf "%s/src/commit/%s" $commitRepoLink (PathEscape .ID.String)}}
72+
{{if $.FileTreePath}}{{$viewCommitLink = printf "%s/%s" $viewCommitLink (PathEscapeSegments $.FileTreePath)}}{{end}}
73+
<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>
74+
{{end}}
75+
</div>
76+
</div>
77+
{{end}}
78+
</div>
8979
</div>

‎tests/integration/git_general_test.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -708,7 +708,7 @@ func doAutoPRMerge(baseCtx *APITestContext, dstPath string) func(t *testing.T) {
708708
doc := NewHTMLParser(t, resp.Body)
709709

710710
// Get first commit URL
711-
commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Last().Attr("href")
711+
commitURL, exists := doc.doc.Find(".commit-table .flex-list .flex-item .sha a").Last().Attr("href")
712712
assert.True(t, exists)
713713
assert.NotEmpty(t, commitURL)
714714

‎tests/integration/pull_status_test.go‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ func TestPullCreate_CommitStatus(t *testing.T) {
5050
doc := NewHTMLParser(t, resp.Body)
5151

5252
// Get first commit URL
53-
commitURL, exists := doc.doc.Find("#commits-table tbody tr td.sha a").Last().Attr("href")
53+
commitURL, exists := doc.doc.Find(".commit-table .flex-list .flex-item .sha a").Last().Attr("href")
5454
assert.True(t, exists)
5555
assert.NotEmpty(t, commitURL)
5656

@@ -88,12 +88,12 @@ func TestPullCreate_CommitStatus(t *testing.T) {
8888
resp = session.MakeRequest(t, req, http.StatusOK)
8989
doc = NewHTMLParser(t, resp.Body)
9090

91-
commitURL, exists = doc.doc.Find("#commits-table tbody tr td.sha a").Last().Attr("href")
91+
commitURL, exists = doc.doc.Find(".commit-table .flex-list .flex-item .sha a").Last().Attr("href")
9292
assert.True(t, exists)
9393
assert.NotEmpty(t, commitURL)
9494
assert.Equal(t, commitID, path.Base(commitURL))
9595

96-
cls, ok := doc.doc.Find("#commits-table tbody tr td.message .commit-status").Last().Attr("class")
96+
cls, ok := doc.doc.Find(".commit-table .flex-list .flex-item .flex-item-title .commit-status").Last().Attr("class")
9797
assert.True(t, ok)
9898
assert.Contains(t, cls, statesIcons[status])
9999
}

‎tests/integration/repo_commits_search_test.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ func testRepoCommitsSearch(t *testing.T, query, commit string) {
2222
resp := session.MakeRequest(t, req, http.StatusOK)
2323

2424
doc := NewHTMLParser(t, resp.Body)
25-
sel := doc.doc.Find("#commits-table tbody tr td.sha a")
25+
sel := doc.doc.Find(".commit-table .flex-list .flex-item .sha a")
2626
assert.Equal(t, commit, strings.TrimSpace(sel.Text()))
2727
}
2828

‎tests/integration/repo_commits_test.go‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ func TestRepoCommits(t *testing.T) {
3232
resp := session.MakeRequest(t, req, http.StatusOK)
3333

3434
doc := NewHTMLParser(t, resp.Body)
35-
commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
35+
commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
3636
assert.True(t, exists)
3737
assert.NotEmpty(t, commitURL)
3838
}
@@ -45,14 +45,14 @@ func Test_ReposGitCommitListNotMaster(t *testing.T) {
4545

4646
doc := NewHTMLParser(t, resp.Body)
4747
var commits []string
48-
doc.doc.Find("#commits-table .commit-id-short").Each(func(i int, s *goquery.Selection) {
48+
doc.doc.Find(".commit-table .commit-id-short").Each(func(i int, s *goquery.Selection) {
4949
commitURL, _ := s.Attr("href")
5050
commits = append(commits, path.Base(commitURL))
5151
})
5252
assert.Equal(t, []string{"69554a64c1e6030f051e5c3f94bfbd773cd6a324", "27566bd5738fc8b4e3fef3c5e72cce608537bd95", "5099b81332712fe655e34e8dd63574f503f61811"}, commits)
5353

5454
var userHrefs []string
55-
doc.doc.Find("#commits-table .author-wrapper").Each(func(i int, s *goquery.Selection) {
55+
doc.doc.Find(".commit-table .author-wrapper").Each(func(i int, s *goquery.Selection) {
5656
userHref, _ := s.Attr("href")
5757
userHrefs = append(userHrefs, userHref)
5858
})
@@ -70,7 +70,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
7070

7171
doc := NewHTMLParser(t, resp.Body)
7272
// Get first commit URL
73-
commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
73+
commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
7474
assert.True(t, exists)
7575
assert.NotEmpty(t, commitURL)
7676

@@ -88,7 +88,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
8888

8989
doc = NewHTMLParser(t, resp.Body)
9090
// Check if commit status is displayed in message column (.tippy-target to ignore the tippy trigger)
91-
sel := doc.doc.Find("#commits-table .message .tippy-target .commit-status")
91+
sel := doc.doc.Find(".commit-table .flex-item-title .tippy-target .commit-status")
9292
assert.Equal(t, 1, sel.Length())
9393
for _, class := range classes {
9494
assert.True(t, sel.HasClass(class))
@@ -164,7 +164,7 @@ func TestRepoCommitsStatusParallel(t *testing.T) {
164164

165165
doc := NewHTMLParser(t, resp.Body)
166166
// Get first commit URL
167-
commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
167+
commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
168168
assert.True(t, exists)
169169
assert.NotEmpty(t, commitURL)
170170

@@ -199,7 +199,7 @@ func TestRepoCommitsStatusMultiple(t *testing.T) {
199199

200200
doc := NewHTMLParser(t, resp.Body)
201201
// Get first commit URL
202-
commitURL, exists := doc.doc.Find("#commits-table .commit-id-short").Attr("href")
202+
commitURL, exists := doc.doc.Find(".commit-table .commit-id-short").Attr("href")
203203
assert.True(t, exists)
204204
assert.NotEmpty(t, commitURL)
205205

@@ -224,6 +224,6 @@ func TestRepoCommitsStatusMultiple(t *testing.T) {
224224

225225
doc = NewHTMLParser(t, resp.Body)
226226
// Check that the data-global-init="initCommitStatuses" (for trigger) and commit-status (svg) are present
227-
sel := doc.doc.Find(`#commits-table .message [data-global-init="initCommitStatuses"] .commit-status`)
227+
sel := doc.doc.Find(`.commit-table .flex-list .flex-item .flex-item-title [data-global-init="initCommitStatuses"] .commit-status`)
228228
assert.Equal(t, 1, sel.Length())
229229
}

‎web_src/css/repo.css‎

Lines changed: 0 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -612,12 +612,6 @@ td .commit-summary {
612612
padding-top: 0;
613613
}
614614

615-
.repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
616-
float: right;
617-
margin-right: 8px;
618-
margin-top: 4px;
619-
}
620-
621615
.repository.view.issue .comment-list .timeline-item .comparebox {
622616
line-height: 32px;
623617
vertical-align: middle;
@@ -918,17 +912,6 @@ td .commit-summary {
918912
padding: 5px 10px;
919913
}
920914

921-
.repository #commits-table td:not(.message) {
922-
white-space: nowrap;
923-
}
924-
.repository #commits-table thead .sha {
925-
width: 200px;
926-
}
927-
928-
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
929-
background-color: var(--color-light) !important;
930-
}
931-
932915
.repository .data-table {
933916
width: 100%;
934917
}
@@ -1581,10 +1564,6 @@ td .commit-summary {
15811564
min-height: 30px;
15821565
}
15831566

1584-
tbody.commit-list {
1585-
vertical-align: baseline;
1586-
}
1587-
15881567
.message-wrapper,
15891568
.author-wrapper {
15901569
overflow: hidden;
@@ -1604,44 +1583,12 @@ tbody.commit-list {
16041583
max-width: calc(100% - 2.5rem);
16051584
}
16061585

1607-
/* in the commit list, messages can wrap so we can use inline */
1608-
.commit-list .message-wrapper {
1609-
display: inline;
1610-
overflow-wrap: anywhere;
1611-
}
1612-
16131586
@media (max-width: 767.98px) {
1614-
tr.commit-list {
1615-
width: 100%;
1616-
}
16171587
.author-wrapper {
16181588
max-width: 80px;
16191589
}
16201590
}
16211591

1622-
@media (min-width: 768px) and (max-width: 991.98px) {
1623-
tr.commit-list {
1624-
width: 723px;
1625-
}
1626-
}
1627-
1628-
@media (min-width: 992px) and (max-width: 1200px) {
1629-
tr.commit-list {
1630-
width: 933px;
1631-
}
1632-
}
1633-
1634-
@media (min-width: 1201px) {
1635-
tr.commit-list {
1636-
width: 1127px;
1637-
}
1638-
}
1639-
1640-
.commit-list .commit-status-link {
1641-
display: inline-block;
1642-
vertical-align: middle;
1643-
}
1644-
16451592
.commit-body {
16461593
margin: 0.25em 0;
16471594
white-space: pre-wrap;
@@ -2050,10 +1997,6 @@ tbody.commit-list {
20501997
.commit-table {
20511998
overflow-x: auto;
20521999
}
2053-
.commit-table td.sha,
2054-
.commit-table th.sha {
2055-
display: none !important;
2056-
}
20572000
.comment-header {
20582001
flex-wrap: wrap;
20592002
}

0 commit comments

Comments
 (0)