frontend: responsive font size POC #2699
Draft
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
thisconnect
force-pushed
the
frontend-responsive-fontsize
branch
30 times, most recently
from
a5a2b7c to
aaa64ff
Compare
thisconnect
force-pushed
the
frontend-responsive-fontsize
branch
from
1da4aa1 to
f4dde88
Compare
|
ok got some feedback from @shonsirsha my next step is to cleanup master and convert all |
Seems as these files are not imported anywhere.
Small cleanup: - import from same utils module - group imports from api - import styles last
In order to change the CSS to change the codebase to use rem, using 'The 62.5% Font Size Trick' we need to first convert all existing rem units back to px. This is so that we don't accidentally already have rem values. If the default base font size is 16px, 1rem equals 16px. Changing back to pixel first makes it much easier to use the 62.5% trick where 1rem = 10px. This refactoring should not introduce any visual change and just converted rem to px. I.e. 1.5rem is now 24px as 1rem currently equals 16px. Also simplified terms.module.css a bit as the title was defined multiple times.
Increasing the font size setting under 'Display size and text' on Android can break the layout in the WebView. There are 2 relevant settings: 'Font size' and 'Display size'. It appears that only the text is increased leaving the elements as if the font size was normal. Buttons look broken with text hanging out and transaction history is unreadable with overlapping text. This change seems to have no impact and was for testing purpose.
Last commit setting text-size-adjust to none seemed to have no impact on the breaking layout when font size is increased on in the os. Testing text-size-adjust 100%
This is a test to see if we can use responsive font size. This also sets the base font size so that 1rem is 10px (unless text zoom). With this technique elements can have responive dimension so that sizes using rem are also zoomed if the text font size is bigger.
Android textZoom only increases font-size without incresing surrounding elements which can break the layout and cause overlapping text and elements. This commit reads the current textzoom, sets a custom CSS base font size (calculated from textzoom) and resets textzoom to 100%. The custom CSS is using 'The 62.5% Font Size Trick' with which 1rem equals 10px. With this it is possible to change elment dimensions from px to rem. These elements will become responsive and also grow if Android settings for font size is increased. To simulate this in webdev and optimize the layout for increased fontsize a base font size of 125% has to be set.
For debugging purpose this will render the calculated increased base font size and the screen width. The screen width can vary depending on Android display size setting.
Sidebar does not need to grow, as it works well if the font size is renderd at 200%. Changing back to px.
thisconnect
force-pushed
the
frontend-responsive-fontsize
branch
from
f4dde88 to
6d90bf6
Compare
thisconnect
changed the title
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.
Andoird has the option to make text bigger which breaks the layout in the BitBoxApp.
This is a test to see if we can use the rem mode trick.