Skip to content

Commit 9ce4d89

Browse files
silverwindlunny
silverwind
authored and
lunny
committed
UI: Fix overflow issues in repo (#7190)
- Fix layout overflow in repo file list. - Fix invisible status icon in file view and commit list. In file view, the icon was moved to the left because I could not figure out a proper fix because of HTML tables. - Added title attribute to commit messages. - Fixed two CSS linter warnings in existing CSS. - Fixed CI variable check in 'make css'. Fixes: #7180
1 parent 2f39fc7 commit 9ce4d89

File tree

6 files changed

+36
-18
lines changed

6 files changed

+36
-18
lines changed

‎Makefile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -395,7 +395,7 @@ css:
395395
npx postcss --use autoprefixer --no-map --replace public/css/*
396396

397397
@diff=$$(git diff public/css/*); \
398-
if ([ ! -z "$CI" ] && [ -n "$$diff" ]); then \
398+
if ([ -n "$$CI" ] && [ -n "$$diff" ]); then \
399399
echo "Generated files in public/css have changed, please commit the result:"; \
400400
echo "$${diff}"; \
401401
exit 1; \

‎public/css/index.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -803,6 +803,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
803803
.stats-table .table-cell{display:table-cell}
804804
.stats-table .table-cell.tiny{height:.5em}
805805
tbody.commit-list{vertical-align:baseline}
806+
.commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);display:inline-block;vertical-align:middle}
807+
.commit-list .message-wrapper .commit-status-link{display:inline-block;vertical-align:middle}
806808
.commit-body{white-space:pre-wrap}
807809
.git-notes.top{text-align:left}
808810
.git-notes .commit-body{margin:0}

‎public/less/_repository.less‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2219,6 +2219,19 @@ tbody.commit-list {
22192219
vertical-align: baseline;
22202220
}
22212221

2222+
.commit-list .message-wrapper {
2223+
overflow: hidden;
2224+
text-overflow: ellipsis;
2225+
max-width: calc(100% - 24px);
2226+
display: inline-block;
2227+
vertical-align: middle;
2228+
}
2229+
2230+
.commit-list .message-wrapper .commit-status-link {
2231+
display: inline-block;
2232+
vertical-align: middle;
2233+
}
2234+
22222235
.commit-body {
22232236
white-space: pre-wrap;
22242237
}

‎templates/repo/commit_status.tmpl‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
{{if eq .State "pending"}}
2-
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
2+
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
33
{{end}}
44
{{if eq .State "success"}}
5-
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
5+
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
66
{{end}}
77
{{if eq .State "error"}}
8-
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
8+
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
99
{{end}}
1010
{{if eq .State "failure"}}
11-
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
11+
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
1212
{{end}}
1313
{{if eq .State "warning"}}
14-
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
14+
<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
1515
{{end}}

‎templates/repo/commits_table.tmpl‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@
4747
<td class="author">
4848
{{if .User}}
4949
{{if .User.FullName}}
50-
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
50+
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
5151
{{else}}
52-
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
52+
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
5353
{{end}}
5454
{{else}}
5555
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
@@ -69,12 +69,14 @@
6969
{{end}}
7070
</a>
7171
</td>
72-
<td class="message collapsing">
73-
<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{.Summary}}</span>
74-
{{if IsMultilineCommitMessage .Message}}
75-
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
76-
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
77-
{{end}}
72+
<td class="message">
73+
<span class="message-wrapper">
74+
<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
75+
{{if IsMultilineCommitMessage .Message}}
76+
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
77+
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
78+
{{end}}
79+
</span>
7880
{{template "repo/commit_status" .Status}}
7981
</td>
8082
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>

‎templates/repo/view_list.tmpl‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<table id="repo-files-table" class="ui single line table">
1+
<table id="repo-files-table" class="ui single line table fixed">
22
<thead>
33
<tr class="commit-list">
44
<th colspan="2">
@@ -27,12 +27,13 @@
2727
</div>
2828
{{end}}
2929
</a>
30-
<span class="grey has-emoji">{{.LatestCommit.Summary}}
30+
{{template "repo/commit_status" .LatestCommitStatus}}
31+
<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}">{{.LatestCommit.Summary}}
3132
{{if IsMultilineCommitMessage .LatestCommit.Message}}
3233
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
3334
<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
3435
{{end}}
35-
{{template "repo/commit_status" .LatestCommitStatus}}</span>
36+
</span>
3637
</th>
3738
<th class="text grey right age">{{if .LatestCommit.Author}}{{TimeSince .LatestCommit.Author.When $.Lang}}{{end}}</th>
3839
</tr>
@@ -82,7 +83,7 @@
8283
{{end}}
8384
<td class="message has-emoji">
8485
<span class="truncate">
85-
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}">{{$commit.Summary}}</a>
86+
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary}}</a>
8687
</span>
8788
</td>
8889
<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>

0 commit comments

Comments
 (0)