alice.pds.demo.boltless.dev / core
This repository has no description
0
Fork 0

Configure Feed

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

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>

author
oppiliappan committer did:plc:wshs7t2adsemcrrd4snkeq… date (Jan 22, 2026, 4:07 PM UTC) commit 466754c4 parent c1c15026 change-id lnznyxvm
+28 -23
+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>