Monorepo for Tangled tangled.org
2

Configure Feed

Select the types of activity you want to include in your feed.

appview: improve topbar search & z-index stacking

resolves
[TAN-523](https://linear.app/tangled/issue/TAN-523/inline-search-fixes)

Signed-off-by: eti <eti@eti.tf>

+31 -11
+6
appview/pages/static/topbar-search.js
··· 31 31 32 32 const openMobile = () => { 33 33 const overlay = $("mobile-search-overlay"); 34 + const subs = $("subs"); 34 35 if (!overlay || overlay.classList.contains("opacity-100")) return; 35 36 36 37 overlay.classList.remove("opacity-0", "pointer-events-none"); 37 38 overlay.classList.add("opacity-100", "pointer-events-auto"); 38 39 overlay.setAttribute("aria-hidden", "false"); 40 + 41 + subs?.classList.remove("z-30"); 39 42 40 43 savedScrollY = window.scrollY; 41 44 Object.assign(document.body.style, { ··· 65 68 66 69 const closeMobile = () => { 67 70 const overlay = $("mobile-search-overlay"); 71 + const subs = $("subs"); 68 72 if (!overlay) return; 69 73 70 74 overlay.classList.remove("opacity-100", "pointer-events-auto"); ··· 72 76 overlay.setAttribute("aria-hidden", "true"); 73 77 overlay.style.height = ""; 74 78 overlay.style.top = ""; 79 + 80 + subs?.classList.add("z-30"); 75 81 76 82 const spacer = $("mobile-search-spacer"); 77 83 if (spacer) {
+1 -1
appview/pages/templates/layouts/repobase.html
··· 111 111 {{ end }} 112 112 113 113 {{ define "repoActions" }} 114 - <div class="w-full sm:w-fit grid grid-cols-3 gap-2 z-auto"> 114 + <div class="w-full sm:w-fit grid grid-cols-3 gap-2"> 115 115 {{ template "fragments/starBtn" 116 116 (dict "SubjectAt" .RepoInfo.RepoAt 117 117 "IsStarred" .RepoInfo.IsStarred
+1 -1
appview/pages/templates/repo/fragments/diff.html
··· 30 30 {{ block "subsCheckbox" $ }} {{ end }} 31 31 32 32 <!-- top bar --> 33 - <div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}"> 33 + <div class="sticky top-0 z-10 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}"> 34 34 <!-- left panel toggle --> 35 35 {{ template "filesToggle" . }} 36 36
+2 -2
appview/pages/templates/repo/pulls/pull.html
··· 172 172 {{ end }} 173 173 174 174 <!-- backdrop overlay - only visible on mobile when open --> 175 - <div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-40"></div> 175 + <div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-20"></div> 176 176 <!-- right panel - bottom sheet on mobile, side panel on desktop --> 177 - <div id="subs" class="fixed bottom-0 left-0 right-0 z-50 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden"> 177 + <div id="subs" class="fixed bottom-0 left-0 right-0 z-30 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden"> 178 178 <details open id="bottomSheet" class="rounded-t-2xl md:rounded-t shadow-lg md:shadow-none group/panel"> 179 179 <summary class=" 180 180 flex gap-4 items-center justify-between
+1 -1
appview/pages/templates/search/fragments/quick.html
··· 30 30 31 31 {{define "search/fragments/quickPage"}} 32 32 {{- range .Repos -}} 33 - {{ template "user/fragments/repoCard" (list $ . true false (dict) true) }} 33 + {{ template "user/fragments/repoCard" (list $ . true false (dict) true true) }} 34 34 {{- end -}} 35 35 {{end}} 36 36
+19 -5
appview/pages/templates/user/fragments/repoCard.html
··· 1 1 {{ define "user/fragments/repoCard" }} 2 - {{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact]]] */}} 2 + {{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact [,cardLink]]]] */}} 3 3 {{ $root := index . 0 }} 4 4 {{ $repo := index . 1 }} 5 5 {{ $fullName := index . 2 }} 6 6 {{ $starButton := false }} 7 7 {{ $starData := dict }} 8 8 {{ $compact := false }} 9 + {{ $cardLink := false }} 9 10 {{ if gt (len .) 3 }} 10 11 {{ $starButton = index . 3 }} 11 12 {{ if gt (len .) 4 }} 12 13 {{ $starData = index . 4 }} 13 14 {{ if gt (len .) 5 }} 14 15 {{ $compact = index . 5 }} 16 + {{ if gt (len .) 6 }} 17 + {{ $cardLink = index . 6 }} 18 + {{ end }} 15 19 {{ end }} 16 20 {{ end }} 17 21 {{ end }} 18 22 19 23 {{ with $repo }} 24 + {{ $repoOwner := resolve .Did }} 25 + {{ if $cardLink }} 26 + <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="hover:no-underline {{ if not $compact }} min-h-32 {{ end }} {{ if $compact }} hover:bg-gray-100 dark:hover:bg-gray-800/80 focus-within:bg-gray-100 dark:focus-within:bg-gray-800/80 {{ end }} py-4 px-6 gap-1 flex flex-col drop-shadow-sm bg-white dark:bg-gray-800"> 27 + {{ else }} 20 28 <div class="{{ if not $compact }} min-h-32 {{ end }} {{ if $compact }} focus-within:bg-gray-100 dark:focus-within:bg-gray-800/80 {{ end }} py-4 px-6 gap-1 flex flex-col drop-shadow-sm bg-white dark:bg-gray-800"> 29 + {{ end }} 21 30 <div class="dark:text-white flex items-center justify-between"> 22 31 <div class="flex items-center min-w-0 flex-1 mr-2"> 23 32 {{ if .Source }} ··· 25 34 {{ else }} 26 35 {{ i "book-marked" "w-4 h-4 mr-1.5 shrink-0" }} 27 36 {{ end }} 28 - {{ $repoOwner := resolve .Did }} 29 - {{- if $fullName -}} 30 - <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="truncate min-w-0 {{ if $compact }} focus:outline-none {{ end }}">{{ $repoOwner }}/{{ .Name }}</a> 37 + {{- $label := .Name -}} 38 + {{- if $fullName -}}{{- $label = print $repoOwner "/" .Name -}}{{- end -}} 39 + {{- if $cardLink -}} 40 + <span class="truncate min-w-0">{{ $label }}</span> 31 41 {{- else -}} 32 - <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="truncate min-w-0 {{ if $compact }} focus:outline-none {{ end }}">{{ .Name }}</a> 42 + <a href="/{{ $repoOwner }}/{{ .Slug }}" data-nav-result class="truncate min-w-0 {{ if $compact }} focus:outline-none {{ end }}">{{ $label }}</a> 33 43 {{- end -}} 34 44 </div> 35 45 {{ if and $starButton $root.LoggedInUser }} ··· 47 57 {{ if .RepoStats }} 48 58 {{ block "repoStats" .RepoStats }}{{ end }} 49 59 {{ end }} 60 + {{ if $cardLink }} 61 + </a> 62 + {{ else }} 50 63 </div> 64 + {{ end }} 51 65 {{ end }} 52 66 {{ end }} 53 67
+1 -1
input.css
··· 200 200 201 201 @layer components { 202 202 .btn { 203 - @apply relative z-10 inline-flex overflow-hidden items-center justify-center 203 + @apply relative z-0 inline-flex overflow-hidden items-center justify-center 204 204 min-h-[32px] px-2 py-[6px] gap-1.5 205 205 rounded border border-gray-200 dark:border-gray-700 206 206 bg-white dark:bg-gray-800