Add toast

Author: scheb

web_app/static/scss/bootstrap.scss

@@ -87,7 +87,7 @@ $box-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
 //@import "~bootstrap/scss/progress";
 @import "~bootstrap/scss/list-group";
 @import "~bootstrap/scss/close";
-//@import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/toasts";
 //@import "~bootstrap/scss/modal";
 //@import "~bootstrap/scss/tooltip";
 //@import "~bootstrap/scss/popover";

web_app/static/scss/content.scss

@@ -449,3 +449,17 @@ h2.home {
         max-height: 10rem;
     }
 }
+
+
+// Toast
+.toast.text-bg-dark {
+    a {
+        color: tint-color($primary, 30%);
+        text-decoration: none;
+
+        &:hover {
+            color: $primary;
+            text-decoration: underline;
+        }
+    }
+}

web_app/static/ts/application.ts

@@ -1,7 +1,7 @@
 import {DetailList} from "./lists"
 import {ChartContainer, RecipesContainer} from "./results"
 import {SearchBox} from "./search"
-import {Collapse, ScrollSpy, Tab} from "bootstrap"
+import {Collapse, ScrollSpy, Tab, Toast} from "bootstrap"
 import {Analyzer} from "./filtering";
 import { registerLicense } from '@syncfusion/ej2-base';
 import {InteractionElement} from "./interaction";
@@ -56,3 +56,28 @@ if (toc) {
         rootMargin: "-70px 0px -25% 0px",  // Top: Account for sticky header, Bottom: Ignore the bottom 25% of the viewport
     })
 }
+
+// Init toast
+function showToast(): boolean {
+    const toastDismissed = localStorage.getItem('jobToastDismissed')
+    if (!toastDismissed) {
+        return true
+    }
+
+    const toastDismissedTime = Number(toastDismissed)
+    if (isNaN(toastDismissedTime)) {
+        return true
+    }
+
+    const showToastTime = new Date().getTime() - 3*24*3600*1000 // 3 days
+    return showToastTime > toastDismissedTime
+}
+
+const toastElement = document.getElementById('jobToast')
+if (toastElement && showToast()) {
+    toastElement.addEventListener('hide.bs.toast', () => {
+        localStorage.setItem('jobToastDismissed', (new Date()).getTime() as unknown as string)
+    })
+    const toast = Toast.getOrCreateInstance(toastElement, {'autohide': false})
+    toast.show()
+}

web_app/templates/base.html

@@ -110,6 +110,18 @@ <h5>About</h5>
         </div>
     </div>
 </footer>
+
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+    <div id="jobToast" class="toast align-items-center text-bg-dark" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div class="toast-body">
+                Hello, world! 👋 This is Christian, the creator of Beer-Analytics. I'm currently looking for new opportunities as a software engineer. If you're interested in working together, let's connect! Check out my <a href="https://www.linkedin.com/in/christianscheb/" target="_blank">LinkedIn</a> or <a href="mailto:mail@christianscheb.de">drop me an email</a>. Cheers! 🍻
+            </div>
+            <button type="button" class="btn-close btn-close-white p-2 me-2 m-auto" data-bs-dismiss="toast" aria-label="Dismiss" title="Dismiss"></button>
+        </div>
+    </div>
+</div>
+
 {% web_analytics %}
 </body>
 </html>