appview/pages: improve search bar UI #786

merged
opened by boltless.me 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

Changed files
+38 -47
appview
pages
templates
repo
issues
pulls
+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 - <div class="flex flex-col gap-2"> 31 - <div class="flex justify-between items-stretch gap-4"> 32 - <form class="flex flex-1 relative" method="GET"> 33 - <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"> 34 - <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> 35 - {{ i "search" "w-4 h-4" }} 36 - </div> 37 - <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 38 - <a 39 - href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}" 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 - > 42 - {{ i "x" "w-4 h-4" }} 43 - </a> 44 - </form> 45 - <div class="hidden sm:block"> 46 - {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }} 30 + <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2"> 31 + <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET"> 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" }} 47 35 </div> 36 + <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 48 37 <a 49 - href="/{{ .RepoInfo.FullName }}/issues/new" 50 - class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white" 51 - > 52 - {{ i "circle-plus" "w-4 h-4" }} 53 - <span>new</span> 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" 40 + > 41 + {{ i "x" "w-4 h-4" }} 54 42 </a> 55 - </div> 56 - <div class="sm:hidden"> 43 + </form> 44 + <div class="sm:row-start-1"> 57 45 {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }} 58 46 </div> 47 + <a 48 + href="/{{ .RepoInfo.FullName }}/issues/new" 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 + > 51 + {{ i "circle-plus" "w-4 h-4" }} 52 + <span>new</span> 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 - <div class="flex flex-col gap-2"> 37 - <div class="flex justify-between items-stretch gap-2"> 38 - <form class="flex flex-1 relative" method="GET"> 39 - <input type="hidden" name="state" value="{{ .FilteringBy.String }}"> 40 - <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> 41 - {{ i "search" "w-4 h-4" }} 42 - </div> 43 - <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 44 - <a 45 - href="?state={{ .FilteringBy.String }}" 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 - > 48 - {{ i "x" "w-4 h-4" }} 49 - </a> 50 - </form> 51 - <div class="hidden sm:block"> 52 - {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }} 36 + <div class="grid gap-2 grid-cols-[auto_1fr_auto] grid-row-2"> 37 + <form class="flex relative col-span-3 sm:col-span-1 sm:col-start-2" method="GET"> 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" }} 53 41 </div> 54 - <a href="/{{ .RepoInfo.FullName }}/pulls/new" 55 - class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white" 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" 56 46 > 57 - {{ i "git-pull-request-create" "w-4 h-4" }} 58 - <span>new</span> 47 + {{ i "x" "w-4 h-4" }} 59 48 </a> 60 - </div> 61 - <div class="sm:hidden"> 49 + </form> 50 + <div class="sm:row-start-1"> 62 51 {{ template "fragments/tabSelector" (dict "Name" "state" "Values" $values "Active" $active) }} 63 52 </div> 53 + <a 54 + href="/{{ .RepoInfo.FullName }}/pulls/new" 55 + class="col-start-3 btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white" 56 + > 57 + {{ i "git-pull-request-create" "w-4 h-4" }} 58 + <span>new</span> 59 + </a> 64 60 </div> 65 61 <div class="error" id="pulls"></div> 66 62 {{ end }}