Merge pull request 'ui: wiki/code search fixes' (#5260) from snematoda/search-ui-fix into forgejo

closes forgejo/forgejo#5259 (leftover arrowhead in Safari)
Fixes long results in wiki search overflowing the page

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/5260
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
Otto 2024-09-14 19:38:35 +00:00
commit d78598ef0d
3 changed files with 13 additions and 6 deletions

View file

@ -1,9 +1,9 @@
{{if .Results}}
{{range .Results}}
<a class="item" href="{{$.RepoLink}}/wiki/{{.Filename}}">
<b class="tw-block tw-mb-2">{{.Filename}}</b>
<a class="item tw-max-w-[80vw]" href="{{$.RepoLink}}/wiki/{{.Filename}}">
<b class="tw-block tw-mb-2 tw-whitespace-break-spaces">{{.Filename}}</b>
{{range .LineCodes}}
<p class="tw-my-0">{{.}}</p>
<p class="tw-my-0 tw-whitespace-break-spaces">{{.}}</p>
{{end}}
</a>
{{end}}

View file

@ -28,16 +28,16 @@
</div>
</div>
</div>
<div class="clone-panel ui action small input">
<div class="clone-panel ui action small input tw-ml-auto">
{{template "repo/clone_buttons" .}}
{{template "repo/clone_script" .}}
</div>
<div class="ui floating dropdown jump">
<div class="ui floating dropdown jump tw-ml-auto">
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="search" name="q" hx-get="{{$.RepoLink}}/wiki/search" hx-target="#wiki-search" hx-swap="innerHTML" hx-trigger="keyup changed delay:.5s" placeholder="{{ctx.Locale.Tr "repo.wiki.search"}}..." />
</div>
<div id="wiki-search" class="menu tw-absolute tw-mt-3 tw-rounded right">
<div id="wiki-search" class="menu tw-absolute tw-max-h-[65dvh] tw-overflow-y-auto tw-mt-3 tw-rounded left">
<div class="item muted">{{ctx.Locale.Tr "repo.wiki.no_search_results"}}</div>
</div>
</div>

View file

@ -1747,6 +1747,13 @@ td .commit-summary {
color: inherit;
}
/* workaround for safari as it does not support 'display: list-item' for summary tags yet
** see https://codeberg.org/forgejo/forgejo/issues/5259 */
details.repo-search-result summary::-webkit-details-marker,
details.repo-search-result summary::marker {
display: none;
}
.search-highlight {
background: var(--color-primary-alpha-40);
}