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>

8 files changed, 58 insertions, 55 deletions

diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl
index 0495645576..1c41dd843f 100644
--- a/templates/explore/code.tmpl
+++ b/templates/explore/code.tmpl
@@ -16,10 +16,10 @@
                 <h3>
                     {{.i18n.Tr "explore.code_search_results" (.Keyword|Escape) | Str2html }}
                 </h3>
-				<div>
+				<div class="df ac fw">
 					{{range $term := .SearchResultLanguages}}
-					<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}}">
-						<i class="color-icon" style="background-color: {{$term.Color}}"></i>
+					<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}}">
+						<i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
 						{{$term.Language}}
 						<div class="detail">{{$term.Count}}</div>
 					</a>
@@ -31,7 +31,7 @@
                         <div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
                             <h4 class="ui top attached normal header">
                                 <span class="file"><a rel="nofollow" href="{{EscapePound $repo.HTMLURL}}">{{$repo.FullName}}</a> - {{.Filename}}</span>
-                                <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>
+                                <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>
                             </h4>
                             <div class="ui attached table segment">
                                 <div class="file-body file-code code-view">
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index bfec17ff29..91dc3d8bf4 100644
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -38,12 +38,12 @@
 						{{end}}
 					</div>
 				</div>
-				<div class="metas">
+				<div class="metas df ac">
 					{{if .PrimaryLanguage }}
-					<span class="text grey"><i class="color-icon" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
+					<span class="text grey df ac mr-3"><i class="color-icon mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{ .PrimaryLanguage.Language }}</span>
 					{{end}}
-					<span class="text grey">{{svg "octicon-star"}} {{.NumStars}}</span>
-					<span class="text grey">{{svg "octicon-git-branch"}} {{.NumForks}}</span>
+					<span class="text grey df ac mr-3">{{svg "octicon-star" 16 "mr-3"}}{{.NumStars}}</span>
+					<span class="text grey df ac mr-3">{{svg "octicon-git-branch" 16 "mr-3"}}{{.NumForks}}</span>
 				</div>
 			</div>
 			<div class="description">
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 40e9d277b3..ef152fa58b 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -33,10 +33,10 @@
 				{{end}}
 			</div>
 		</div>
-		<ol class="diff-detail-box diff-stats detail-files hide" id="diff-files">
+		<ol class="diff-detail-box diff-stats m-0 hide" id="diff-files">
 			{{range .Diff.Files}}
 				<li>
-					<div class="diff-counter pull-right">
+					<div class="bold df ac pull-right">
 						{{if not .IsBin}}
 							{{template "repo/diff/stats" dict "file" . "root" $}}
 						{{else}}
@@ -45,7 +45,7 @@
 					</div>
 					<!-- todo finish all file status, now modify, add, delete and rename -->
 					<span class="status {{DiffTypeToStr .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
-					<a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
+					<a class="file mono" href="#diff-{{.Index}}">{{.Name}}</a>
 				</li>
 			{{end}}
 		</ol>
@@ -53,23 +53,28 @@
 			{{if $file.IsIncomplete}}
 				<div class="diff-file-box diff-box file-content">
 					<h4 class="ui top attached normal header rounded">
-						<div class="diff-counter ui left">
+						<a role="button" class="fold-file muted mr-2">
+							{{svg "octicon-chevron-down" 18}}
+						</a>
+						<div class="bold ui left df ac">
 							{{if not $file.IsRenamed}}
 								{{template "repo/diff/stats" dict "file" . "root" $}}
 							{{end}}
 						</div>
