Monorepo for Tangled
appview: make quick-search more responsive
Signed-off-by: eti <eti@eti.tf>
+8
-8
+8
-8
appview/pages/templates/layouts/fragments/topbar.html
+8
-8
appview/pages/templates/layouts/fragments/topbar.html
···
11
11
{{ with .LoggedInUser }}
12
12
<div class="flex items-center order-1 md:order-3">{{ block "newButton" . }} {{ end }}</div>
13
13
<div class="flex items-center order-2 md:order-4">{{ template "notifications/fragments/bell" }}</div>
14
-
<div class="flex items-center order-3 md:order-1">{{ block "searchButton" . }} {{ end }}</div>
14
+
<div class="flex items-center order-3 md:order-1">{{ block "search" . }} {{ end }}</div>
15
15
<div class="hidden md:block md:order-2 w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
16
16
<div class="flex items-center order-4 md:order-5">{{ block "profileDropdown" . }} {{ end }}</div>
17
17
{{ else }}
···
44
44
</details>
45
45
{{ end }}
46
46
47
-
{{ define "searchButton" }}
47
+
{{ define "search" }}
48
48
<div class="relative hidden md:block" id="topbar-search-container">
49
-
<div id="topbar-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] w-80 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
49
+
<div id="topbar-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] md:w-80 lg:w-96 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
50
50
{{ i "search" "size-4 text-gray-400" }}
51
51
<input
52
52
type="text"
···
61
61
hx-swap="innerHTML"
62
62
hx-indicator="#topbar-search-indicator"
63
63
/>
64
-
<kbd class="pointer-events-none flex items-center shrink-0 text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
64
+
<kbd class="pointer-events-none flex items-center text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
65
65
<span id="topbar-search-indicator" class="shrink-0">
66
66
{{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
67
67
</span>
68
68
<button
69
69
type="button"
70
-
class="shrink-0 hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
70
+
class="hidden peer-[:not(:placeholder-shown)]:block text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
71
71
onclick="const i=document.getElementById('topbar-search-input');i.value='';htmx.trigger(i,'input');i.focus()"
72
72
>{{ i "x" "size-4" }}</button>
73
73
</div>
74
-
<div id="topbar-search-results" class="absolute right-0 top-full z-50 w-80"></div>
74
+
<div id="topbar-search-results" class="absolute w-full z-50"></div>
75
75
</div>
76
76
77
77
<button id="mobile-search-btn" class="md:hidden" type="button" data-action="open-mobile-search">
···
105
105
<span id="mobile-search-indicator" class="shrink-0">
106
106
{{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
107
107
</span>
108
-
<button type="button" class="shrink-0 p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
108
+
<button type="button" class="p-1 -mr-1 hit-area hit-area-4" data-action="close-mobile-search">
109
109
{{ i "x" "size-5 text-gray-400" }}
110
110
</button>
111
111
</div>
112
112
<div id="mobile-search-results" class="flex-1 flex flex-col overflow-hidden pb-[env(safe-area-inset-bottom)]"></div>
113
-
<div id="mobile-search-spacer" class="shrink-0 bg-gray-50 dark:bg-gray-800 hidden"></div>
113
+
<div id="mobile-search-spacer" class="bg-gray-50 dark:bg-gray-800 hidden"></div>
114
114
</div>
115
115
<style>
116
116
#topbar-search-indicator,