Merge pull request #66 from go-bazzinga/rupansh/ux-fixes

Fix Backdrop blur on mobile & fix video playback on ios

.dockerignore

@@ -1,7 +1,7 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
-!/target/x86_64-unknown-linux-musl
+!/target/x86_64-unknown-linux-musl/release/hot-or-not-web-leptos-ssr
 !/target/site
 
 # These are backup files generated by rustfmt

src/component/modal.rs

@@ -14,7 +14,7 @@ pub fn Modal(#[prop(into)] show: RwSignal<bool>, children: Children) -> impl Int
                 }
             }
 
-            class="cursor-pointer modal-bg w-screen h-screen absolute left-0 top-0 bg-black/60 z-50 justify-center items-center"
+            class="cursor-pointer modal-bg w-screen h-screen absolute left-0 top-0 bg-black/60 z-[99] justify-center items-center"
             style:display=move || if show() { "flex" } else { "none" }
         >
             <div class="w-2/5 h-2/5 cursor-auto flex-col flex justify-around bg-neutral-900 rounded-md divide-y-2 divide-neutral-800">

src/component/nav.rs

@@ -41,7 +41,7 @@ pub fn NavBar() -> impl IntoView {
     });
 
     view! {
-        <div class="flex flex-row justify-between px-4 py-5 w-full bg-transparent fixed left-0 bottom-0">
+        <div class="flex flex-row justify-between px-4 py-5 w-full bg-transparent fixed left-0 bottom-0 z-50">
             <NavIcon idx=0 href=home_path icon=icondata::TbHome cur_selected=cur_selected/>
             <NavIcon
                 idx=1

src/page/post_view/video_loader.rs

@@ -48,12 +48,13 @@ pub fn BgView(
     );
 
     view! {
-        <div
-            _ref=container_ref
-            class="bg-black bg-cover bg-center h-full w-full -z-10"
-            style:background-image=move || format!("url({})", bg_url(&uid))
-        >
-            <div class="grid grid-cols-1 h-full w-full justify-items-center backdrop-blur-lg bg-transparent">
+        <div _ref=container_ref class="bg-transparent w-full h-full relative">
+            <div
+                class="absolute top-0 left-0 bg-cover bg-center w-full h-full z-[1] blur-lg"
+                style:background-color="rgb(0, 0, 0)"
+                style:background-image=move || format!("url({})", bg_url(&uid))
+            ></div>
+            <div class="grid grid-cols-1 h-full w-full justify-items-center bg-transparent absolute top-0 left-0 z-[2]">
                 {children()}
             </div>
         </div>
@@ -106,11 +107,12 @@ pub fn VideoView(idx: usize, muted: RwSignal<bool>, scroll_fuse: RwSignal<bool>)
         <video
             on:click=move |_| muted.update(|m| *m = !*m)
             _ref=container_ref
-            class="object-contain h-screen cursor-pointer backdrop-blur-lg"
+            class="object-contain h-screen cursor-pointer"
             poster=view_bg_url
             src=view_video_url
             loop
             muted
+            playsinline
             preload="auto"
         ></video>
     }