Monorepo for Tangled tangled.org

appview/pages: add search submit button for mobile

Mobile need a dedicated search button to submit the form.

Also applied correct focus-ring for input tag

Signed-off-by: Seongmin Lee <git@boltless.me>

boltless.me bb67781f ed4b1ab1

verified
Changed files
+38 -16
appview
pages
templates
repo
issues
pulls
+19 -8
appview/pages/templates/repo/issues/issues.html
··· 30 30 <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2"> 31 31 <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET"> 32 32 <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"> 33 - <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> 34 - {{ i "search" "w-4 h-4" }} 33 + <div class="flex-1 flex relative"> 34 + <input 35 + class="flex-1 py-1 pl-2 pr-10 mr-[-1px] rounded-r-none focus:border-0 focus:outline-none focus:ring focus:ring-blue-400 ring-inset peer" 36 + type="text" 37 + name="q" 38 + value="{{ .FilterQuery }}" 39 + placeholder=" " 40 + > 41 + <a 42 + href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}" 43 + class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block" 44 + > 45 + {{ i "x" "w-4 h-4" }} 46 + </a> 35 47 </div> 36 - <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 37 - <a 38 - href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}" 39 - class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block" 48 + <button 49 + type="submit" 50 + class="p-2 text-gray-400 border rounded-r border-gray-400 dark:border-gray-600" 40 51 > 41 - {{ i "x" "w-4 h-4" }} 42 - </a> 52 + {{ i "search" "w-4 h-4" }} 53 + </button> 43 54 </form> 44 55 <div class="sm:row-start-1"> 45 56 {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}
+19 -8
appview/pages/templates/repo/pulls/pulls.html
··· 36 36 <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2"> 37 37 <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET"> 38 38 <input type="hidden" name="state" value="{{ .FilteringBy.String }}"> 39 - <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> 40 - {{ i "search" "w-4 h-4" }} 39 + <div class="flex-1 flex relative"> 40 + <input 41 + class="flex-1 py-1 pl-2 pr-10 mr-[-1px] rounded-r-none focus:border-0 focus:outline-none focus:ring focus:ring-blue-400 ring-inset peer" 42 + type="text" 43 + name="q" 44 + value="{{ .FilterQuery }}" 45 + placeholder=" " 46 + > 47 + <a 48 + href="?state={{ .FilteringBy.String }}" 49 + class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block" 50 + > 51 + {{ i "x" "w-4 h-4" }} 52 + </a> 41 53 </div> 42 - <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 43 - <a 44 - href="?state={{ .FilteringBy.String }}" 45 - class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hidden peer-[:not(:placeholder-shown)]:block" 54 + <button 55 + type="submit" 56 + class="p-2 text-gray-400 border rounded-r border-gray-400 dark:border-gray-600" 46 57 > 47 - {{ i "x" "w-4 h-4" }} 48 - </a> 58 + {{ i "search" "w-4 h-4" }} 59 + </button> 49 60 </form> 50 61 <div class="sm:row-start-1"> 51 62 {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}