Fix overflow in commit graph (#17947)

* Fix overflow in commit graph

Limit commit message to 50% width. This is rather crude but should work
for common use cases with not too-long author names.

Fixes: https://github.com/go-gitea/gitea/issues/17944

* Make it work with dynamic width

* use span

* use explicit none

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind 2021-12-11 06:12:18 -08:00 committed by GitHub
parent f550e356d6
commit 379a5241c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 5 deletions

View file

@ -28,27 +28,29 @@
{{- end -}} {{- end -}}
</a> </a>
</span> </span>
<span class="message df ac mr-2">{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span> <span class="message dib ellipsis mr-2">
<span>{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
</span>
<span class="tags df ac"> <span class="tags df ac">
{{range $commit.Refs}} {{range $commit.Refs}}
{{$refGroup := .RefGroup}} {{$refGroup := .RefGroup}}
{{if eq $refGroup "pull"}} {{if eq $refGroup "pull"}}
{{if or (not $.HidePRRefs) (containGeneric $.SelectedBranches .Name)}} {{if or (not $.HidePRRefs) (containGeneric $.SelectedBranches .Name)}}
<!-- it's intended to use issues not pulls, if it's a pull you will get redirected --> <!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}} {{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
</a> </a>
{{end}} {{end}}
{{else if eq $refGroup "tags"}} {{else if eq $refGroup "tags"}}
<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}"> <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
{{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}} {{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}}
</a> </a>
{{else if eq $refGroup "remotes"}} {{else if eq $refGroup "remotes"}}
<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
{{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}} {{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}}
</a> </a>
{{else if eq $refGroup "heads"}} {{else if eq $refGroup "heads"}}
<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
{{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}} {{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}}
</a> </a>
{{else}} {{else}}

View file

@ -137,6 +137,7 @@
.author .ui.avatar.image { .author .ui.avatar.image {
width: auto; width: auto;
height: 18px; height: 18px;
max-width: none;
} }
} }

View file

@ -28,6 +28,12 @@
word-wrap: break-word !important; word-wrap: break-word !important;
} }
.ellipsis {
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
.full-screen-width { width: 100vw !important; } .full-screen-width { width: 100vw !important; }
.full-screen-height { height: 100vh !important; } .full-screen-height { height: 100vh !important; }