Frontend responsive fontsize android #3623
Merged
Conversation
This file contains hidden or 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
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
from
46039ca to
e8ddfec
Compare
Collaborator
Author
|
Will replace #2699 |
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
4 times, most recently
from
c2d1d9e to
d5518bc
Compare
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
5 times, most recently
from
fab6678 to
044e95e
Compare
Merged
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
2 times, most recently
from
4ca695a to
2f600cb
Compare
Merged
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
9 times, most recently
from
e2f6c6d to
d47a4e5
Compare
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
5 times, most recently
from
f6df564 to
bee0d54
Compare
On maximum font-size settings some app views are broken caused by text that is too large. The default size is set on 62.% but can increase up to 150% (on Android 14). Updated font-size CSS varibables with defined maximum values.
Bottom-menu should not grow beyond certain size in responsive mode for example if Android Font size is set to max. This can be simulated by changing the font-size on the root HTML element to 150%.
Toggles in responsive mode looked broken if Android Font size is increased. This can be simulated by changing the font-size on the root HTML element to 150%.
- changed button border-width to be reponsive and scale with the ui - fixed send/recieve button, should scale - fixed responsive button height
Improved various form elements so they look ok in scaled up mode. Can be tested by setting font-size: 150%; on the html element.
Fixed a bug caused by empy paragraph element, which increased settings item height unnecessarily.
Changed the layout slightly on small screen as there was custom font-size defined, introduced in: bfc3fed
Also removed some unused CSS.
Sidebar can appear on Android tablets, fixed some styles related to the sidebar component.
Visually changed search input height also in default mode, so it uses the same height as all other input fields.
Updated account-overview styling so it aligns with changes from the last commit (send). Changed header styling, so that the title and balance positioning match between account and send view.
The copy component should grow to improve accessibility. Also removed utility classes in favor of already exsting container class.
Amount component has text-overflow: ellipsis styling which does not work. Fixed text overflow should be shortened by an ellipsis.
Before this feature, larger font-size settings on Android could break the UI in various places in the app. This feature supports larger font-size in various components, by eitehr shorteining with dotdot..., breaking onto newlines and ensuring that text, buttons or form elements consistently scale.
thisconnect
force-pushed
the
frontend-responsive-fontsize-android
branch
from
c654fab to
06d2c23
Compare
Contributor
|
@thisconnect tested on macOS, Win11 and GrapheneOS, LGTM. Will code review soon 🙏 |
Collaborator
LGTM 👍 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
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.
Updated the frontend to be responsive on Android. Ideally this PR would have no visual difference and just scales up if settings changed. But some CSS was not possible to make reponsive and stay 100% the same, that is for example the Guide where we used "em" sizes. The balance header that is used in different view such as account-overview and send now looks the same on both view before padding/spacing was different. Also we used many different font-sizes, some not intentional. This PR refactored font-size CSS variables and slightly reduced the number of different font-sizes, causing minor visual layout changes.
The scaled up UI on Android looks currently so broken that any change is an improvement. But each change could also introduce a visual CSS regression. So it would help if the focus of the testing is that nothing broken in "normal" mode.
Before asking for reviews, here is a check list of the most common things you might need to consider: