Monorepo for Tangled tangled.org

appview/pages: improve search bar styling in issues and pulls

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li ed4eba60 8caa8538

verified
Changed files
+79 -67
appview
pages
templates
layouts
repo
issues
pulls
+1 -1
appview/pages/templates/layouts/repobase.html
··· 104 104 </div> 105 105 </nav> 106 106 {{ block "repoContentLayout" . }} 107 - <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white"> 107 + <section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full mx-auto dark:text-white"> 108 108 {{ block "repoContent" . }}{{ end }} 109 109 </section> 110 110 {{ block "repoAfter" . }}{{ end }}
+38 -32
appview/pages/templates/repo/issues/issues.html
··· 8 8 {{ end }} 9 9 10 10 {{ define "repoContent" }} 11 - <div class="flex justify-between items-center gap-4"> 12 - <div class="flex gap-4"> 13 - <a 14 - href="?state=open" 15 - class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 16 - > 17 - {{ i "circle-dot" "w-4 h-4" }} 18 - <span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span> 19 - </a> 20 - <a 21 - href="?state=closed" 22 - class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 23 - > 24 - {{ i "ban" "w-4 h-4" }} 25 - <span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span> 26 - </a> 27 - <form class="flex gap-4" method="GET"> 11 + <div class="flex justify-between items-stretch gap-4"> 12 + <form class="flex flex-1 relative" method="GET"> 28 13 <input type="hidden" name="state" value="{{ if .FilteringByOpen }}open{{ else }}closed{{ end }}"> 29 - <input class="" type="text" name="q" value="{{ .FilterQuery }}"> 30 - <button class="btn" type="submit"> 31 - search 32 - </button> 33 - </form> 34 - </div> 35 - <a 36 - href="/{{ .RepoInfo.FullName }}/issues/new" 37 - class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white" 38 - > 39 - {{ i "circle-plus" "w-4 h-4" }} 40 - <span>new</span> 41 - </a> 42 - </div> 43 - <div class="error" id="issues"></div> 14 + <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> 15 + {{ i "search" "w-4 h-4" }} 16 + </div> 17 + <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 18 + <a 19 + href="?state={{ if .FilteringByOpen }}open{{ else }}closed{{ end }}" 20 + 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" 21 + > 22 + {{ i "x" "w-4 h-4" }} 23 + </a> 24 + </form> 25 + <a 26 + href="/{{ .RepoInfo.FullName }}/issues/new" 27 + class="btn-create text-sm flex items-center justify-center gap-2 no-underline hover:no-underline hover:text-white" 28 + > 29 + {{ i "circle-plus" "w-4 h-4" }} 30 + <span>new</span> 31 + </a> 32 + </div> 33 + <div class="mt-2 ml-2 flex gap-4 text-xs"> 34 + <a 35 + href="?state=open" 36 + class="flex items-center gap-2 {{ if .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 37 + > 38 + {{ i "circle-dot" "w-4 h-4" }} 39 + <span>{{ .RepoInfo.Stats.IssueCount.Open }} open</span> 40 + </a> 41 + <a 42 + href="?state=closed" 43 + class="flex items-center gap-2 {{ if not .FilteringByOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 44 + > 45 + {{ i "ban" "w-4 h-4" }} 46 + <span>{{ .RepoInfo.Stats.IssueCount.Closed }} closed</span> 47 + </a> 48 + </div> 49 + <div class="error" id="issues"></div> 44 50 {{ end }} 45 51 46 52 {{ define "repoAfter" }}
+40 -34
appview/pages/templates/repo/pulls/pulls.html
··· 8 8 {{ end }} 9 9 10 10 {{ define "repoContent" }} 11 - <div class="flex justify-between items-center"> 12 - <div class="flex gap-4"> 13 - <a 14 - href="?state=open" 15 - class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 16 - > 17 - {{ i "git-pull-request" "w-4 h-4" }} 18 - <span>{{ .RepoInfo.Stats.PullCount.Open }} open</span> 19 - </a> 20 - <a 21 - href="?state=merged" 22 - class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 23 - > 24 - {{ i "git-merge" "w-4 h-4" }} 25 - <span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span> 26 - </a> 27 - <a 28 - href="?state=closed" 29 - class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 30 - > 31 - {{ i "ban" "w-4 h-4" }} 32 - <span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span> 33 - </a> 34 - <form class="flex gap-4" method="GET"> 35 - <input type="hidden" name="state" value="{{ .FilteringBy.String }}"> 36 - <input class="" type="text" name="q" value="{{ .FilterQuery }}"> 37 - <button class="btn" type="submit"> 38 - search 39 - </button> 40 - </form> 11 + <div class="flex justify-between items-stretch gap-4"> 12 + <form class="flex flex-1 relative" method="GET"> 13 + <input type="hidden" name="state" value="{{ .FilteringBy.String }}"> 14 + <div class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none"> 15 + {{ i "search" "w-4 h-4" }} 41 16 </div> 17 + <input class="flex-1 p-1 pl-10 pr-10 peer" type="text" name="q" value="{{ .FilterQuery }}" placeholder=" "> 18 + <a 19 + href="?state={{ .FilteringBy.String }}" 20 + 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" 21 + > 22 + {{ i "x" "w-4 h-4" }} 23 + </a> 24 + </form> 25 + <a 26 + href="/{{ .RepoInfo.FullName }}/pulls/new" 27 + class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white" 28 + > 29 + {{ i "git-pull-request-create" "w-4 h-4" }} 30 + <span>new</span> 31 + </a> 32 + </div> 33 + <div class="mt-2 ml-2 flex gap-4 text-xs"> 42 34 <a 43 - href="/{{ .RepoInfo.FullName }}/pulls/new" 44 - class="btn-create text-sm flex items-center gap-2 no-underline hover:no-underline hover:text-white" 35 + href="?state=open" 36 + class="flex items-center gap-2 {{ if .FilteringBy.IsOpen }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 37 + > 38 + {{ i "git-pull-request" "w-4 h-4" }} 39 + <span>{{ .RepoInfo.Stats.PullCount.Open }} open</span> 40 + </a> 41 + <a 42 + href="?state=merged" 43 + class="flex items-center gap-2 {{ if .FilteringBy.IsMerged }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 45 44 > 46 - {{ i "git-pull-request-create" "w-4 h-4" }} 47 - <span>new</span> 45 + {{ i "git-merge" "w-4 h-4" }} 46 + <span>{{ .RepoInfo.Stats.PullCount.Merged }} merged</span> 47 + </a> 48 + <a 49 + href="?state=closed" 50 + class="flex items-center gap-2 {{ if .FilteringBy.IsClosed }}font-bold {{ else }}text-gray-500 dark:text-gray-400{{ end }}" 51 + > 52 + {{ i "ban" "w-4 h-4" }} 53 + <span>{{ .RepoInfo.Stats.PullCount.Closed }} closed</span> 48 54 </a> 49 55 </div> 50 56 <div class="error" id="pulls"></div>