corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

toast display functionality

Browse Source 
still needs a fadeout timer
This commit is contained in:
Corban-Lee Jones 2024-03-25 00:32:17 +00:00
parent 1a0d915e47
commit 8289d89907
4 changed files with 49 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/static/css/index.css
View File

@ -231,4 +231,15 @@ body {
}
.draw-border:hover::after {
transition-delay: 0s, 0.15s, 0s;
}
/* Toasts */
.toast {
z-index: 2 !important;
}
.toast .progress-bar {
border-radius: 0;
}

2
apps/static/css/wavebtn.css
View File

@ -20,7 +20,7 @@
user-select: none;
-webkit-tap-highlight-color: transparent;
vertical-align: middle;
z-index: 1;
/* z-index: 1; */
will-change: opacity, transform;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;

37
apps/static/js/toasts.js Normal file
View File

@ -0,0 +1,37 @@
const toastTemplate = `
<div class="toast mt-3 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="toast-icon bi me-2"></i>
<strong class="toast-title me-auto">Bootstrap</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body"></div>
<div class="progress mb-0" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 100%"></div>
</div>
</div>
`
const toastTypes = {
"primary": "bi-bell-fill",
"info": "bi-info-circle-fill",
"warning": "bi-exclamation-triangle-fill",
"danger": "bi-exclamation-circle-fill",
"success": "bi-check-circle-fill"
}
function showToast(typeName, title, message) {
var toast = makeToast(typeName, title, message)
$(".toasts-container").prepend(toast);
}
function makeToast(typeName, title, message) {
const iconClass = toastTypes[typeName];
var template = $(toastTemplate);
template.find(".toast-icon").addClass(`text-${typeName}`).addClass(iconClass);
template.find(".progress-bar").addClass(`bg-${typeName}`);
template.find(".toast-body").text(message);
template.find(".toast-title").text(title);
return template;
}

64
apps/templates/includes/toasts.html
View File

@ -1,68 +1,4 @@
<div class="toasts-container position-fixed bottom-0 end-0 p-3 pB-80">
<!-- default toast -->
<div class="toast mt-3 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<!-- info toast -->
<div class="toast mt-3 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">BBC News - Top Stories</strong>
<small>3 secs ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This subscription has 3 target channels.
</div>
</div>
<!-- success toast -->
<div class="toast mt-3 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">BBC News - Politics</strong>
<small>3 secs ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This subscription was created.
</div>
</div>
<!-- warning toast -->
<div class="toast mt-3 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Reddit - r/memes</strong>
<small>3 secs ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This subscription doesnt have a target channel.
</div>
</div>
<!-- danger toast -->
<div class="toast mt-3 show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Reddit - r/memes</strong>
<small>3 secs ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This subscription was deleted.
</div>
</div>
</div>