Task: Prevent Toasts from lingering on-screen
DeeMcCart opened this issue · comments
EPIC: #35 UX
Issue #27 User feedback is parent issue), this is a requested enhancement to Toasts feature. Get rid of stale Toasts hanging around and blocking the user's drop down options!!!
Assumptions or Pre-Requisites:
- Toasts are working fine and displaying appropriately
- Toasts currently remain on-screen until the user clicks the close X button
Acceptance Criteria: (Must be completed before task is moved to 'Done')
- Introduce a time delay for toasts so they disappear after 5 seconds
- Ideally with a 'fade' display so they softly fade away
- Would also prefer display at top centre rather than top right
Tasks
- Task1 Add id onto Toasts display in base.html. Add js into base.html to deal with fading/clearing the Toast messages
Before changing task status to 'Review' or 'Done' please provide comment (and screenprints if appropriate) as documentary evidence of task completion
DMcC 14/02/24: Added the following js into base.html (picked up from PP4):
<script>
setTimeout(function () {
let messages = document.getElementById('msg');
let alert = new bootstrap.Alert(messages);
alert.close();
}, 5000);
</script>
Thought about it and going to keep display at top RHS for now - will review when looking at overall UX before submission