third_party
/
gitea
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: Fix overflow issues in repo (#7190)

Browse Source 
- 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: https://github.com/go-gitea/gitea/issues/7180
tokarchuk/v1.17
silverwind 6 years ago committed by Lunny Xiao
parent 2f39fc7bb6
commit 9ce4d89e99
6 changed files with 36 additions and 18 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      Makefile
  2. 2
      public/css/index.css
  3. 13
      public/less/_repository.less
  4. 10
      templates/repo/commit_status.tmpl
  5. 18
      templates/repo/commits_table.tmpl
  6. 9
      templates/repo/view_list.tmpl

2
Makefile
Unescape View File

@ -395,7 +395,7 @@ css:
npx postcss --use autoprefixer --no-map --replace public/css/* npx postcss --use autoprefixer --no-map --replace public/css/*
@diff=$$(git diff public/css/*); \ @diff=$$(git diff public/css/*); \
if ([ ! -z "$CI" ] && [ -n "$$diff" ]); then \ if ([ -n "$$CI" ] && [ -n "$$diff" ]); then \
echo "Generated files in public/css have changed, please commit the result:"; \ echo "Generated files in public/css have changed, please commit the result:"; \
echo "$${diff}"; \ echo "$${diff}"; \
exit 1; \ exit 1; \

2
public/css/index.css
Unescape View File

@ -803,6 +803,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
.stats-table .table-cell{display:table-cell} .stats-table .table-cell{display:table-cell}
.stats-table .table-cell.tiny{height:.5em} .stats-table .table-cell.tiny{height:.5em}
tbody.commit-list{vertical-align:baseline} tbody.commit-list{vertical-align:baseline}
.commit-list .message-wrapper{overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 24px);display:inline-block;vertical-align:middle}
.commit-list .message-wrapper .commit-status-link{display:inline-block;vertical-align:middle}
.commit-body{white-space:pre-wrap} .commit-body{white-space:pre-wrap}
.git-notes.top{text-align:left} .git-notes.top{text-align:left}
.git-notes .commit-body{margin:0} .git-notes .commit-body{margin:0}

13
public/less/_repository.less
Unescape View File

@ -2219,6 +2219,19 @@ tbody.commit-list {
vertical-align: baseline; vertical-align: baseline;
} }
.commit-list .message-wrapper {
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 24px);
display: inline-block;
vertical-align: middle;
}
.commit-list .message-wrapper .commit-status-link {
display: inline-block;
vertical-align: middle;
}
.commit-body { .commit-body {
white-space: pre-wrap; white-space: pre-wrap;
} }

10
templates/repo/commit_status.tmpl
Unescape View File

@ -1,15 +1,15 @@
{{if eq .State "pending"}} {{if eq .State "pending"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a> <a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
{{end}} {{end}}
{{if eq .State "success"}} {{if eq .State "success"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a> <a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
{{end}} {{end}}
{{if eq .State "error"}} {{if eq .State "error"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a> <a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
{{end}} {{end}}
{{if eq .State "failure"}} {{if eq .State "failure"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a> <a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
{{end}} {{end}}
{{if eq .State "warning"}} {{if eq .State "warning"}}
<a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a> <a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
{{end}} {{end}}

18
templates/repo/commits_table.tmpl
Unescape View File

@ -47,9 +47,9 @@
<td class="author"> <td class="author">
{{if .User}} {{if .User}}
{{if .User.FullName}} {{if .User.FullName}}
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a> <img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
{{else}} {{else}}
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a> <img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
{{end}} {{end}}
{{else}} {{else}}
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}} <img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
@ -69,12 +69,14 @@
{{end}} {{end}}
</a> </a>
</td> </td>
<td class="message collapsing"> <td class="message">
<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{.Summary}}</span> <span class="message-wrapper">
{{if IsMultilineCommitMessage .Message}} <span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button> {{if IsMultilineCommitMessage .Message}}
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre> <button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
{{end}} <pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}}
</span>
{{template "repo/commit_status" .Status}} {{template "repo/commit_status" .Status}}
</td> </td>
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td> <td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>

9
templates/repo/view_list.tmpl
Unescape View File

@ -1,4 +1,4 @@
<table id="repo-files-table" class="ui single line table"> <table id="repo-files-table" class="ui single line table fixed">
<thead> <thead>
<tr class="commit-list"> <tr class="commit-list">
<th colspan="2"> <th colspan="2">
@ -27,12 +27,13 @@
</div> </div>
{{end}} {{end}}
</a> </a>
<span class="grey has-emoji">{{.LatestCommit.Summary}} {{template "repo/commit_status" .LatestCommitStatus}}
<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}">{{.LatestCommit.Summary}}
{{if IsMultilineCommitMessage .LatestCommit.Message}} {{if IsMultilineCommitMessage .LatestCommit.Message}}
<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button> <button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre> <pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}} {{end}}
{{template "repo/commit_status" .LatestCommitStatus}}</span> </span>
</th> </th>
<th class="text grey right age">{{if .LatestCommit.Author}}{{TimeSince .LatestCommit.Author.When $.Lang}}{{end}}</th> <th class="text grey right age">{{if .LatestCommit.Author}}{{TimeSince .LatestCommit.Author.When $.Lang}}{{end}}</th>
</tr> </tr>
@ -82,7 +83,7 @@
{{end}} {{end}}
<td class="message has-emoji"> <td class="message has-emoji">
<span class="truncate"> <span class="truncate">
<a href="{{$.RepoLink}}/commit/{{$commit.ID}}">{{$commit.Summary}}</a> <a href="{{$.RepoLink}}/commit/{{$commit.ID}}" title="{{$commit.Summary}}">{{$commit.Summary}}</a>
</span> </span>
</td> </td>
<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td> <td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>

Write Preview
Loading…
Cancel
Save