-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update Django messages to reuse toast component used by htmx #4385
Conversation
@@ -10,7 +10,7 @@ | |||
<script> | |||
function toastHandler() { | |||
"use strict"; | |||
const AUTO_HIDE_TIMEOUT = 2500; | |||
const AUTO_HIDE_TIMEOUT = 3000; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Give a generous time to reader of the notification.
This updates the full page load to use the same mechanism to display the messages from django.contrib.messages as used during htmx request
c31adb4
to
258377e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! Less code, improved function.
Have a small suggestion, see comment.
@@ -103,7 +103,7 @@ | |||
@click="remove(toast.id)" | |||
@mouseenter="pause(toast.id)" | |||
@mouseleave="resume(toast.id)" | |||
class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group" | |||
class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group sm:min-w-64" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think of adding a "me-2" or similar here, just to get it a little out from the side.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated.
- handle long urls and words
@frjo Update to include more spaces near edges and also added a max-width for a very large screen. Add/update icons and color for different message types and handle long words and urls Screenshot added in the PR description. |
This updates the full page load to use the same mechanism to display the messages from
django.contrib.messages
as used during htmx requestThis is achieved by generating a javascript custom event for toast component instead of rendering html content.
Add/update icons and color for different message types and handle long words and urls
The web accessibility is maintained as the toast component handles it when it's is initialized.
This is a further enhancement to #4374 to keep things DRY and consistent.