rails_toastify 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ad106eeec4a5dc91967781e1012327953d768abee3af5d5868c72fc8c29706be
-  data.tar.gz: afa96d9999758b8c2820073ad06474afabaed7d6403b895d0e7f1284df9b3743
+  metadata.gz: 4c9016ace17fcc8e2c9752befff1bb4dbe57a9759016fcaf4645fad02f747da2
+  data.tar.gz: d53c5284e34737ba275d1a2938dd281fdfa49157b75820565070fbdbf4c63bf7
 SHA512:
-  metadata.gz: 950fe77e61917edbb1283a7330d76f45fd9a7b952f17eb99548e04080e1c09a5df9c2979ec98afbc71abfec67973b4e1e2009070bbf9139338315f24e597e8a4
-  data.tar.gz: 746f2e26fe44d665ed3f47adabb9e7105aca988b35841621be478619d784308b096ebd5b9009c9bec29f841cb769d317f6cde42635f59d5bf0dd5702f8f0742c
+  metadata.gz: a56648ac935a1a150cdf1833b520e6666aed710930b174bb81b3ad030de8a617f1bf553061ecc0f7c3600c9b45309c18b143a8a9ac7fb7bb073eecc792b6dbde
+  data.tar.gz: cc9cbaec8bd2eb43bff831ce1922abd37cd5946e12c8f8d20e0309f191db50866eaaac49fa47954adb65b23a569956717d8821102d02e2103319609a946f561d

data/CHANGELOG.md

@@ -1,3 +1,13 @@
+# 0.1.6
+
+- Fix css and js
+- Close toast on progress bar finish
+- Toast appear on top right
+  
+# 0.1.5
+
+- Adjustments CSS progress bar and shadow
+  
 # 0.1.4
 
 - Change CSS

data/app/assets/javascripts/rails_toastify.js

@@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
       const toast = createToast(message, type, duration);
       toastContainer.appendChild(toast);
       setTimeout(() => {
-        toast.classList.add('fade-out');
+        toast.classList.add('hide');
         toast.addEventListener('transitionend', () => toast.remove());
       }, duration);
     }
@@ -52,5 +52,4 @@ document.addEventListener('DOMContentLoaded', () => {
   
     return toast;
   }
-  
 });

data/app/assets/stylesheets/rails_toastify.css

@@ -12,13 +12,14 @@
     align-items: center;
     background-color: #fff;
     border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
     padding: 16px;
     margin: 8px;
     color: #333;
     position: relative;
-    transition: transform 0.5s ease-in-out;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     transform: translateX(100%);
+    max-width: 300px;
   }
 
   .toast.show {
@@ -27,22 +28,23 @@
 
   .toast.hide {
     transform: translateX(100%);
+    opacity: 0;
   }
 
-  .toast--success {
-    border-bottom: 5px solid #4caf50;
+  .toast--success .toast__progress-bar {
+    background-color: #4caf50;
   }
 
-  .toast--error {
-    border-bottom: 5px solid #f44336;
+  .toast--error .toast__progress-bar {
+    background-color: #f44336;
   }
 
-  .toast--info {
-    border-bottom: 5px solid #2196f3;
+  .toast--info .toast__progress-bar {
+    background-color: #2196f3;
   }
 
-  .toast--warning {
-    border-bottom: 5px solid #ff9800;
+  .toast--warning .toast__progress-bar {
+    background-color: #ff9800;
   }
 
   .toast__close-button {
@@ -67,7 +69,6 @@
     left: 0;
     width: 100%;
     height: 4px;
-    background-color: currentColor;
     animation: progress-bar 5s linear forwards;
   }
 
@@ -85,11 +86,8 @@
   }
 
   .toast {
-    @apply flex items-center bg-white rounded shadow p-4 my-2 text-gray-800 relative;
-  }
-
-  .toast {
-    @apply transition-transform duration-500 ease-in-out;
+    @apply flex items-center bg-white rounded-lg shadow-lg p-4 my-2 text-gray-800 relative max-w-sm;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
     transform: translateX(100%);
   }
   
@@ -99,22 +97,23 @@
   
   .toast.hide {
     transform: translateX(100%);
+    opacity: 0;
   }
 
-  .toast--success {
-    @apply border-b-4 border-green-500;
+  .toast--success .toast__progress-bar {
+    @apply bg-green-500;
   }
 
-  .toast--error {
-    @apply border-b-4 border-red-500;
+  .toast--error .toast__progress-bar {
+    @apply bg-red-500;
   }
 
-  .toast--info {
-    @apply border-b-4 border-blue-500;
+  .toast--info .toast__progress-bar {
+    @apply bg-blue-500;
   }
 
-  .toast--warning {
-    @apply border-b-4 border-yellow-500;
+  .toast--warning .toast__progress-bar {
+    @apply bg-yellow-500;
   }
 
   .toast__close-button {
@@ -126,7 +125,6 @@
 
   .toast__progress-bar {
     @apply absolute bottom-0 left-0 w-full h-1;
-    background-color: currentColor;
     animation: progress-bar 5s linear forwards;
   }
 

data/lib/rails_toastify/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsToastify
-  VERSION = "0.1.4"
+  VERSION = "0.1.6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_toastify
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.6
 platform: ruby
 authors:
 - Elton Santos