tjh.dev
forked from
tangled.org/core
Mirror of @tangled.org/core. Running on a Raspberry Pi Zero 2
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
+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;
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
+
};
26
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)');
···
61
45
// switched to mobile - close
62
46
details.open = false;
63
47
}
48
+
updateBackdrop();
64
49
});
50
+
51
+
// close when clicking backdrop
52
+
if (backdrop) {
53
+
backdrop.addEventListener('click', () => {
54
+
if (!isDesktop()) {
55
+
details.open = false;
56
+
}
57
+
});
58
+
}
65
59
})();
66
60
</script>
67
61
{{ end }}
···
135
109
{{ define "subsPanel" }}
136
110
{{ $root := index . 2 }}
137
111
{{ $pull := $root.Pull }}
138
-
139
112
<!-- backdrop overlay - only visible on mobile when open -->
140
-
<div class="
141
-
fixed inset-0 bg-black/50 z-50 md:hidden opacity-0
142
-
pointer-events-none transition-opacity duration-300
143
-
has-[~#subs_details[open]]:opacity-100 has-[~#subs_details[open]]:pointer-events-auto">
144
-
</div>
113
+
<div id="bottomSheetBackdrop" class="fixed inset-0 bg-black/50 md:hidden opacity-0 pointer-events-none transition-opacity duration-300 z-40"></div>
145
114
<!-- right panel - bottom sheet on mobile, side panel on desktop -->
146
115
<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">
147
-
<details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
116
+
<details open id="bottomSheet" class="rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
148
117
<summary class="
149
118
flex gap-4 items-center justify-between
150
119
rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12
···
163
142
{{ $pull := $root.Pull }}
164
143
{{ $latest := $pull.LastRoundNumber }}
165
144
<div class="flex items-center gap-2 text-sm">
166
-
<!--{{ if $root.IsInterdiff }}
167
-
<span>
168
-
viewing interdiff of
169
-
<span class="font-mono">#{{ $root.ActiveRound }}</span>
170
-
and
171
-
<span class="font-mono">#{{ sub $root.ActiveRound 1 }}</span>
172
-
</span>
173
-
{{ else }}
174
-
{{ if ne $root.ActiveRound $latest }}
175
-
<span>(outdated)</span>
176
-
<span class="before:content-['·']"></span>
177
-
<a class="underline" href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $latest }}?{{ safeUrl $root.DiffOpts.Encode }}">
178
-
view latest
179
-
</a>
180
-
{{ end }}
181
-
{{ end }}-->
182
145
<span class="md:hidden inline">
183
146
<span class="inline group-open:hidden">{{ i "chevron-up" "size-4" }}</span>
184
147
<span class="hidden group-open:inline">{{ i "chevron-down" "size-4" }}</span>