forks/forgejo
1
0
Fork 0
Code Releases Activity

Truncate long commit message header (#10301)

Browse source 
* Truncate long commit message header

* Fix overflow in view commit table

* Use @media less

* Further improvements

* Fix the commit message on small screens

* adjust width of minimal table
This commit is contained in:
zeripath 2020-02-17 17:45:55 +00:00 committed by GitHub
parent b5f28d154d
commit 314740e215
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/commit_page.tmpl
View file

@ -6,7 +6,7 @@
<a class="ui floated right blue tiny button" href="{{EscapePound .SourcePath}}"> <a class="ui floated right blue tiny button" href="{{EscapePound .SourcePath}}">
{{.i18n.Tr "repo.diff.browse_source"}} {{.i18n.Tr "repo.diff.browse_source"}}
</a> </a>
<h3 class="has-emoji">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}{{template "repo/commit_status" .CommitStatus}}</h3> <h3 class="has-emoji"><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_status" .CommitStatus}}</h3>
{{if IsMultilineCommitMessage .Commit.Message}} {{if IsMultilineCommitMessage .Commit.Message}}
<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre> <pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}} {{end}}

2
templates/repo/view_list.tmpl
View file

@ -29,7 +29,7 @@
</a> </a>
{{template "repo/commit_status" .LatestCommitStatus}} {{template "repo/commit_status" .LatestCommitStatus}}
{{ $commitLink:= printf "%s/commit/%s" .RepoLink .LatestCommit.ID }} {{ $commitLink:= printf "%s/commit/%s" .RepoLink .LatestCommit.ID }}
<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}} <span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
{{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>

39
web_src/less/_repository.less
View file

@ -2383,7 +2383,7 @@ tbody.commit-list {
vertical-align: baseline; vertical-align: baseline;
} }
.commit-list .message-wrapper { .message-wrapper {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: calc(100% - 50px); max-width: calc(100% - 50px);
@ -2391,6 +2391,43 @@ tbody.commit-list {
vertical-align: middle; vertical-align: middle;
} }
@media only screen and (max-width: 767.98px) {
tr.commit-list {
width: 100%;
}
th .message-wrapper {
display: block;
max-width: calc(100vw - 70px);
}
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
tr.commit-list {
width: 723px;
}
th .message-wrapper {
max-width: 280px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
tr.commit-list {
width: 933px;
}
th .message-wrapper {
max-width: 490px;
}
}
@media only screen and (min-width: 1200px) {
tr.commit-list {
width: 1127px;
}
th .message-wrapper {
max-width: 680px;
}
}
.commit-list .commit-summary a { .commit-list .commit-summary a {
text-decoration: underline; text-decoration: underline;
text-decoration-style: dashed; text-decoration-style: dashed;