paytonshaltis / wordle-guesser

A simple web application that helps suggest words for the popular word game Wordle based on the current state of the game. A list of all possible solutions as well as a recommended next guess are provided to the user based on their input.
0 stars 0 forks source link

Replace 'filter' div wrapper with modal box shadow. #7

Open paytonshaltis opened 2 years ago

paytonshaltis commented 2 years ago

Currently, the dimming effect used when the modal appears on screen has to use a wrapper div around most of the elements of the screen. This could be enhanced by simply using a very wide box-shadow on the modal element itself, preventing this clunky and hacky markdown.

This also prevents certain elements from being clicked, such as the 'blocks' button that opens and closes the word suggestion menu and the words from within this menu.

paytonshaltis commented 2 years ago

This may need to be done using a div positioned absolutely in order to have the transition work correctly. Transitioning box-shadow does not behave as expected in this use case, so this approach may be best. See Codepen for a sample of what this may look like.