Skip to content

Commit b4f8da5

Browse files
silverwindlunnytechknowlogick
authored
Search and Diff CSS enhancements (#14050)
* Search and Diff CSS enhancements - Use flexbox for language stats - Improve labels and code boxes on repo and code search - Use flexbox on diff header and improve suppressed diff text - Add dedicated color for diff expander * more diff tweaks, less vertical padding on header * more minor tweaks * always show fold icon, image diff improvments * remove margin Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
1 parent e0a84d7 commit b4f8da5

File tree

14 files changed

+129
-153
lines changed

14 files changed

+129
-153
lines changed

‎templates/explore/code.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<h3>
1717
{{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
1818
</h3>
19-
<div>
19+
<div class="df ac fw">
2020
{{range $term := .SearchResultLanguages}}
21-
<a class="ui text-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
22-
<i class="color-icon" style="background-color: {{$term.Color}}"></i>
21+
<a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}/explore/code?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
22+
<i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
2323
{{$term.Language}}
2424
<div class="detail">{{$term.Count}}</div>
2525
</a>
@@ -31,7 +31,7 @@
3131
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
3232
<h4 class="ui top attached normal header">
3333
<span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
34-
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
34+
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
3535
</h4>
3636
<div class="ui attached table segment">
3737
<div class="file-body file-code code-view">

‎templates/explore/repo_list.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@
3838
{{end}}
3939
</div>
4040
</div>
41-
<div class="metas">
41+
<div class="metas df ac">
4242
{{if .PrimaryLanguage }}
43-
<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
43+
<span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
4444
{{end}}
45-
<span class="text grey">{{svg "octicon-star"}} {{.NumStars}}</span>
46-
<span class="text grey">{{svg "octicon-git-branch"}} {{.NumForks}}</span>
45+
<span class="text grey df ac mr-3">{{svg "octicon-star" 16 "mr-3"}}{{.NumStars}}</span>
46+
<span class="text grey df ac mr-3">{{svg "octicon-git-branch" 16 "mr-3"}}{{.NumForks}}</span>
4747
</div>
4848
</div>
4949
<div class="description">

‎templates/repo/diff/box.tmpl

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@
3333
{{end}}
3434
</div>
3535
</div>
36-
<ol class="diff-detail-box diff-stats detail-files hide" id="diff-files">
36+
<ol class="diff-detail-box diff-stats m-0 hide" id="diff-files">
3737
{{range .Diff.Files}}
3838
<li>
39-
<div class="diff-counter pull-right">
39+
<div class="bold df ac pull-right">
4040
{{if not .IsBin}}
4141
{{template "repo/diff/stats" dict "file" . "root" $}}
4242
{{else}}
@@ -45,31 +45,36 @@
4545
</div>
4646
<!-- todo finish all file status, now modify, add, delete and rename -->
4747
<span class="status {{DiffTypeToStr .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
48-
<a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
48+
<a class="file mono" href="#diff-{{.Index}}">{{.Name}}</a>
4949
</li>
5050
{{end}}
5151
</ol>
5252
{{range $i, $file := .Diff.Files}}
5353
{{if $file.IsIncomplete}}
5454
<div class="diff-file-box diff-box file-content">
5555
<h4 class="ui top attached normal header rounded">
56-
<div class="diff-counter ui left">
56+
<a role="button" class="fold-file muted mr-2">
57+
{{svg "octicon-chevron-down" 18}}
58+
</a>
59+
<div class="bold ui left df ac">
5760
{{if not $file.IsRenamed}}
5861
{{template "repo/diff/stats" dict "file" . "root" $}}
5962
{{end}}
6063
</div>
61-
<span class="file">{{$file.Name}}</span>
62-
<div>{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
63-
{{if $file.IsProtected}}
64-
<span class="ui right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
65-
{{end}}
66-
{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
67-
{{if $file.IsDeleted}}
68-
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
69-
{{else}}
70-
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
64+
<span class="file mono">{{$file.Name}}</span>
65+
<div class="diff-file-header-actions df ac">
66+
<div class="text grey">{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
67+
{{if $file.IsProtected}}
68+
<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
7169
{{end}}
72-
{{end}}
70+
{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
71+
{{if $file.IsDeleted}}
72+
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
73+
{{else}}
74+
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
75+
{{end}}
76+
{{end}}
77+
</div>
7378
</h4>
7479
</div>
7580
{{else}}
@@ -82,21 +87,19 @@
8287
{{else}}
8388
{{$isImage = (call $.IsImageFileInHead $file.Name)}}
8489
{{end}}
85-
{{if or (not $file.IsBin) $isImage}}
86-
<a role="button" class="fold-file">
90+
<a role="button" class="fold-file muted mr-2">
8791
{{svg "octicon-chevron-down" 18}}
8892
</a>
89-
{{end}}
90-
<div class="diff-counter">
93+
<div class="bold df ac">
9194
{{if $file.IsBin}}
9295
{{$.i18n.Tr "repo.diff.bin"}}
9396
{{else if not $file.IsRenamed}}
9497
{{template "repo/diff/stats" dict "file" . "root" $}}
9598
{{end}}
9699
</div>
97-
<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
100+
<span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
98101
</div>
99-
<div class="df ac">
102+
<div class="diff-file-header-actions df ac">
100103
{{if $file.IsProtected}}
101104
<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
102105
{{end}}
@@ -111,8 +114,8 @@
111114
</h4>
112115
<div class="diff-file-body ui attached unstackable table segment">
113116
{{if ne $file.Type 4}}
114-
<div class="file-body file-code has-context-menu code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
115-
<table class="chroma">
117+
<div class="file-body file-code has-context-menu{{if not $isImage}} code-diff{{end}}{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $isImage}} py-4{{end}}">
118+
<table class="chroma{{if $isImage}} w-100{{end}}">
116119
<tbody>
117120
{{if $isImage}}
118121
{{template "repo/diff/image_diff" dict "file" . "root" $}}
@@ -130,7 +133,6 @@
130133
</div>
131134
</div>
132135
{{end}}
133-
<br>
134136
{{end}}
135137

136138
{{if .Diff.IsIncomplete}}

‎templates/repo/diff/image_diff.tmpl

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22
{{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name) }}
33

44
<tr>
5-
<th class="halfwidth center">
5+
<th class="halfwidth center pl-3 pr-2">
66
{{.root.i18n.Tr "repo.diff.file_before"}}
77
</th>
8-
<th class="halfwidth center">
8+
<th class="halfwidth center pl-2 pr-3">
99
{{.root.i18n.Tr "repo.diff.file_after"}}
1010
</th>
1111
</tr>
1212
<tr>
13-
<td class="halfwidth center">
13+
<td class="halfwidth center pl-3 pr-2">
1414
{{if or .file.IsDeleted (not .file.IsCreated)}}
1515
<a href="{{$imagePathOld}}" target="_blank">
1616
<img src="{{$imagePathOld}}" class="border red" />
1717
</a>
1818
{{end}}
1919
</td>
20-
<td class="halfwidth center">
20+
<td class="halfwidth center pl-2 pr-3">
2121
{{if or .file.IsCreated (not .file.IsDeleted)}}
2222
<a href="{{$imagePathNew}}" target="_blank">
2323
<img src="{{$imagePathNew}}" class="border green" />
@@ -29,7 +29,7 @@
2929
{{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
3030
{{if or $imageInfoBase $imageInfoHead }}
3131
<tr>
32-
<td class="halfwidth center">
32+
<td class="halfwidth center pl-3 pr-2">
3333
{{if $imageInfoBase }}
3434
{{ $classWidth := "" }}
3535
{{ $classHeight := "" }}
@@ -52,7 +52,7 @@
5252
{{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
5353
{{end}}
5454
</td>
55-
<td class="halfwidth center">
55+
<td class="halfwidth center pl-2 pr-3">
5656
{{if $imageInfoHead }}
5757
{{ $classWidth := "" }}
5858
{{ $classHeight := "" }}

‎templates/repo/diff/stats.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{{Add .file.Addition .file.Deletion}}
2-
<span class="diff-stats-bar poping up ml-2" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
2+
<span class="diff-stats-bar poping up mx-3" data-content="{{.root.i18n.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
33
<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
44
</span>

‎templates/repo/search.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
<h3>
1717
{{.i18n.Tr "repo.search.results" (.Keyword|Escape) .RepoLink .RepoName | Str2html }}
1818
</h3>
19-
<div>
19+
<div class="df ac fw">
2020
{{range $term := .SearchResultLanguages}}
21-
<a class="ui text-label {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
22-
<i class="color-icon" style="background-color: {{$term.Color}}"></i>
21+
<a class="ui text-label df ac mr-1 my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{EscapePound $.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}">
22+
<i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
2323
{{$term.Language}}
2424
<div class="detail">{{$term.Count}}</div>
2525
</a>
@@ -30,7 +30,7 @@
3030
<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
3131
<h4 class="ui top attached normal header">
3232
<span class="file">{{.Filename}}</span>
33-
<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
33+
<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
3434
</h4>
3535
<div class="ui attached table segment">
3636
<div class="file-body file-code code-view">

‎templates/repo/sub_menu.tmpl

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@
2323
<div class="ui segment sub-menu language-stats-details" style="display: none">
2424
<div class="ui horizontal center link list">
2525
{{range .LanguageStats}}
26-
<div class="item">
27-
<i class="color-icon" style="background-color: {{ .Color }}"></i>
28-
<span class="ui"><b>
29-
{{if eq .Language "other" }}
30-
{{ $.i18n.Tr "repo.language_other" }}
31-
{{else}}
32-
{{ .Language }}
33-
{{end}}
34-
</b> {{ .Percentage }}%</span>
26+
<div class="item df ac jc">
27+
<i class="color-icon mr-3" style="background-color: {{ .Color }}"></i>
28+
<span class="bold mr-3">
29+
{{if eq .Language "other" }}
30+
{{ $.i18n.Tr "repo.language_other" }}
31+
{{else}}
32+
{{ .Language }}
33+
{{end}}
34+
</span>
35+
{{ .Percentage }}%
3536
</div>
3637
{{end}}
3738
</div>

‎templates/shared/searchbottom.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="ui bottom attached table segment df ac sb">
2-
<div class="ml-3">
2+
<div class="df ac ml-4">
33
{{if .result.Language}}
4-
<i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
4+
<i class="color-icon mr-3" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
55
{{end}}
66
</div>
7-
<div class="mr-3">
7+
<div class="mr-4">
88
{{if not .result.UpdatedUnix.IsZero}}
99
<span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span>
1010
{{end}}

0 commit comments

Comments
 (0)