Fixes for Delete images prompt is not centered #278 #281
Conversation
…e centered on larger screens past 768px
There was a problem hiding this comment.
Hey @alvarotorrestx thanks for the contribution. :) I've left some feedback for you to take a look at. Please let me know if you have any questions.
| @@ -0,0 +1,9 @@ | |||
| # Changes Made | |||
There was a problem hiding this comment.
I'd like to clean the project tidy if possible. You can provide these bullet points in the pull request description instead and I will add a note about your contribution to the release notes. :)
There was a problem hiding this comment.
Gotcha and understood, will do! 👌🏽
| @@ -50,6 +50,8 @@ form input { | |||
| opacity: 0; | |||
| transition: opacity 0.25s ease; | |||
| border-radius: 8px; | |||
| left: 50%; | |||
| transform: translateX(-50%); | |||
There was a problem hiding this comment.
This is an excellent solution to the problem, and it's much better than what I tried to do before. There's a couple of issues still present that appear to be due to my previous attempts at centering these container divs. You can see this in the login page and its error notifications. These overlays still appear to be off-center, and that's because of left: calc((100vw - 30vw) / 2); on line 69 for the notification overlay, and setScalableWidth and setScalableHeight functions inside util-frontend.js (they set the left and top properties respectively).
I'll try to help out when I get the chance, but I believe that if you take a look at these sections, and make sure that only your change above is setting the left position of the overlay, then all overlays should appear centered.
I think you can also add top: 50% and change transform to be translate(-50%, -50%) and it will center the container both horizontally and vertically.
Let me know if you have any questions.
There was a problem hiding this comment.
Sure thing, will work on updating this as well!
Issue: Delete images prompt is not centered #278
Committed 2 files with updates
Addtl. Note
I'm not 100% familiar yet with working with projects and databases, I updated the CSS that should resolve the styling fix and tested with Google Chrome DevTools, both with success and failure included.
Please update me if this was not resolved correctly and thank you for allowing me to contribute!