Skip to content
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.

Sign up for GitHub

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

Jump to bottom

🪲 Move the modal close button to top right/left corner #5906

Merged
merged 3 commits into from
Nov 7, 2024
Merged

🪲 Move the modal close button to top right/left corner #5906

merged 3 commits into from
Nov 7, 2024

Conversation

boryanagoncharenko
Copy link
Collaborator

This PR ensures that the close button of modals appears in the top right/left corners.

Fixes #5887

How to test

  • To show an error modal: log in as a teacher and select a class. Click Add students > Create accounts. Try creating a student account with @ or multiple student accounts with less than 3 chars for usernames and this will trigger an error modal. If the error message is short, the close button should be aligned with the text and if the error message is multiple lines, the close button should be aligned with the first row of the text. If you use a left-to-right language such as Arabic, the close button should appear on the left.
  • To show a success modal: log in to an account and go to account settings. Change the language of your profile and this will trigger a successful modal. Double-check that for left-to-right languages, the close button should appear on the left.

@Felienne Felienne requested a review from jpelay November 7, 2024 11:29
jpelay
jpelay approved these changes Nov 7, 2024
View reviewed changes
Copy link
Member

@jpelay jpelay left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It works!

templates/layout.html
<span id="modal_alert_title" class="block sm:inline"></span>
<div id="modal_alert_container" data-cy="modal_alert_container"
class="mx-auto text-center bg-green-100 border-green-400 text-green-700 border rounded px-7 py-2">
<svg class="absolute top-2 end-1 h-6 w-6 fill-current text-green-500 block sm:inline cursor-pointer"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a class so that the cursor changes to pointer when you hover over it, hope you don't mind!

@mergify Mergify
Copy link
Contributor

mergify bot commented Nov 7, 2024

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

@mergify Mergify
Copy link
Contributor

mergify bot commented Nov 7, 2024

Thank you for contributing! Your pull request is now going on the merge train (choo choo! Do not click update from main anymore, and be sure to allow changes to be pushed to your fork).

@mergify mergify bot merged commit 6da2c52 into main Nov 7, 2024
11 checks passed
@mergify mergify bot deleted the modals_5887 branch November 7, 2024 20:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jpelay jpelay jpelay approved these changes

Assignees
No one assigned
Labels
None yet
Projects
Hedy organization board
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

The closing button of a notification appears in the bottom right corner
2 participants
@boryanagoncharenko @jpelay