appview/pages/pull: use js to trigger backdrop opacity #1006

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

+28 -23

1 changed file

Diff round #0

expand all

unified split

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  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  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 -  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>