shibao/cannery
shibao
/
cannery
1
2
Fork 1
Code Issues 11 Pull Requests Projects 1 Releases 33 Wiki Activity

add back modal click-away

This commit is contained in:
shibao 2022-02-20 15:17:12 -05:00
parent 4946a6b119
commit 917f627933
1 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
lib/cannery_web/live/live_helpers.ex
View File

@ -38,24 +38,39 @@ defmodule CanneryWeb.LiveHelpers do
""" """
def modal(assigns) do def modal(assigns) do
~H""" ~H"""
<%= live_patch to: @return_to,
id: "modal-bg",
class:
"fade-in fixed z-10 left-0 top-0
w-full h-full overflow-hidden
p-8 flex flex-col justify-center items-center cursor-auto",
style: "background-color: rgba(0,0,0,0.4);",
phx_remove: hide_modal()
do %>
<span class="hidden"></span>
<% end %>
<div <div
id="modal" id="modal"
class="fade-in fixed z-10 left-0 top-0 class="fixed z-10 left-0 top-0 pointer-events-none
w-full h-full overflow-hidden w-full h-full overflow-hidden
p-8 flex flex-col justify-center items-center" p-8 flex flex-col justify-center items-center"
style="opacity: 1 !important; background-color: rgba(0,0,0,0.4);"
> >
<div <div
id="modal-content" id="modal-content"
class="fade-in-scale w-full max-w-3xl max-h-128 relative overflow-y-auto class="fade-in-scale w-full max-w-3xl max-h-128 relative pointer-events-auto overflow-y-auto
p-8 flex flex-col justify-center items-center
flex flex-col justify-start items-center flex flex-col justify-start items-center
bg-white border-2 rounded-lg" bg-white border-2 rounded-lg"
> >
<%= live_patch to: @return_to, <%= live_patch to: @return_to,
id: "close", id: "close",
class: class:
"absolute top-8 right-10 text-gray-500 hover:text-gray-800 transition-all duration-500 ease-in-out" "absolute top-8 right-10
do %> text-gray-500 hover:text-gray-800
transition-all duration-500 ease-in-out",
phx_remove: hide_modal()
do %>
<i class="fa-fw fa-lg fas fa-times"></i> <i class="fa-fw fa-lg fas fa-times"></i>
<% end %> <% end %>
@ -70,6 +85,7 @@ defmodule CanneryWeb.LiveHelpers do
def hide_modal(js \\ %JS{}) do def hide_modal(js \\ %JS{}) do
js js
|> JS.hide(to: "#modal", transition: "fade-out") |> JS.hide(to: "#modal", transition: "fade-out")
|> JS.hide(to: "#modal-bg", transition: "fade-out")
|> JS.hide(to: "#modal-content", transition: "fade-out-scale") |> JS.hide(to: "#modal-content", transition: "fade-out-scale")
end end
end end