nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-10-27 02:33:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

a11y: improve search box #821

Browse source
This commit is contained in:
Sören Weber 2024-04-04 17:49:28 +02:00
parent 8f135335f3
commit 2c8cf85ea1
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
5 changed files with 29 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
layouts/partials/body.searchpage.html
View file

@ -5,19 +5,21 @@
</header>
<h1 id="{{ $title | plainify | anchorize }}">{{ $title }}</h1>
<form action="javascript:triggerSearch()">
<div class="searchform">
<label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label>
<input data-search-input id="R-search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
{{- partial "shortcodes/button.html" (dict
"page" $page
"type" "submit"
"style" "secondary"
"icon" "search"
"content" (T "Search")
)}}
</div>
</form>
<search>
<form action="javascript:triggerSearch()">
<div class="searchform">
<label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label>
<input data-search-input id="R-search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
{{- partial "shortcodes/button.html" (dict
"page" $page
"type" "submit"
"style" "secondary"
"icon" "search"
"content" (T "Search")
)}}
</div>
</form>
</search>
<div class="searchhint">
</div>
<hr>

14
layouts/partials/search.html
View file

@ -4,12 +4,14 @@
{{- $link = partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}
{{- end }}
{{- end }}
{{- $c:="" }} {{ if $link }}<form action="{{ $link }}" method="get">{{ end }}<div class="searchbox default-animation">
{{ if $link }}<button class="search-detail" type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
<label class="a11y-only" for="R-search-by">{{ T "Search" }}</label>
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
<button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button>
</div>{{ if $link }}</form>{{ end }}
<search>{{ if $link }}<form action="{{ $link }}" method="get">{{ end }}
<div class="searchbox default-animation">
{{ if $link }}<button class="search-detail" type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
<label class="a11y-only" for="R-search-by">{{ T "Search" }}</label>
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
<button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button>
</div>
{{ if $link }}</form>{{ end }}</search>
{{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{- $pageBaseLang := replaceRE "([a-z]+).*" "${1}" .Page.Language.LanguageCode }}
{{- $contentlangs := (union (slice | append (.Site.Params.additionalContentLanguage | default slice)) (slice $pageBaseLang)) }}

1
static/css/auto-complete.css
View file

@ -6,6 +6,7 @@
border-top: 0;
background: rgba( 255, 255, 255, 1 );
box-shadow: -1px 1px 3px rgba( 0, 0, 0, .1 );
width: calc( 100% - 2rem );
/* core styles should not be changed */
position: absolute;

7
static/js/auto-complete.js
View file

@ -93,9 +93,10 @@ var autoComplete = (function(){
pageXOffset = window.pageXOffset || document.documentElement.scrollLeft;
pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
}
that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
// Is this really the job of the tool or should it be defered to the user?
// that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
// that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
// that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
if (!resize) {
that.sc.style.display = 'block';
if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }

2
static/js/search.js
View file

@ -271,7 +271,7 @@ function startSearch(){
var searchList = new autoComplete({
/* selector for the search box element */
selectorToInsert: '#R-header-wrapper',
selectorToInsert: 'search:has(.searchbox)',
selector: '#R-search-by',
/* source is the callback to perform the search */
source: function(term, response) {