back round 0 view raw

appview/pages: improve search bar UI #786

merged

opened by

boltless.me 1 month ago targeting master from push-nkplmqrwpukq

use grid to reduce the HTML elements
move open/closed buttons to left
move new button to bottom on small screen

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

options

unified split

Changed files

+38 -47

appview

pages

templates

repo

issues

issues.html

pulls

pulls.html

+19 -24

appview/pages/templates/repo/issues/issues.html

···

       27
       27
        
              "Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}

     

       28
       28
        
         {{ $values := list $open $closed }}

     

       29
       29
        
       

     

       30
       30
       -
         <div class="flex flex-col gap-2">

     

       31
       31
       -
           <div class="flex justify-between items-stretch gap-4">

     

       32
       32
       -
             <form class="flex flex-1 relative" method="GET">

     

       33
       33
       -
               <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}">

     

       34
       34
       -
               <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">

     

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

     

       36
       36
       -
               </div>

     

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

     

       38
       38
       -
               <a 

     

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

     

       40
       40
       -
                 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"

     

       41
       41
       -
                 >

     

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

     

       43
       43
       -
               </a>

     

       44
       44
       -
             </form>

     

       45
       45
       -
             <div class="hidden sm:block">

     

       46
       46
       -
               {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}

     

       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" }}

     

       47
       35
        
             </div>

     

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

     

       48
       37
        
             <a

     

       49
       49
       -
               href="/{{ .RepoInfo.FullName }}/issues/new"

     

       50
       50
       -
               class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"

     

       51
       51
       -
               >

     

       52
       52
       -
               {{ i "circle-plus" "w-4 h-4" }}

     

       53
       53
       -
               <span>new</span>

     

       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"

     

       40
       40
       +
             >

     

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

     

       54
       42
        
             </a>

     

       55
       55
       -
           </div>

     

       56
       56
       -
           <div class="sm:hidden">

     

       43
       43
       +
           </form>

     

       44
       44
       +
           <div class="sm:row-start-1">

     

       57
       45
        
             {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}

     

       58
       46
        
           </div>

     

       47
       47
       +
           <a

     

       48
       48
       +
             href="/{{ .RepoInfo.FullName }}/issues/new"

     

       49
       49
       +
             class="col-start-3 btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white"

     

       50
       50
       +
           >

     

       51
       51
       +
             {{ i "circle-plus" "w-4 h-4" }}

     

       52
       52
       +
             <span>new</span>

     

       53
       53
       +
           </a>

     

       59
       54
        
         </div>

     

       60
       55
        
         <div class="error" id="issues"></div>

     

       61
       56
        
       {{ end }}

+19 -23

appview/pages/templates/repo/pulls/pulls.html

···

       33
       33
        
              "Icon" "ban"

     

       34
       34
        
              "Meta" (string .RepoInfo.Stats.IssueCount.Closed)) }}

     

       35
       35
        
         {{ $values := list $open $merged $closed }}

     

       36
       36
       -
         <div class="flex flex-col gap-2">

     

       37
       37
       -
           <div class="flex justify-between items-stretch gap-2">

     

       38
       38
       -
             <form class="flex flex-1 relative" method="GET">

     

       39
       39
       -
               <input type="hidden" name="state" value="{{ .FilteringBy.String }}">

     

       40
       40
       -
               <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">

     

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

     

       42
       42
       -
               </div>

     

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

     

       44
       44
       -
               <a 

     

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

     

       46
       46
       -
                 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"

     

       47
       47
       -
                 >

     

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

     

       49
       49
       -
               </a>

     

       50
       50
       -
             </form>

     

       51
       51
       -
             <div class="hidden sm:block">

     

       52
       52
       -
               {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}

     

       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" }}

     

       53
       41
        
             </div>

     

       54
       54
       -
             <a href="/{{ .RepoInfo.FullName }}/pulls/new"

     

       55
       55
       -
                 class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"

     

       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"

     

       56
       46
        
             >

     

       57
       57
       -
               {{ i "git-pull-request-create" "w-4 h-4" }}

     

       58
       58
       -
               <span>new</span>

     

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

     

       59
       48
        
             </a>

     

       60
       60
       -
           </div>

     

       61
       61
       -
           <div class="sm:hidden">

     

       49
       49
       +
           </form>

     

       50
       50
       +
           <div class="sm:row-start-1">

     

       62
       51
        
             {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }}

     

       63
       52
        
           </div>

     

       53
       53
       +
           <a

     

       54
       54
       +
             href="/{{ .RepoInfo.FullName }}/pulls/new"

     

       55
       55
       +
             class="col-start-3 btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white"

     

       56
       56
       +
           >

     

       57
       57
       +
             {{ i "git-pull-request-create" "w-4 h-4" }}

     

       58
       58
       +
             <span>new</span>

     

       59
       59
       +
           </a>

     

       64
       60
        
         </div>

     

       65
       61
        
         <div class="error" id="pulls"></div>

     

       66
       62
        
       {{ end }}