Merge pull request #116 from 5andu/flash-auto-disappearance

Flash auto disappearance
ryanckulp · Dec 28, 2023 · f5a5b94 · f5a5b94
2 parents 2c274ad + 95d5d98
commit f5a5b94
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/app/views/shared/_flash.html.erb b/app/views/shared/_flash.html.erb
@@ -4,7 +4,7 @@
   <div class="md:col-span-1"></div>
   <div class="flex justify-center">
     <% if flash[:alert].present? %>
-      <div id="toast-warning" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100" role="alert">
+      <div id="toast-warning" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
         <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg">
             <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
             <span class="sr-only">Warning icon</span>
@@ -18,7 +18,7 @@
     <% end %>
 
     <% if flash[:notice].present? %>
-    <div id="toast-success" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100" role="alert">
+      <div id="toast-success" class="fixed z-20 flex mx-auto top-5 items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow-md border border-gray-100 animate-[flashfade_4s_both]" data-controller="removals" data-action="animationend->removals#remove" role="alert">
         <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg">
             <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="sr-only">Check icon</span>
@@ -41,4 +41,11 @@
       this.parentElement.remove();
     });
   }
+
+  // Remove flash messages after the animation ends
+  document.addEventListener('animationend', function(event) {
+    if (event.animationName === 'flashfade') {
+      event.target.remove();
+    }
+  });
 </script>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
@@ -16,7 +16,10 @@ module.exports = {
       // custom color palette for branding, see https://tailwindcss.com/docs/customizing-colors
       colors: {
         primary: colors.lime
-      }
+      },
+      keyframes: {
+        flashfade: { "0%, 100%": { opacity: "0" }, "5%, 80%": { opacity: "1" } },
+      },
     },
   },
   plugins: [