blogs/hugo
1
0
Fork 0
mirror of https://github.com/gohugoio/hugo.git synced 2026-08-24 15:28:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme: Adjust search field and search activation

Browse Source 
- Activate search with / regardless of OS
- Adjust colors for "standalone" search button

Closes #2893
This commit is contained in:
Joe Mooring
2025-02-13 11:09:54 -08:00
committed by Bjørn Erik Pedersen
parent f042e49709
commit ed42af5b3b
2 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/alpinejs/data/search.js
+1 -1
View File
@@ -102,7 +102,7 @@ export const search = (Alpine, cfg) => ({
['@search-toggle.window']() {
this.toggleOpen();
},
['@keydown.meta.k.window.prevent']() {
['@keydown.slash.window.prevent']() {
this.toggleOpen();
},
},
layouts/partials/layouts/search/button.html
+11 -10
View File
@@ -1,19 +1,20 @@
{{ $textColor := "text-gray-300" }}
{{ $fillColor := "fill-slate-400 dark:fill-slate-500" }}
{{ if .standalone }}
{{ $textColor = "text-gray-800 dark:text-gray-300 " }}
{{ $fillColor = "fill-slate-500 dark:fill-slate-400" }}
{{ end }}
<button
{{ if .standalone }}
x-data @click="$dispatch('search-toggle')"
{{ end }}
type="button"
class="grid cursor-pointer w-full text-gray-300 lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
class="{{ $textColor }} grid cursor-pointer w-full lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
<svg
class="pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
class="{{ $fillColor}} pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4">
<use href="#icon--search"></use>
</svg>
<span class="hidden lg:inline">Search docs</span
><kbd
class="hidden font-sans text-xs/4 text-gray-400 dark:text-gray-400 sm:[.os-macos_&amp;]:block"
><span class="text-gray-400/70 ">⌘</span>K</kbd
><kbd
class="hidden font-sans text-xs/4 text-gray-400 sm:not-[.os-macos_&amp;]:block dark:text-gray-400"
><span class="text-gray-400/70">Ctrl</span>&nbsp;K</kbd
>
<span class="hidden lg:inline">Search docs</span>
<span class="hidden lg:inline">/</span>
</button>