feat(autocomplete-theme-classic): align search box properly #511
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 pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit a7f2c9d:
|
|
looks good! |
|
@Shipow Good catch, I didn't. Once we merge I'll try to see how it plays out. |
* fix(examples): fix GitHub example layout * fix: apply suggestions from code review Co-authored-by: Clément Vannicatte <[email protected]> Co-authored-by: Clément Vannicatte <[email protected]>
|
|
Shipow
approved these changes
Apr 8, 2021
|
@Shipow That makes sense indeed. Let's do this in another PR. |
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.
This tweaks the styles so that the search box visually aligns on other elements. This applies to the loading indicator too, and optimizes for the largest possible clickable/tappable area on the submit and clear buttons.
Desktop
Mobile
On mobile, the submit icon has to be close to the left edge to align with the icons below. I didn't replicate this exact gap between the clear button and the right edge, because it looked weird. I've tried to find a gap that felt right instead. It looks a bit odd when looking at it on a computer screen, but feels smooth on a mobile device.
I've tried to simplify the
calcstatements as much as possible so they don't wrap and are easier to read. Whenever a factor or divisor doesn't equal to a fixed decimal value, I used fractions to avoid losing precision.