feat(dynamic forms): Ajax/JS/Jquery UI to greatly improve UX

concert_elephant/static/css/project.css

@@ -64,3 +64,41 @@ thead.table-custom {
 .link-custom:hover {
   color: #93B1A6;
 }
+
+.alert {
+    text-align: center;
+}
+
+/* Custom styles for jQuery UI Autocomplete */
+.ui-autocomplete {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000; /* Ensure the dropdown is above other content */
+    border: 1px solid #ccc;
+    background-color: #F8F8FF;
+    width: auto; /* Match the width of the input field */
+}
+
+.ui-menu-item {
+    padding: 8px 12px;
+    cursor: pointer;
+}
+
+.ui-menu-item:hover {
+    background-color: #93B1A6;
+}
+
+.ui-helper-hidden-accessible{
+    display:none;
+}
+
+.modal-messages {
+  width: 75%;
+  margin: 0 auto;
+  padding: 5px;
+}
+
+.country-select-flag {
+display: none;
+}

concert_elephant/templates/base.html

@@ -23,8 +23,6 @@
             crossorigin="anonymous"
             referrerpolicy="no-referrer" />
       <!-- Your stuff: Third-party CSS libraries go here -->
-      <link rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.css" />
       <!-- This file stores project-specific CSS -->
       <link href="{% static 'css/project.css' %}" rel="stylesheet" />
     {% endblock css %}
@@ -42,6 +40,9 @@
       <script src="https://code.jquery.com/jquery-3.7.0.js"
               integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
               crossorigin="anonymous"></script>
+      <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"
+              integrity="sha256-xLD7nhI62fcsEZK2/v8LsBcb4lG7dgULkuXoXB/j91c="
+              crossorigin="anonymous"></script>
       <!-- Your stuff: Third-party javascript libraries go here -->
       <!-- place project specific Javascript in this file -->
       <script defer src="{% static 'js/project.js' %}"></script>
@@ -78,6 +79,13 @@
       });
     </script>
       {% endcomment %}
+      <script type="text/javascript">
+        $(document).ready(function() {
+          setTimeout(function() {
+            $('.alert-dismissible').fadeOut('slow');
+          }, 2000);
+        });
+      </script>
     {% endblock inline_javascript %}
   </body>
 </html>