Skip to content

Search and Diff CSS enhancements #14050

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Dec 20, 2020
Merged

Search and Diff CSS enhancements #14050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
56116eb
Search and Diff CSS enhancements
silverwind Dec 18, 2020
bdf360b
more diff tweaks, less vertical padding on header
silverwind Dec 18, 2020
01f94b2
more minor tweaks
silverwind Dec 18, 2020
a10abca
always show fold icon, image diff improvments
silverwind Dec 19, 2020
1e2677b
remove margin
silverwind Dec 19, 2020
06a60e7
Merge branch 'master' into csstweaks17
lunny Dec 20, 2020
525331e
Merge branch 'master' into csstweaks17
techknowlogick Dec 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions templates/explore/code.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
8 changes: 4 additions & 4 deletions templates/explore/repo_list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
50 changes: 26 additions & 24 deletions templates/repo/diff/box.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -45,31 +45,36 @@
</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>
{{range $i, $file := .Diff.Files}}
{{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}}
Expand All @@ -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}}
Expand All @@ -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" $}}
Expand All @@ -130,7 +133,6 @@
</div>
</div>
{{end}}
<br>
{{end}}

{{if .Diff.IsIncomplete}}
Expand Down
12 changes: 6 additions & 6 deletions templates/repo/diff/image_diff.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -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 := "" }}
Expand All @@ -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 := "" }}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/diff/stats.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
8 changes: 4 additions & 4 deletions templates/repo/search.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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">
Expand Down
19 changes: 10 additions & 9 deletions templates/repo/sub_menu.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/shared/searchbottom.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand Down
Loading