Scale promo piece size relative to screen width #2111
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Oct 19, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #2074.
Description
Promo pieces are currently scaled to 60x60px, which gets too big when the base zoom is scaled up or down, as detailed in the linked issue.
To make the promo overlay pieces the same size as the pieces on the board, this PR essentially aims to change the promo piece height and width to 12.5% of the overlay (and screen) width. It will consequently often match the board piece width, and is in any case reasonably legible.
In order to actually match the height to 12.5% of width, I had to write a CSS hack, as indicated by a comment. I also capped the piece width/height at 100% of the overlay height in order to keep the pieces within the overlay bounds in edge-case font/screen configurations.
Lastly, I took the liberty of making the promo overlay a flex component. This might not have been necessary but I found it slightly easier to reason about. Happy to revert that bit if desired.
New styling with various screen widths
lichobile.promo.piece.adjustment.width.mov
New styling with various base zooms
Note that zoom adjustments affect the base px size; since the overlay height and column gap are specified in px, they're subject to change size too.
lichobile.promo.piece.font.adjustment.mov