-						<span class="file">{{$file.Name}}</span>
-						<div>{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
-						{{if $file.IsProtected}}
-							<span class="ui right basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
-						{{end}}
-						{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
-							{{if $file.IsDeleted}}
-								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
-							{{else}}
-								<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+						<span class="file mono">{{$file.Name}}</span>
+						<div class="diff-file-header-actions df ac">
+							<div class="text grey">{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
+							{{if $file.IsProtected}}
+								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
 							{{end}}
-						{{end}}
+							{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
+								{{if $file.IsDeleted}}
+									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+								{{else}}
+									<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
+								{{end}}
+							{{end}}
+						</div>
 					</h4>
 				</div>
 			{{else}}
@@ -82,21 +87,19 @@
 							{{else}}
 								{{$isImage = (call $.IsImageFileInHead $file.Name)}}
 							{{end}}
-							{{if or (not $file.IsBin) $isImage}}
-							<a role="button" class="fold-file">
+							<a role="button" class="fold-file muted mr-2">
 								{{svg "octicon-chevron-down" 18}}
 							</a>
-							{{end}}
-							<div class="diff-counter">
+							<div class="bold df ac">
 								{{if $file.IsBin}}
 									{{$.i18n.Tr "repo.diff.bin"}}
 								{{else if not $file.IsRenamed}}
 									{{template "repo/diff/stats" dict "file" . "root" $}}
 								{{end}}
 							</div>
-							<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
+							<span class="file mono">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 						</div>
-						<div class="df ac">
+						<div class="diff-file-header-actions df ac">
 							{{if $file.IsProtected}}
 								<span class="ui basic label">{{$.i18n.Tr "repo.diff.protected"}}</span>
 							{{end}}
@@ -111,8 +114,8 @@
 					</h4>
 					<div class="diff-file-body ui attached unstackable table segment">
 						{{if ne $file.Type 4}}
-							<div class="file-body file-code has-context-menu code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
-								<table class="chroma">
+							<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}}">
+								<table class="chroma{{if $isImage}} w-100{{end}}">
 									<tbody>
 										{{if $isImage}}
 											{{template "repo/diff/image_diff" dict "file" . "root" $}}
@@ -130,7 +133,6 @@
 					</div>
 				</div>
 			{{end}}
-		<br>
 		{{end}}
 
 		{{if .Diff.IsIncomplete}}
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index 6afb985e9a..eda208d744 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -2,22 +2,22 @@
 {{ $imagePathNew := printf "%s/%s" .root.RawPath (EscapePound .file.Name)  }}
 
 <tr>
- 	<th class="halfwidth center">
+ 	<th class="halfwidth center pl-3 pr-2">
  		{{.root.i18n.Tr "repo.diff.file_before"}}
  	</th>
- 	<th class="halfwidth center">
+ 	<th class="halfwidth center pl-2 pr-3">
  		{{.root.i18n.Tr "repo.diff.file_after"}}
  	</th>
 </tr>
 <tr>
- 	<td class="halfwidth center">
+ 	<td class="halfwidth center pl-3 pr-2">
  	    {{if or .file.IsDeleted (not .file.IsCreated)}}
             <a href="{{$imagePathOld}}" target="_blank">
                 <img src="{{$imagePathOld}}" class="border red" />
             </a>
  	    {{end}}
  	</td>
- 	<td class="halfwidth center">
+ 	<td class="halfwidth center pl-2 pr-3">
  	    {{if or .file.IsCreated (not .file.IsDeleted)}}
 			<a href="{{$imagePathNew}}" target="_blank">
 				<img src="{{$imagePathNew}}" class="border green" />
@@ -29,7 +29,7 @@
 {{ $imageInfoHead := (call .root.ImageInfo .file.Name) }}
 {{if or $imageInfoBase $imageInfoHead }}
 <tr>
- 	<td class="halfwidth center">
+ 	<td class="halfwidth center pl-3 pr-2">
  	{{if $imageInfoBase }}
  		{{ $classWidth := "" }}
  		{{ $classHeight := "" }}
@@ -52,7 +52,7 @@
  	    {{.root.i18n.Tr "repo.diff.file_byte_size"}}: <span class="text {{$classByteSize}}">{{FileSize $imageInfoBase.ByteSize}}</span>
  	{{end}}
  	</td>
- 	<td class="halfwidth center">
+ 	<td class="halfwidth center pl-2 pr-3">
  	{{if $imageInfoHead }}
  		{{ $classWidth := "" }}
  		{{ $classHeight := "" }}
diff --git a/templates/repo/diff/stats.tmpl b/templates/repo/diff/stats.tmpl
index 97503f0ea5..1c9b2abd31 100644
--- a/templates/repo/diff/stats.tmpl
+++ b/templates/repo/diff/stats.tmpl
@@ -1,4 +1,4 @@
 {{Add .file.Addition .file.Deletion}}
-<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">
+<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">
 	<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
 </span>
diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl
index c2172ec787..b66391a5ac 100644
--- a/templates/repo/search.tmpl
+++ b/templates/repo/search.tmpl
@@ -16,10 +16,10 @@
 			<h3>
 				{{.i18n.Tr "repo.search.results" (.Keyword|Escape) .RepoLink .RepoName | Str2html }}
 			</h3>
-			<div>
+			<div class="df ac fw">
 				{{range $term := .SearchResultLanguages}}
-				<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}}">
-					<i class="color-icon" style="background-color: {{$term.Color}}"></i>
+				<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}}">
+					<i class="color-icon mr-3" style="background-color: {{$term.Color}}"></i>
 					{{$term.Language}}
 					<div class="detail">{{$term.Count}}</div>
 				</a>
@@ -30,7 +30,7 @@
 					<div class="diff-file-box diff-box file-content non-diff-file-content repo-search-result">
 						<h4 class="ui top attached normal header">
 							<span class="file">{{.Filename}}</span>
-							<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>
+							<a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound .Filename}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
 						</h4>
 						<div class="ui attached table segment">
 							<div class="file-body file-code code-view">
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 6c455a4d5d..5bb71ba49d 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -23,15 +23,16 @@
 	<div class="ui segment sub-menu language-stats-details" style="display: none">
 		<div class="ui horizontal center link list">
 			{{range .LanguageStats}}
-			<div class="item">
-				<i class="color-icon" style="background-color: {{ .Color }}"></i>
-				<span class="ui"><b>
-				{{if eq .Language "other" }}
-					{{ $.i18n.Tr "repo.language_other" }}
-				{{else}}
-					{{ .Language }}
-				{{end}}
-				</b> {{ .Percentage }}%</span>
+			<div class="item df ac jc">
+				<i class="color-icon mr-3" style="background-color: {{ .Color }}"></i>
+				<span class="bold mr-3">
+					{{if eq .Language "other" }}
+						{{ $.i18n.Tr "repo.language_other" }}
+					{{else}}
+						{{ .Language }}
+					{{end}}
+				</span>
+				{{ .Percentage }}%
 			</div>
 			{{end}}
 		</div>
diff --git a/templates/shared/searchbottom.tmpl b/templates/shared/searchbottom.tmpl
index 5680c8d2a9..ab4c135ffe 100644
--- a/templates/shared/searchbottom.tmpl
+++ b/templates/shared/searchbottom.tmpl
@@ -1,10 +1,10 @@
 <div class="ui bottom attached table segment df ac sb">
-		<div class="ml-3">
+		<div class="df ac ml-4">
 			{{if .result.Language}}
-					<i class="color-icon" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
+					<i class="color-icon mr-3" style="background-color: {{.result.Color}}"></i>{{.result.Language}}
 			{{end}}
 		</div>
-		<div class="mr-3">
+		<div class="mr-4">
 			{{if not .result.UpdatedUnix.IsZero}}
 					<span class="ui grey text">{{.root.i18n.Tr "explore.code_last_indexed_at" (TimeSinceUnix .result.UpdatedUnix .root.i18n.Lang) | Safe}}</span>
 			{{end}}