From be40cc1431dc1394c6d53423c605bd844daa3fb7 Mon Sep 17 00:00:00 2001
From: tomik-z-cech <tkubancik@gmail.com>
Date: Tue, 6 Feb 2024 17:16:41 +0000
Subject: [PATCH] Style toast templates

---
 static/css/styles.css         | 42 +++++++++++++++++++++++++++++++++--
 templates/base.html           | 15 +++++++------
 templates/header.html         |  2 +-
 templates/toasts/error.html   | 14 +++++++++++-
 templates/toasts/info.html    | 14 +++++++++++-
 templates/toasts/success.html | 14 +++++++++++-
 templates/toasts/warning.html | 14 +++++++++++-
 7 files changed, 101 insertions(+), 14 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index f85e52f..38ded03 100644
--- 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
index 27a2960..203c08c 100644
--- 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>
\ No newline at end of file
diff --git a/templates/header.html b/templates/header.html
index 1935784..c8b796f 100644
--- 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
index d3807d3..5ec81c5 100644
--- a/templates/toasts/error.html
+++ b/templates/toasts/error.html
@@ -1 +1,13 @@
-Error
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/templates/toasts/info.html b/templates/toasts/info.html
index 5004b29..d785380 100644
--- a/templates/toasts/info.html
+++ b/templates/toasts/info.html
@@ -1 +1,13 @@
-Info
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/templates/toasts/success.html b/templates/toasts/success.html
index 2b10e42..c74aece 100644
--- a/templates/toasts/success.html
+++ b/templates/toasts/success.html
@@ -1 +1,13 @@
-Succes
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/templates/toasts/warning.html b/templates/toasts/warning.html
index 147336d..eef5537 100644
--- a/templates/toasts/warning.html
+++ b/templates/toasts/warning.html
@@ -1 +1,13 @@
-Warning
\ No newline at end of file
+<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>
\ No newline at end of file