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: https://github.com/go-gitea/gitea/issues/7180
This commit is contained in:
silverwind
2019-06-14 03:32:14 +02:00
committed by Lunny Xiao
parent 2f39fc7bb6
commit 9ce4d89e99
6 changed files with 36 additions and 18 deletions

View File

@ -1,15 +1,15 @@
{{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}}
{{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}}
{{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}}
{{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}}
{{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}}

View File

@ -47,9 +47,9 @@
<td class="author">
{{if .User}}
{{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}}
<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}}
{{else}}
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
@ -69,12 +69,14 @@
{{end}}
</a>
</td>
<td class="message collapsing">
<span class="has-emoji{{if gt .ParentCount 1}} grey text{{end}}">{{.Summary}}</span>
{{if IsMultilineCommitMessage .Message}}
<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 .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}}
<td class="message">
<span class="message-wrapper">
<span class="commit-summary has-emoji{{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{.Summary}}</span>
{{if IsMultilineCommitMessage .Message}}
<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 .Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}}
</span>
{{template "repo/commit_status" .Status}}
</td>
<td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>

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>
<tr class="commit-list">
<th colspan="2">
@ -27,12 +27,13 @@
</div>
{{end}}
</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}}
<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>
{{end}}
{{template "repo/commit_status" .LatestCommitStatus}}</span>
</span>
</th>
<th class="text grey right age">{{if .LatestCommit.Author}}{{TimeSince .LatestCommit.Author.When $.Lang}}{{end}}</th>
</tr>
@ -82,7 +83,7 @@
{{end}}
<td class="message has-emoji">
<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>
</td>
<td class="text grey right age">{{TimeSince $commit.Committer.When $.Lang}}</td>