Monorepo for Tangled
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
+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
+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
+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
+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
+1
-1
appview/pages/templates/search/fragments/quick.html
+19
-5
appview/pages/templates/user/fragments/repoCard.html
+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
+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