frontend: trying responsive font size #2699
Draft
Commits on May 9, 2024
-
frontend: remove unused css files
Seems as these files are not imported anywhere.
-
Small cleanup: - import from same utils module - group imports from api - import styles last
-
frontend: prepare for responsive font-size
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.
-
-
frontend: andoird font size zoom can break the layout
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.
-
frontend: trying text-size-adjust 100%
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%
-
frontend: trying responsive font size
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.
-
frontend/android: capture textzoom and set custom base font size
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.
-
frontend: debug and display calculated base font and screen width
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.
-
frontend: style sidebar to be responsive
Sidebar does not need to grow, as it works well if the font size is renderd at 200%. Changing back to px.
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.