forkjo/templates/shared/search/code/results.tmpl
Shiny Nematoda 928f188689 fix(code search): various ui/ux improvements raised by user research (#4332)
various improvements from [user research](https://codeberg.org/forgejo/user-research/src/branch/main/interviews/2024-06/issues%28search%2Cfeatures%29%2Cselfhosting%2CCI%2Caccessibility%2Ccodesearch.md)

- filenames are links to the respective files
  fixes: `fold menu: user clicked and expected to view file, instead the file collapsed`

- refactor(searchfile.tmpl): ordered lists with lines grouped together instead of table
  fixes: `multiple matches per file are "merged", only visible in the code lines (no visual separation)`

- feat: display fuzzy as "Either" when using git-grep which is much more accurate than "fuzzy"
  git-grep does not support fuzzy searching, in this context selecting fuzzy searching worked similar to an OR of white space separated keywords
  fixes: `typo doesn't bring results in fuzzy search`

---

<details>
<summary>Before</summary>

![1](https://codeberg.org/attachments/5173357f-8dce-470c-9a9e-84a30517c216)
</details>

<details>
<summary>After</summary>

![after](https://codeberg.org/attachments/f8ec15dd-08ce-41f2-9326-d823de6f2395)
</details>

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4332
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
Co-committed-by: Shiny Nematoda <snematoda.751k2@aleeas.com>
2024-07-10 05:25:32 +00:00

44 lines
2 KiB
Go HTML Template

<div class="flex-text-block tw-flex-wrap">
{{range $term := .SearchResultLanguages}}
<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label tw-m-0"
href="?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}&fuzzy={{$.IsFuzzy}}">
<i class="color-icon tw-mr-2" style="background-color: {{$term.Color}}"></i>
{{$term.Language}}
<div class="detail">{{$term.Count}}</div>
</a>
{{end}}
</div>
<div class="repository search">
{{range $result := .SearchResults}}
{{$repo := or $.Repo (index $.RepoMaps .RepoID)}}
<details class="tw-group diff-file-box diff-box file-content non-diff-file-content repo-search-result" open>
<summary class="tw-list-none">
<h4 class="ui top attached header tw-font-normal tw-flex tw-flex-wrap tw-transform-reset">
<span class="tw-h-4 tw-transition -tw-rotate-90 group-open:tw-rotate-0">
{{svg "octicon-chevron-down"}}
</span>
{{if not $.Repo}}
<span class="file tw-flex-1 tw-ml-2">
<a rel="nofollow" href="{{$repo.Link}}">{{$repo.FullName}}</a>
{{if $repo.IsArchived}}
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
{{end}}
- {{.Filename}}
</span>
{{else}}
<span class="file tw-flex-1 tw-ml-2">
<a rel="nofollow" class="muted file-link" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{/*
*/}}{{.Filename}}</a>
</span>
{{end}}
<a role="button" class="ui basic tiny button" rel="nofollow" href="{{$repo.Link}}/src/commit/{{$result.CommitID | PathEscape}}/{{.Filename | PathEscapeSegments}}">{{ctx.Locale.Tr "repo.diff.view_file"}}</a>
</h4>
</summary>
<div class="ui attached table segment">
{{template "shared/searchfile" dict "RepoLink" $repo.Link "SearchResult" .}}
</div>
{{template "shared/searchbottom" dict "root" $ "result" .}}
</details>
{{end}}
</div>
{{template "base/paginate" .}}