Fix a bug with toast stacking on top - no hide

tomik-z-cech · Mar 2, 2024 · 6db5a0a · 6db5a0a
1 parent 437ab4f
commit 6db5a0a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 deletions.
diff --git a/items/templates/items/item_detail.html b/items/templates/items/item_detail.html
@@ -6,7 +6,7 @@
 {% block nav_name %}Shop{% endblock %}
 
 {% block extra_css %}
-<link rel="stylesheet" href="{% static 'css/items.css' %}">
+    <link rel="stylesheet" href="{% static 'css/items.css' %}">
 {% endblock %}
 
 {% block content %}
@@ -168,30 +168,30 @@ <h3>
             </div>
         </div>
         <!-- Only for logged in users -->
-            <div class="w-100 p-3 comments-background add-shadow mt-3">
-                    <!-- If no comment submitted yet, display form -->
-                    {% if user.is_authenticated %}
-                        {% if can_comment %}
-                        <div class="col-12 d-flex justify-content-start mb-3">
-                            <strong>Commenting as {{ user.username }} :</strong>
+        <div class="w-100 p-3 comments-background add-shadow mt-3">
+                <!-- If no comment submitted yet, display form -->
+                {% if user.is_authenticated %}
+                    {% if can_comment %}
+                    <div class="col-12 d-flex justify-content-start mb-3">
+                        <strong>Commenting as {{ user.username }} :</strong>
+                    </div>
+                    <form method="POST" id="commentForm" action="{% url 'submit-comment' item_pk=item.pk %}">
+                        {{ item_comment_form | crispy }}
+                        {% csrf_token %}
+                        <div class="col-12 d-flex justify-content-end mt-3">
+                            <button type="Submit" class="custom-button button-shadow mt-2 short-button" name="comment">Comment</button>
                         </div>
-                        <form method="POST" id="commentForm" action="{% url 'submit-comment' item_pk=item.pk %}">
-                            {{ item_comment_form | crispy }}
-                            {% csrf_token %}
-                            <div class="col-12 d-flex justify-content-end mt-3">
-                                <button type="Submit" class="custom-button button-shadow mt-2 short-button" name="comment">Comment</button>
-                            </div>
-                        </form>
-                        <!-- If form submitted, display message -->
-                        {% else %}
-                            Hold on tight, your comment is being approved !
-                        {% endif %}
+                    </form>
+                    <!-- If form submitted, display message -->
                     {% else %}
-                    <div class="col-12 d-flex justify-content-center align-items-center">
-                        <strong>Please Log In to comment ;)</strong>
-                    </div>
+                        Hold on tight, your comment is being approved !
                     {% endif %}
-            </div>
+                {% else %}
+                <div class="col-12 d-flex justify-content-center align-items-center">
+                    <strong>Please Log In to comment ;)</strong>
+                </div>
+                {% endif %}
+        </div>
         <div class="w-100 p-3 add-shadow mt-3 comments-background">
             {% if comments|length == 0%}
                 Be first to comment ;)

diff --git a/static/css/main.css b/static/css/main.css
@@ -341,7 +341,8 @@ input[type="radio"] {
     border: 1px solid var(--dark-background)!important;
     font-family: var(--main-font);
     max-height: 40vh;
-    overflow: scroll;
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 .toast-header {

diff --git a/templates/base.html b/templates/base.html
@@ -49,7 +49,7 @@
     {% include 'footer.html' %}
     <!-- Toasts -->
     {% if messages %}
-        <div class="message-container">
+        <div class="message-container" aria-live="polite" aria-atomic="true" >
             {% for message in messages %}
                 {% with message.level as level %}
                     {% if level == 40 %}
@@ -73,7 +73,7 @@
     </div>
     <!-- Block for extra JS scripts -->
     {% block extra_js %}
-            <!-- Toasts -->
+            <!-- Toasts JS logic -->
             <script type="text/javascript">
                 $(document).ready(function() {
                     if ($('.toast').length > 0) {

diff --git a/templates/toasts/toast_vault.html b/templates/toasts/toast_vault.html
@@ -1,6 +1,6 @@
 {% load static %}
 
-<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="3000">
     <div class="toast-header">
         <strong class="me-auto">
             <i class="bi bi-safe"></i>