back round 0 view raw

appview/pages: add search submit button for mobile #832

merged

opened by

boltless.me 3 weeks ago targeting master from sl/svpoxmnoysvr

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

options

unified split

Changed files

+38 -16

appview

pages

templates

repo

issues

issues.html

pulls

pulls.html

+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
       33
       -
             <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">

     

       34
       34
       -
               {{ i "search" "w-4 h-4" }}

     

       33
       33
       +
             <div class="flex-1 flex relative">

     

       34
       34
       +
               <input

     

       35
       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
       36
       +
                 type="text"

     

       37
       37
       +
                 name="q"

     

       38
       38
       +
                 value="{{ .FilterQuery }}"

     

       39
       39
       +
                 placeholder=" "

     

       40
       40
       +
               >

     

       41
       41
       +
               <a

     

       42
       42
       +
                 href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"

     

       43
       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
       44
       +
               >

     

       45
       45
       +
                 {{ i "x" "w-4 h-4" }}

     

       46
       46
       +
               </a>

     

       35
       47
        
             </div>

     

       36
       36
       -
             <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">

     

       37
       37
       -
             <a

     

       38
       38
       -
               href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"

     

       39
       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
       48
       +
             <button

     

       49
       49
       +
               type="submit"

     

       50
       50
       +
               class="p-2 text-gray-400 border rounded-r border-gray-400 dark:border-gray-600"

     

       40
       51
        
             >

     

       41
       41
       -
               {{ i "x" "w-4 h-4" }}

     

       42
       42
       -
             </a>

     

       52
       52
       +
               {{ i "search" "w-4 h-4" }}

     

       53
       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
       39
       -
             <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">

     

       40
       40
       -
               {{ i "search" "w-4 h-4" }}

     

       39
       39
       +
             <div class="flex-1 flex relative">

     

       40
       40
       +
               <input

     

       41
       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
       42
       +
                 type="text"

     

       43
       43
       +
                 name="q"

     

       44
       44
       +
                 value="{{ .FilterQuery }}"

     

       45
       45
       +
                 placeholder=" "

     

       46
       46
       +
               >

     

       47
       47
       +
               <a

     

       48
       48
       +
                 href="?state={{ .FilteringBy.String }}"

     

       49
       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
       50
       +
               >

     

       51
       51
       +
                 {{ i "x" "w-4 h-4" }}

     

       52
       52
       +
               </a>

     

       41
       53
        
             </div>

     

       42
       42
       -
             <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" ">

     

       43
       43
       -
             <a

     

       44
       44
       -
               href="?state={{ .FilteringBy.String }}"

     

       45
       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
       54
       +
             <button

     

       55
       55
       +
               type="submit"

     

       56
       56
       +
               class="p-2 text-gray-400 border rounded-r border-gray-400 dark:border-gray-600"

     

       46
       57
        
             >

     

       47
       47
       -
               {{ i "x" "w-4 h-4" }}

     

       48
       48
       -
             </a>

     

       58
       58
       +
               {{ i "search" "w-4 h-4" }}

     

       59
       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) }}