magic_rb/forgejo
Template
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo synced 2024-11-29 05:06:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Size/gap changes and cleanup in commit graph (#4214)

Browse source 
Changes:
* increased font size of tag/branch labels from tiny to normal, so they're readable, it doesn't impact layout
* increased font size of branch selector from tiny to small, so it's readable and usable. Branch selector on main repo tab has the same size
* increased gap between the icon and the text in the selector, it is too small currently
* removed obsolete CSS rule, it wasn't fully utilized in the first place, it is no longer needed with the other changes

Preview:
Before: https://codeberg.org/attachments/e6eccdde-59fe-446c-99ed-d8a2f1dce9bd
First: https://codeberg.org/attachments/6d710118-18cb-4258-9d9a-79dfca377294
Last: https://codeberg.org/attachments/fc9517aa-d498-43cc-a186-a184e4c6fe8c

Before: https://codeberg.org/attachments/057f971b-2c3b-4500-923f-49f4e545daf6
First: https://codeberg.org/attachments/de4683ad-95da-48d5-b2ac-b9567fed6fcd
Last: https://codeberg.org/attachments/2abb0333-dea1-4123-b3ee-9cb54dca98cd

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4214
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
This commit is contained in:
0ko 2024-06-24 18:59:57 +00:00
parent a3491f064f
commit c82547bf30
3 changed files with 15 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
templates/repo/graph.tmpl
View file

@ -5,40 +5,40 @@
<div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}"> <div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}">
<h2 class="ui header dividing"> <h2 class="ui header dividing">
{{ctx.Locale.Tr "repo.commit_graph"}} {{ctx.Locale.Tr "repo.commit_graph"}}
<div class="ui icon buttons tiny color-buttons"> <div class="ui icon buttons small color-buttons">
<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown"> <div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
<input type="hidden" name="flow"> <input type="hidden" name="flow">
<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div> <div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
<div class="menu"> <div class="menu">
<div class="item" data-value="...flow-hide-pr-refs"> <div class="item" data-value="...flow-hide-pr-refs">
<span class="truncate"> <span class="flex-text-block">
{{svg "octicon-eye-closed" 16 "tw-mr-1"}}<span title="{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}</span> {{svg "octicon-eye-closed" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}">{{ctx.Locale.Tr "repo.commit_graph.hide_pr_refs"}}</span>
</span> </span>
</div> </div>
{{range .AllRefs}} {{range .AllRefs}}
{{$refGroup := .RefGroup}} {{$refGroup := .RefGroup}}
{{if eq $refGroup "pull"}} {{if eq $refGroup "pull"}}
<div class="item" data-value="{{.Name}}"> <div class="item" data-value="{{.Name}}">
<span class="truncate"> <span class="flex-text-block">
{{svg "octicon-git-pull-request" 16 "tw-mr-1"}}<span title="{{.ShortName}}">#{{.ShortName}}</span> {{svg "octicon-git-pull-request" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">#{{.ShortName}}</span>
</span> </span>
</div> </div>
{{else if eq $refGroup "tags"}} {{else if eq $refGroup "tags"}}
<div class="item" data-value="{{.Name}}"> <div class="item" data-value="{{.Name}}">
<span class="truncate"> <span class="flex-text-block">
{{svg "octicon-tag" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span> {{svg "octicon-tag" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span>
</span> </span>
</div> </div>
{{else if eq $refGroup "remotes"}} {{else if eq $refGroup "remotes"}}
<div class="item" data-value="{{.Name}}"> <div class="item" data-value="{{.Name}}">
<span class="truncate"> <span class="flex-text-block">
{{svg "octicon-cross-reference" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span> {{svg "octicon-cross-reference" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span>
</span> </span>
</div> </div>
{{else if eq $refGroup "heads"}} {{else if eq $refGroup "heads"}}
<div class="item" data-value="{{.Name}}"> <div class="item" data-value="{{.Name}}">
<span class="truncate"> <span class="flex-text-block">
{{svg "octicon-git-branch" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span> {{svg "octicon-git-branch" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span>
</span> </span>
</div> </div>
{{end}} {{end}}

8
templates/repo/graph/commits.tmpl
View file

@ -37,20 +37,20 @@
{{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 basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> <a class="ui basic button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
{{svg "octicon-git-pull-request"}} #{{.ShortName}} {{svg "octicon-git-pull-request"}} #{{.ShortName}}
</a> </a>
{{end}} {{end}}
{{else if eq $refGroup "tags"}} {{else if eq $refGroup "tags"}}
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}"> <a class="ui basic button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
{{svg "octicon-tag"}} {{.ShortName}} {{svg "octicon-tag"}} {{.ShortName}}
</a> </a>
{{else if eq $refGroup "remotes"}} {{else if eq $refGroup "remotes"}}
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> <a class="ui basic button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
{{svg "octicon-cross-reference"}} {{.ShortName}} {{svg "octicon-cross-reference"}} {{.ShortName}}
</a> </a>
{{else if eq $refGroup "heads"}} {{else if eq $refGroup "heads"}}
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> <a class="ui basic button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
{{svg "octicon-git-branch"}} {{.ShortName}} {{svg "octicon-git-branch"}} {{.ShortName}}
</a> </a>
{{else}} {{else}}

9
web_src/css/features/gitgraph.css
View file

@ -27,15 +27,6 @@
align-items: center; align-items: center;
} }
#git-graph-container #flow-select-refs-dropdown .ui.label .truncate {
display: inline-block;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
}
#git-graph-container #flow-select-refs-dropdown .default.text { #git-graph-container #flow-select-refs-dropdown .default.text {
padding-top: 4px; padding-top: 4px;
padding-bottom: 4px; padding-bottom: 4px;