fix live flashes not dismissable by click

changelog.md

@@ -5,6 +5,8 @@
 - Add bottom padding to page
 - Make pipeline step not require content
 - Make content previews resizable
+- Fix live flashes not dismissable by click
+- Fix disconnection modal not displaying
 
 # v0.1.12
 - Code quality fixes

lib/memex_web/components/layouts/app.html.heex

@@ -1,18 +1,45 @@
-<main role="main" class="min-h-full min-w-full">
+<main role="main" class="pb-8 min-w-full">
   <header>
     <.topbar current_user={assigns[:current_user]} />
 
     <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
-      <p :if={@flash["info"]} class="alert alert-info" role="alert">
+      <p
-        <%= @flash["info"] %>
+        :if={@flash && @flash |> Map.has_key?("info")}
+        class="alert alert-info cursor-pointer"
+        role="alert"
+        phx-click="lv:clear-flash"
+        phx-value-key="info"
+      >
+        <%= live_flash(@flash, :info) %>
       </p>
-      <p :if={@flash["error"]} class="alert alert-danger" role="alert">
+
-        <%= @flash["error"] %>
+      <p
+        :if={@flash && @flash |> Map.has_key?("error")}
+        class="alert alert-danger cursor-pointer"
+        role="alert"
+        phx-click="lv:clear-flash"
+        phx-value-key="error"
+      >
+        <%= live_flash(@flash, :error) %>
       </p>
     </div>
   </header>
 
-  <div class="pb-4 mx-4 sm:mx-8 md:mx-16">
+  <div class="mx-4 sm:mx-8 md:mx-16">
     <%= @inner_content %>
   </div>
 </main>
+
+<div
+  id="disconnect"
+  class="z-50 fixed opacity-0 bottom-8 right-12 px-8 py-4 w-max h-max
+  border border-primary-400 shadow-lg rounded-lg bg-primary-900 text-primary-400
+  flex justify-center items-center space-x-4
+  transition-opacity ease-in-out duration-500 delay-[2000ms]"
+>
+  <i class="fas fa-fade text-md fa-satellite-dish"></i>
+
+  <h1 class="title text-md">
+    <%= gettext("Reconnecting...") %>
+  </h1>
+</div>

lib/memex_web/components/layouts/live.html.heex

@@ -1,45 +0,0 @@
-<main class="pb-8 min-w-full">
-  <header>
-    <.topbar current_user={assigns[:current_user]} />
-
-    <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
-      <p
-        :if={@flash && @flash |> Map.has_key?("info")}
-        class="alert alert-info"
-        role="alert"
-        phx-click="lv:clear-flash"
-        phx-value-key="info"
-      >
-        <%= live_flash(@flash, "info") %>
-      </p>
-
-      <p
-        :if={@flash && @flash |> Map.has_key?("error")}
-        class="alert alert-danger"
-        role="alert"
-        phx-click="lv:clear-flash"
-        phx-value-key="error"
-      >
-        <%= live_flash(@flash, "error") %>
-      </p>
-    </div>
-  </header>
-
-  <div class="mx-4 sm:mx-8 md:mx-16">
-    <%= @inner_content %>
-  </div>
-</main>
-
-<div
-  id="disconnect"
-  class="z-50 fixed opacity-0 bottom-12 right-12 px-8 py-4 w-max h-max
-  border border-primary-400 shadow-lg rounded-lg bg-primary-900 text-primary-400
-  flex justify-center items-center space-x-4
-  transition-opacity ease-in-out duration-500 delay-[2000ms]"
->
-  <i class="fas fa-fade text-md fa-satellite-dish"></i>
-
-  <h1 class="title text-md">
-    <%= gettext("Reconnecting...") %>
-  </h1>
-</div>

priv/gettext/de/LC_MESSAGES/default.po

@@ -12,7 +12,7 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "X-Generator: Translate Toolkit 3.7.4\n"
 
-#: lib/memex_web/components/layouts/live.html.heex:43
+#: lib/memex_web/components/layouts/app.html.heex:43
 #, elixir-autogen, elixir-format
 msgid "Reconnecting..."
 msgstr ""

priv/gettext/default.pot

@@ -10,7 +10,7 @@
 msgid ""
 msgstr ""
 
-#: lib/memex_web/components/layouts/live.html.heex:43
+#: lib/memex_web/components/layouts/app.html.heex:43
 #, elixir-autogen, elixir-format
 msgid "Reconnecting..."
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -11,7 +11,7 @@ msgstr ""
 "Language: en\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
 
-#: lib/memex_web/components/layouts/live.html.heex:43
+#: lib/memex_web/components/layouts/app.html.heex:43
 #, elixir-autogen, elixir-format
 msgid "Reconnecting..."
 msgstr ""