Style toast templates

tomik-z-cech · Feb 6, 2024 · be40cc1 · be40cc1
1 parent 5c76aca
commit be40cc1
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 14 deletions.
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -142,7 +142,7 @@ p, th {
 header {
     background-color: var(--light-blue);
     height: 12vh;
-    border-bottom: 2px solid var(--black);
+    border-bottom: 2px solid var(--dark-blue);
 }
 
 #logo-image {
@@ -196,6 +196,11 @@ header {
     color: var(--light-gold)!important;
 }
 
+.nav-link {
+    padding-left: 0!important;
+    padding-right: 0!important;
+}
+
 @media screen and (max-width: 991px) {
     #logo-container {
         display: flex;
@@ -222,7 +227,7 @@ footer {
     background-color: var(--light-blue);
     padding: 5px 0;
     width: 100%;
-    border-top: 2px solid var(--black);
+    border-top: 2px solid var(--dark-blue);
     height: 10vh;
 }
 
@@ -473,6 +478,39 @@ input[type=checkbox]:checked {
     outline: 2px solid var(--dark-blue);
 }
 
+/** ---------------------- TOASTS ------------------------ **/
+
+.message-container {
+    position: fixed;
+    bottom: 13vh;
+    right: 5vw;
+    z-index: 999;
+}
+
+.custom-toast {
+    overflow: visible;
+}
+
+.toast {
+    border-radius: 0px;
+    border: 1px solid var(--dark-blue)!important;
+    font-family: var(--header-font);
+}
+
+.toast-header {
+    background-color: var(--light-blue);
+    border-radius: 0px!important;
+    color:var(--white);
+}
+
+.toast-body {
+    color: var(--dark-blue);
+}
+
+.toast-capper {
+    height: 2px;
+}
+
 /** ---------------------- PAGINATOR ------------------------ **/
 
 .pagination-nav {

diff --git a/templates/base.html b/templates/base.html
@@ -29,13 +29,6 @@
     {% block core_js %}
     <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
-        <script type="text/javascript">
-            $('.toast').toast('show');
-        </script>
-    {% endblock %}
-
-    <!-- Block for extra JS scripts -->
-    {% block extra_js %}
     {% endblock %}
 
     <!-- FavIcon -->
@@ -76,5 +69,13 @@
             <img src="{% static 'images/favicon.png' %}" alt="Loader">
         </div>
     </div>
+    <!-- Block for extra JS scripts -->
+    {% block extra_js %}
+            <!-- Toasts -->
+            <script type="text/javascript">
+                let newToast = new bootstrap.Toast($('.toast'));
+                newToast.show();
+            </script>
+    {% endblock %}
 </body>
 </html>
diff --git a/templates/header.html b/templates/header.html
@@ -1,6 +1,6 @@
 {% load static %}
 
-<header class="container-fluid" id="header">
+<header class="container-fluid w-100" id="header">
   <div class="row">
     <div class="col-12 col-lg-4">
       <a href="{% url 'home' %}" aria-label="Home" id="logo-container" class="w-100">

diff --git a/templates/toasts/error.html b/templates/toasts/error.html
@@ -1 +1,13 @@
-Error
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
+    <div class="toast-header">
+        <strong class="me-auto">
+            <i class="bi bi-x-circle"></i>
+            &nbsp;
+            Oops ! 
+        </strong>
+        <button type="button" class="btn-close shadow-none" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+        {{ message }}
+    </div>
+</div>
diff --git a/templates/toasts/info.html b/templates/toasts/info.html
@@ -1 +1,13 @@
-Info
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
+    <div class="toast-header">
+        <strong class="me-auto">
+            <i class="bi bi-info-circle"></i>
+            &nbsp;
+            Notice
+        </strong>
+        <button type="button" class="btn-close shadow-none" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+        {{ message }}
+    </div>
+</div>
diff --git a/templates/toasts/success.html b/templates/toasts/success.html
@@ -1 +1,13 @@
-Succes
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
+    <div class="toast-header">
+        <strong class="me-auto">
+            <i class="bi bi-check-circle"></i>
+            &nbsp;
+            Great
+        </strong>
+        <button type="button" class="btn-close shadow-none" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+        {{ message }}
+    </div>
+</div>
diff --git a/templates/toasts/warning.html b/templates/toasts/warning.html
@@ -1 +1,13 @@
-Warning
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
+    <div class="toast-header">
+        <strong class="me-auto">
+            <i class="bi bi-exclamation-circle"></i>
+            &nbsp;
+            Caution
+        </strong>
+        <button type="button" class="btn-close shadow-none" data-bs-dismiss="toast" aria-label="Close"></button>
+    </div>
+    <div class="toast-body">
+        {{ message }}
+    </div>
+</div>