toastify only

app/assets/stylesheets/application.toastify.css

@@ -0,0 +1,101 @@
+/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * customized by: pvincent
+ */
+
+ 
+ .toastify {
+    padding: 12px 20px;
+    color: #ffffff;
+    display: inline-block;
+    box-shadow: 0 6px 6px 3px rgba(0, 0, 0, 0.3), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
+    background: linear-gradient(135deg, #73a5ff, #5477f5);
+    position: fixed;
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+    border-radius: 2px;
+    cursor: text;
+    text-decoration: none;
+    max-width: calc(50% - 20px);
+    z-index: 50;
+}
+
+.toastify-notice {
+    background: linear-gradient(135deg, darkgreen, green);
+}
+
+.toastify-alert {
+    background: linear-gradient(135deg, darkred, red)
+}
+.toastify.on {
+    opacity: 1;
+    top: 0;
+}
+
+.toastify .toast-close {
+    background: transparent;
+    color: transparent;
+    margin-left: 1em;
+    padding: 0 5px;
+    border-radius: 25%;
+    border: 0;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1em;
+    opacity: 0;
+}
+
+.toastify:hover .toast-close {
+    background: white;
+    color: black;
+    opacity: 0.5;
+    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+
+.toastify-right {
+    right: 15px;
+}
+
+.toastify-left {
+    left: 15px;
+}
+
+.toastify-top {
+    top: -150px;
+}
+
+.toastify-bottom {
+    bottom: -150px;
+}
+
+.toastify-rounded {
+    border-radius: 25px;
+}
+
+.toastify-avatar {
+    width: 1.5em;
+    height: 1.5em;
+    margin: -7px 5px;
+    border-radius: 2px;
+}
+
+.toastify-center {
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    max-width: fit-content;
+}
+
+@media only screen and (max-width: 360px) {
+    .toastify-right, .toastify-left {
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
+        max-width: fit-content;
+    }
+}

app/javascript/application.js

@@ -1,10 +1,10 @@
-// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+// Turbo
 import "@hotwired/turbo-rails"
-import "controllers"
+Turbo.setProgressBarDelay(300)
 
-// Notyf
-import { Notyf } from 'notyf'
-window.Notyf=Notyf
+// Toastify
+import Toastify from 'toastify-js'
+window.Toastify=Toastify
 
-// Customize Turbo default behaviour
-Turbo.setProgressBarDelay(300)
+// Js Controllers
+import "controllers"

app/views/layouts/_notification.html.erb

@@ -2,9 +2,23 @@
   <script data-turbo-temporary>
     document.addEventListener('turbo:load',(e)=>{
 
-      const notyf=new Notyf({ duration: 5000, position: { x: 'center', y: 'top' } })
-      <% if flash.notice%> notyf.success('<%=flash.notice%>') <%end%>
-      <% if flash.alert%> notyf.error('<%=flash.alert%>') <%end%>
+      const common={
+        gravity: 'top',
+        position: 'center',
+        duration: 4000,
+        offset: { y: '1em' },
+        close: true
+      }
+      const notice={ className: 'toastify-notice text-black', ...common }
+      const alert={ className: 'text-black toastify-alert', ...common }
+
+      <% if flash.notice%>
+        Toastify({ text: '<%=flash.notice%>', ...notice}).showToast();
+      <%end%>
+
+      <% if flash.alert%>
+        Toastify({ text: '<%=flash.alert%>', ...alert}).showToast();
+      <%end%>
 
       // useful to prevent flickering from turbo preview
       Turbo.cache.exemptPageFromPreview()

app/views/layouts/application.html.erb

@@ -6,9 +6,6 @@
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
-
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>

bin/importmap

@@ -1,4 +1,6 @@
 #!/usr/bin/env ruby
+require 'rackup'
+module Rack; Handler = ::Rackup::Handler; end
 
-require_relative "../config/application"
-require "importmap/commands"
+require_relative '../config/application'
+require 'importmap/commands'

bin/rake

@@ -2,8 +2,6 @@
 require_relative '../config/boot'
 require 'rake'
 require 'rackup'
-module Rack
-  Handler = ::Rackup::Handler
-end
+module Rack; Handler = ::Rackup::Handler; end
 
 Rake.application.run

config/importmap.rb

@@ -6,5 +6,4 @@ pin '@hotwired/stimulus', to: 'stimulus.min.js'
 pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js'
 pin_all_from 'app/javascript/controllers', under: 'controllers'
 
-pin 'notyf' # @3.10.0
 pin 'toastify-js' # @1.12.0