Task: Prevent Toasts from lingering on-screen

[DeeMcCart]

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')

• [x] Introduce a time delay for toasts so they disappear after 5 seconds
• [x] Ideally with a 'fade' display so they softly fade away
• [ ] Would also prefer display at top centre rather than top right

Tasks

• [x] 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

[DeeMcCart]

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