Improve commit graph alignment and truncating (#26112)

Fix #26101

![image](https://github.com/go-gitea/gitea/assets/2114189/7507d201-822e-4534-8b20-e659d56b1268)
This commit is contained in:
wxiaoguang 2023-07-25 18:17:41 +08:00 committed by GitHub
parent d817b199ca
commit ad5ce59800
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 10 deletions

View file

@ -31,27 +31,27 @@
<span class="message gt-dib gt-ellipsis gt-mr-3"> <span class="message gt-dib gt-ellipsis gt-mr-3">
<span>{{RenderCommitMessage $.Context $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span> <span>{{RenderCommitMessage $.Context $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
</span> </span>
<span class="tags gt-df gt-ac gt-mr-2"> <span class="commit-refs gt-df gt-ac gt-mr-2">
{{range $commit.Refs}} {{range $commit.Refs}}
{{$refGroup := .RefGroup}} {{$refGroup := .RefGroup}}
{{if eq $refGroup "pull"}} {{if eq $refGroup "pull"}}
{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}} {{if or (not $.HidePRRefs) (SliceUtils.Contains $.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 gt-mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> <a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}#{{.ShortName}} {{svg "octicon-git-pull-request"}} #{{.ShortName}}
</a> </a>
{{end}} {{end}}
{{else if eq $refGroup "tags"}} {{else if eq $refGroup "tags"}}
<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}"> <a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
{{svg "octicon-tag" 16 "gt-mr-2"}}{{.ShortName}} {{svg "octicon-tag"}} {{.ShortName}}
</a> </a>
{{else if eq $refGroup "remotes"}} {{else if eq $refGroup "remotes"}}
<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> <a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
{{svg "octicon-cross-reference" 16 "gt-mr-2"}}{{.ShortName}} {{svg "octicon-cross-reference"}} {{.ShortName}}
</a> </a>
{{else if eq $refGroup "heads"}} {{else if eq $refGroup "heads"}}
<a class="ui labelled icon button basic tiny gt-mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> <a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
{{svg "octicon-git-branch" 16 "gt-mr-2"}}{{.ShortName}} {{svg "octicon-git-branch"}} {{.ShortName}}
</a> </a>
{{else}} {{else}}
<!-- Unknown ref type .Name --> <!-- Unknown ref type .Name -->

View file

@ -109,8 +109,13 @@
background-color: var(--color-secondary-alpha-30); background-color: var(--color-secondary-alpha-30);
} }
#git-graph-container #rev-list .tags a.button { #git-graph-container #rev-list .commit-refs .button {
padding: 2px 4px; padding: 2px 4px;
margin-right: 0.25em;
display: inline-block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
} }
#git-graph-container #rev-list .sha.label { #git-graph-container #rev-list .sha.label {