lewis.moe
Monorepo for Tangled
appview/pages/pull: use js to trigger backdrop opacity
we have several nested details tags here and i can't seem to figure it
out using plain css.
Signed-off-by: oppiliappan <me@oppi.li>
authored by
oppiliappan
and committed by
+28
-23
appview/pages/templates/repo/pulls/pull.html
+28
-23
appview/pages/templates/repo/pulls/pull.html
···
22
22
<script>
23
23
(function() {
24
24
const details = document.getElementById('bottomSheet');
25
+
const backdrop = document.getElementById('bottomSheetBackdrop');
25
26
const isDesktop = () => window.matchMedia('(min-width: 768px)').matches;
26
27
28
+
// function to update backdrop
29
+
const updateBackdrop = () => {
30
+
if (backdrop) {
31
+
if (details.open && !isDesktop()) {
32
+
backdrop.classList.remove('opacity-0', 'pointer-events-none');
33
+
backdrop.classList.add('opacity-100', 'pointer-events-auto');
34
+
} else {
35
+
backdrop.classList.remove('opacity-100', 'pointer-events-auto');
36
+
backdrop.classList.add('opacity-0', 'pointer-events-none');
37
+
}
38
+
}
39
+
};
40
+
27
41
// close on mobile initially
28
42
if (!isDesktop()) {
29
43
details.open = false;
30
44
}
45
+
updateBackdrop(); // initialize backdrop
31
46
32
47
// prevent closing on desktop
33
48
details.addEventListener('toggle', function(e) {
34
49
if (isDesktop() && !this.open) {
35
50
this.open = true;
36
51
}
52
+
updateBackdrop();
37
53
});
38
54
39
55
const mediaQuery = window.matchMedia('(min-width: 768px)');
···
45
61
// switched to mobile - close
46
62
details.open = false;
47
63
}
64
+
updateBackdrop();
48
65
});
66
+
67
+
// close when clicking backdrop
68
+
if (backdrop) {
69
+
backdrop.addEventListener('click', () => {
70
+
if (!isDesktop()) {
71
+
details.open = false;
72
+
}
73
+
});
74
+
}
49
75
})();
50
76
</script>
51
77
{{ end }}
···
109
135
{{ define "subsPanel" }}
110
136
{{ $root := index . 2 }}
111
137
{{ $pull := $root.Pull }}
112
-
113
138
<!-- backdrop overlay - only visible on mobile when open -->
114
-
<div class="
115
-
fixed inset-0 bg-black/50 z-50 md:hidden opacity-0
116
-
pointer-events-none transition-opacity duration-300
117
-
has-[~#subs_details[open]]:opacity-100 has-[~#subs_details[open]]:pointer-events-auto">
118
-
</div>
139
+
<div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-40"></div>
119
140
<!-- right panel - bottom sheet on mobile, side panel on desktop -->
120
141
<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">
121
-
<details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
142
+
<details open id="bottomSheet" class="rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
122
143
<summary class="
123
144
flex gap-4 items-center justify-between
124
145
rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12
···
142
163
{{ $pull := $root.Pull }}
143
164
{{ $latest := $pull.LastRoundNumber }}
144
165
<div class="flex items-center gap-2 text-sm">
145
-
<!--{{ if $root.IsInterdiff }}
146
-
<span>
147
-
viewing interdiff of
148
-
<span class="font-mono">#{{ $root.ActiveRound }}</span>
149
-
and
150
-
<span class="font-mono">#{{ sub $root.ActiveRound 1 }}</span>
151
-
</span>
152
-
{{ else }}
153
-
{{ if ne $root.ActiveRound $latest }}
154
-
<span>(outdated)</span>
155
-
<span class="before:content-['·']"></span>
156
-
<a class="underline" href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $latest }}?{{ safeUrl $root.DiffOpts.Encode }}">
157
-
view latest
158
-
</a>
159
-
{{ end }}
160
-
{{ end }}-->
161
166
<span class="md:hidden inline">
162
167
<span class="inline group-open:hidden">{{ i "chevron-up" "size-4" }}</span>
163
168
<span class="hidden group-open:inline">{{ i "chevron-down" "size-4" }}</span>