notifications test using notifyjs

apps/static/js/base.js

@@ -51,6 +51,21 @@ $(document).ready(function() {
         });
     });
 
+    $.notify.addStyle("bootstrap", {
+        html: 
+            '<div class="toast mt-3 overflow-hidden" role="alert">' +
+                '<div class="toast-body">' +
+                    '<span data-notify-text></span>' +
+                '</div>' +
+            "</div>"
+    });
+
+    $.notify.defaults({
+        globalPosition: "bottom right",
+        animationType: "fade",
+        className: "success"
+    });
+
     // Activate datepickers
     // $(".input-group.date").datepicker({format: "yyyy-mm-dd"});
 

apps/templates/includes/footer.html

@@ -4,6 +4,9 @@
             <span>&copy; 2024 PYRSS</span>
         </div>
         <ul class="nav col-md-4 d-flex justify-content-end list-unstyled">
+            <li class="ms-3">
+                <button type="button" class="btn btn-link text-reset" onclick="$.notify('This is a test notification, how does it look?', 'bootstrap')">Test Notify</button>
+            </li>
             <li class="ms-3">
                 <a href="https://gitea.cor.bz/corbz/PYRSS-Website" class="text-reset" target="_blank">
                     <i class="bi bi-git fs-5"></i>

apps/templates/layouts/base.html

@@ -63,6 +63,7 @@
         <script src="{% static '/js/jquery-3.6.0.min.js' %}"></script>
         <script src="https://cdn.datatables.net/2.0.5/js/dataTables.min.js"></script>
         <script src="https://cdn.datatables.net/select/2.0.1/js/dataTables.select.min.js"></script>
+        <script src="{% static '/js/notify.min.js' %}"></script>
         <script src="{% static '/js/bootstrap.bundle.min.js' %}"></script>
         <script src="{% static '/js/select2.min.js' %}"></script>
         <script src="{% static '/js/toasts.js' %}"></script>