loading up the forgejo repo on tangled to test page performance
Size/gap changes and cleanup in commit graph (#4214)
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>
+15
-24
+11
-11
templates/repo/graph.tmpl
+11
-11
templates/repo/graph.tmpl
···
5
5
<div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}">
6
6
<h2 class="ui header dividing">
7
7
{{ctx.Locale.Tr "repo.commit_graph"}}
8
-
<div class="ui icon buttons tiny color-buttons">
8
+
<div class="ui icon buttons small color-buttons">
9
9
<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
10
10
<input type="hidden" name="flow">
11
11
<div class="default text">{{ctx.Locale.Tr "repo.commit_graph.select"}}</div>
12
12
<div class="menu">
13
13
<div class="item" data-value="...flow-hide-pr-refs">
14
-
<span class="truncate">
15
-
{{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>
14
+
<span class="flex-text-block">
15
+
{{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>
16
16
</span>
17
17
</div>
18
18
{{range .AllRefs}}
19
19
{{$refGroup := .RefGroup}}
20
20
{{if eq $refGroup "pull"}}
21
21
<div class="item" data-value="{{.Name}}">
22
-
<span class="truncate">
23
-
{{svg "octicon-git-pull-request" 16 "tw-mr-1"}}<span title="{{.ShortName}}">#{{.ShortName}}</span>
22
+
<span class="flex-text-block">
23
+
{{svg "octicon-git-pull-request" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">#{{.ShortName}}</span>
24
24
</span>
25
25
</div>
26
26
{{else if eq $refGroup "tags"}}
27
27
<div class="item" data-value="{{.Name}}">
28
-
<span class="truncate">
29
-
{{svg "octicon-tag" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
28
+
<span class="flex-text-block">
29
+
{{svg "octicon-tag" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span>
30
30
</span>
31
31
</div>
32
32
{{else if eq $refGroup "remotes"}}
33
33
<div class="item" data-value="{{.Name}}">
34
-
<span class="truncate">
35
-
{{svg "octicon-cross-reference" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
34
+
<span class="flex-text-block">
35
+
{{svg "octicon-cross-reference" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span>
36
36
</span>
37
37
</div>
38
38
{{else if eq $refGroup "heads"}}
39
39
<div class="item" data-value="{{.Name}}">
40
-
<span class="truncate">
41
-
{{svg "octicon-git-branch" 16 "tw-mr-1"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
40
+
<span class="flex-text-block">
41
+
{{svg "octicon-git-branch" 16 "tw-mr-1"}}<span class="gt-ellipsis" title="{{.ShortName}}">{{.ShortName}}</span>
42
42
</span>
43
43
</div>
44
44
{{end}}
+4
-4
templates/repo/graph/commits.tmpl
+4
-4
templates/repo/graph/commits.tmpl
···
37
37
{{if eq $refGroup "pull"}}
38
38
{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}}
39
39
<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
40
-
<a class="ui basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
40
+
<a class="ui basic button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.Context $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
41
41
{{svg "octicon-git-pull-request"}} #{{.ShortName}}
42
42
</a>
43
43
{{end}}
44
44
{{else if eq $refGroup "tags"}}
45
-
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
45
+
<a class="ui basic button" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
46
46
{{svg "octicon-tag"}} {{.ShortName}}
47
47
</a>
48
48
{{else if eq $refGroup "remotes"}}
49
-
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
49
+
<a class="ui basic button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
50
50
{{svg "octicon-cross-reference"}} {{.ShortName}}
51
51
</a>
52
52
{{else if eq $refGroup "heads"}}
53
-
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
53
+
<a class="ui basic button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
54
54
{{svg "octicon-git-branch"}} {{.ShortName}}
55
55
</a>
56
56
{{else}}
-9
web_src/css/features/gitgraph.css
-9
web_src/css/features/gitgraph.css
···
27
27
align-items: center;
28
28
}
29
29
30
-
#git-graph-container #flow-select-refs-dropdown .ui.label .truncate {
31
-
display: inline-block;
32
-
max-width: 140px;
33
-
overflow: hidden;
34
-
text-overflow: ellipsis;
35
-
vertical-align: top;
36
-
white-space: nowrap;
37
-
}
38
-
39
30
#git-graph-container #flow-select-refs-dropdown .default.text {
40
31
padding-top: 4px;
41
32
padding-bottom: 4px;