nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +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> </header>
<h1 id="{{ $title | plainify | anchorize }}">{{ $title }}</h1> <h1 id="{{ $title | plainify | anchorize }}">{{ $title }}</h1>
<form action="javascript:triggerSearch()"> <search>
<div class="searchform"> <form action="javascript:triggerSearch()">
<label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label> <div class="searchform">
<input data-search-input id="R-search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}"> <label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label>
{{- partial "shortcodes/button.html" (dict <input data-search-input id="R-search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
"page" $page {{- partial "shortcodes/button.html" (dict
"type" "submit" "page" $page
"style" "secondary" "type" "submit"
"icon" "search" "style" "secondary"
"content" (T "Search") "icon" "search"
)}} "content" (T "Search")
</div> )}}
</form> </div>
</form>
</search>
<div class="searchhint"> <div class="searchhint">
</div> </div>
<hr> <hr>

14
layouts/partials/search.html
View file

@ -4,12 +4,14 @@
{{- $link = partial "relLangPrettyUglyURL.hugo" (dict "to" .) }} {{- $link = partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}
{{- end }} {{- end }}
{{- end }} {{- end }}
{{- $c:="" }} {{ if $link }}<form action="{{ $link }}" method="get">{{ end }}<div class="searchbox default-animation"> <search>{{ if $link }}<form action="{{ $link }}" method="get">{{ end }}
{{ 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 }} <div class="searchbox default-animation">
<label class="a11y-only" for="R-search-by">{{ T "Search" }}</label> {{ 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 }}
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}"> <label class="a11y-only" for="R-search-by">{{ T "Search" }}</label>
<button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button> <input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
</div>{{ if $link }}</form>{{ end }} <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 }} {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
{{- $pageBaseLang := replaceRE "([a-z]+).*" "${1}" .Page.Language.LanguageCode }} {{- $pageBaseLang := replaceRE "([a-z]+).*" "${1}" .Page.Language.LanguageCode }}
{{- $contentlangs := (union (slice | append (.Site.Params.additionalContentLanguage | default slice)) (slice $pageBaseLang)) }} {{- $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; border-top: 0;
background: rgba( 255, 255, 255, 1 ); background: rgba( 255, 255, 255, 1 );
box-shadow: -1px 1px 3px rgba( 0, 0, 0, .1 ); box-shadow: -1px 1px 3px rgba( 0, 0, 0, .1 );
width: calc( 100% - 2rem );
/* core styles should not be changed */ /* core styles should not be changed */
position: absolute; position: absolute;

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

@ -93,9 +93,10 @@ var autoComplete = (function(){
pageXOffset = window.pageXOffset || document.documentElement.scrollLeft; pageXOffset = window.pageXOffset || document.documentElement.scrollLeft;
pageYOffset = window.pageYOffset || document.documentElement.scrollTop; pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
} }
that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px'; // Is this really the job of the tool or should it be defered to the user?
that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px'; // that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth // 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) { if (!resize) {
that.sc.style.display = 'block'; that.sc.style.display = 'block';
if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); } 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({ var searchList = new autoComplete({
/* selector for the search box element */ /* selector for the search box element */
selectorToInsert: '#R-header-wrapper', selectorToInsert: 'search:has(.searchbox)',
selector: '#R-search-by', selector: '#R-search-by',
/* source is the callback to perform the search */ /* source is the callback to perform the search */
source: function(term, response) { source: function(term, response) {