remove redirect from modal

assets/build.mjs

@@ -0,0 +1,40 @@
+// const esbuild = require("esbuild");
+import * as esbuild from "esbuild";
+
+const args = process.argv.slice(2);
+const watch = args.includes("--watch");
+const deploy = args.includes("--deploy");
+
+const loader = {
+  // Add loaders for images/fonts/etc, e.g. { '.svg': 'file' }
+};
+
+const plugins = [
+  // Add and configure plugins here
+];
+
+let opts = {
+  entryPoints: ["js/app.js", "js/app_tailwind.js"],
+  bundle: true,
+  target: "es2017",
+  outdir: "../priv/static/assets",
+  logLevel: "info",
+  loader,
+  plugins,
+};
+
+if (deploy) {
+  opts = {
+    ...opts,
+    minify: true,
+  };
+}
+
+// const promise = esbuild.build(opts)
+const ctx = await esbuild.context(opts);
+
+if (watch) {
+  await ctx.watch();
+}
+
+await ctx.dispose(); // To free resources

config/dev.exs

@@ -15,7 +15,7 @@ config :quadblockquiz, QuadblockquizWeb.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "build.js",
+      "build.mjs",
       "--watch",
       cd: Path.expand("../assets", __DIR__)
     ],

lib/quadblockquiz_web/live/live_helpers.ex

@@ -56,6 +56,7 @@ defmodule QuadblockquizWeb.LiveHelpers do
 
   defp hide_modal(js \\ %JS{}) do
     js
+    |> JS.push("unpause")
     |> JS.hide(to: "#modal", transition: "fade-out")
     |> JS.hide(to: "#modal-content", transition: "fade-out-scale")
   end

lib/quadblockquiz_web/live/tetris_live.ex

@@ -137,7 +137,7 @@ defmodule QuadblockquizWeb.TetrisLive do
                 </div>
                 <div class="column column-50">
                 <%= if @modal do %>
-                  <.modal return_to={Routes.tetris_path(QuadblockquizWeb.Endpoint, :tetris)}>
+                  <.modal>
                     <.live_component
                       module={QuadblockquizWeb.QuizModalComponent}
                       id={1}

lib/quadblockquiz_web/templates/layout/app.html.heex

@@ -1,5 +1,7 @@
 <main role="main" class="container">
-  <p class="alert alert-info" role="alert"><%= Phoenix.Flash.get(@flash, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= Phoenix.Flash.get(@flash, :error) %></p>
+  <div :if={map_size(@flash) > 0}>
+    <p class="alert alert-info" role="alert"><%= Phoenix.Flash.get(@flash, :info) %></p>
+    <p class="alert alert-danger" role="alert"><%= Phoenix.Flash.get(@flash, :error) %></p>
+  </div>
   <%= @inner_content %>
 </main>

lib/quadblockquiz_web/templates/layout/live.html.heex

@@ -1,9 +1,22 @@
 <main role="main" class="container">
-  <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
+  <% show_flash? = map_size(@flash) > 0 %>
+  <p
+    :if={show_flash?}
+    class="alert alert-info"
+    role="alert"
+    phx-click="lv:clear-flash"
+    phx-value-key="info"
+  >
     <%= live_flash(@flash, :info) %>
   </p>
 
-  <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
+  <p
+    :if={show_flash?}
+    class="alert alert-danger"
+    role="alert"
+    phx-click="lv:clear-flash"
+    phx-value-key="error"
+  >
     <%= live_flash(@flash, :error) %>
   </p>