thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Cleanup commit graph CSS (#4065)

Browse source 
Very little visual changes:
* class `labelled` is not used in CSS, removed from elements
* `margin-right: 0;` in `#git-graph-container .color-buttons` wasn't doing anything
* `width: 100%;` in `#git-graph-container #rev-container` and `#git-graph-container #rev-list` wasn't doing anything
(Checked on both desktop and mobile screens.)
* the now unused class `color-buttons` is left for now because it might come useful later. The button coloring is broken here and I would like to touch it separately
* removed `font-size: 80%;` from dates to ensure proper readability, it wasn't saving much space but was inconvenient to look at because other dates in the UI are normal sized
* the small size of branch labels are left as is for now because removing `small` breaks alignment, and this is a cleanup PR

So, the only visual change is date sizes, other than that there's just styling code removed.

https://codeberg.org/attachments/d02f2771-8517-4b8b-9ac7-76b020f7b14e

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4065
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
0ko 2024-06-11 19:06:56 +00:00
parent c320f16a0b
commit 377165a38f
3 changed files with 6 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/repo/graph.tmpl
View file

@ -45,8 +45,8 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button> <button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button> <button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
</div> </div>
</h2> </h2>
<div class="ui dividing"></div> <div class="ui dividing"></div>

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 labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> <a class="ui basic tiny 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 labelled basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}"> <a class="ui basic tiny 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 labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> <a class="ui basic tiny 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 labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> <a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
{{svg "octicon-git-branch"}} {{.ShortName}} {{svg "octicon-git-branch"}} {{.ShortName}}
</a> </a>
{{else}} {{else}}

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

@ -10,10 +10,6 @@
align-items: center; align-items: center;
} }
#git-graph-container .color-buttons {
margin-right: 0;
}
#git-graph-container .ui.header.dividing { #git-graph-container .ui.header.dividing {
padding-bottom: 10px; padding-bottom: 10px;
} }
@ -69,7 +65,6 @@
#git-graph-container li .time { #git-graph-container li .time {
color: var(--color-text-light-3); color: var(--color-text-light-3);
font-size: 80%;
} }
#git-graph-container li a:not(.ui):hover { #git-graph-container li a:not(.ui):hover {
@ -89,14 +84,9 @@
float: left; float: left;
} }
#git-graph-container #rev-container {
width: 100%;
}
#git-graph-container #rev-list { #git-graph-container #rev-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
} }
#git-graph-container #rev-list li.highlight.hover { #git-graph-container #rev-list li.highlight.hover {