mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-08-28 13:31:30 +02:00
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:
parent
2f39fc7bb6
commit
9ce4d89e99
6 changed files with 36 additions and 18 deletions
2
Makefile
2
Makefile
|
@ -395,7 +395,7 @@ css:
|
|||
npx postcss --use autoprefixer --no-map --replace 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 "$${diff}"; \
|
||||
exit 1; \
|
||||
|
|
|
@ -803,6 +803,8 @@ footer .ui.left,footer .ui.right{line-height:40px}
|
|||
.stats-table .table-cell{display:table-cell}
|
||||
.stats-table .table-cell.tiny{height:.5em}
|
||||
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}
|
||||
.git-notes.top{text-align:left}
|
||||
.git-notes .commit-body{margin:0}
|
||||
|
|
|
@ -2219,6 +2219,19 @@ 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;
|
||||
}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -47,9 +47,9 @@
|
|||
<td class="author">
|
||||
{{if .User}}
|
||||
{{if .User.FullName}}
|
||||
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/> <a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
|
||||
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/> <a href="{{AppSubUrl}}/{{.User.Name}}">{{.User.FullName}}</a>
|
||||
{{else}}
|
||||
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/> <a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
|
||||
<img class="ui avatar image" src="{{.User.RelAvatarLink}}" alt=""/> <a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/> {{.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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue