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

toasts demo

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-03-23 23:29:49 +00:00
parent 8b1b408e5f
commit eb9054c7dc
2 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
apps/templates/includes/toasts.html Normal file
View File

@ -0,0 +1,68 @@
<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>

2
apps/templates/layouts/base.html
View File

@ -76,6 +76,8 @@
</div>
{% include 'includes/toasts.html' %}
<script>
const CSRF_MiddlewareToken = "{{ csrf_token }}";
</script>