Add zoom option to make OSD big in small screens #3252
Conversation
This reverts commit 4b0d446.
This comment has been minimized.
This comment has been minimized.
|
Would love to see the zoom button for desktop while viewpoint is above 1455px :) On Nokia G60 the right side has some overflow past the screen. |
|
It has no sense to have it for over 1455px, the max-width of the OSD preview is smaller than that ;) For Nokia G60, it does not appear like in my screenshot? My Pixel 4 has a similar resolution to yours. Maybe can you paste a screenshot? |
|
|
|
Yes, it overflows, but only when the "zoom" option is pressed. This is the expected behaviour. It's ugly but it works. The idea is default to false, to fit nice, but make it overflow when needed to reorganize elements. We can add real scrolls to show only the part that fits and not overflow, but I think it will not be very usable. |
|
AUTOMERGE: (FAIL)
|
|
After playing more with this PR I found a way to add right margin: Adding https://stackoverflow.com/questions/32765039/using-margin-on-flex-items |
|
|
I didn't saw this message. Now all have more sense. I will change it ;) |
McGiverGim
force-pushed
the
add_zoom_osd
branch
from
3579668 to
c2a3f70
Compare
|
Added the padding to the "zoom" style only. If not, it affects the desktop too and gives different space between left and right (left only gap, right gap and padding). |
|
SonarCloud Quality Gate failed.
|
|
Do you want to test this code? Here you have an automated build: |
|
It depends on the size of your phone. On mine it makes it bigger with analog too 😉 |
| @@ -2985,6 +2983,14 @@ osd.initialize = function(callback) { | |||
| // Hide custom if not used | |||
| $('.osdfont-selector option[value=-1]').toggle(osdFontSelectorElement.val() === -1); | |||
|
|
|||
| // Zoom option for the preview only for mobile devices | |||
| if (GUI.isCordova()) { | |||
| $('.osd-preview-zoom-group').css({display: 'inherit'}); | |||
There was a problem hiding this comment.
Why not just using css media query for that classname instead of js?
There was a problem hiding this comment.
The media query was my first attempt, using resolution, but finally I wanted to restrict to Android only. Is a way in the media query to limit to Android specifically?
Alternative to #3241
This PR fits the OSD preview into the screen for small devices. The problem is that is not usable to reorganice elements because the small size, specially in OSD HD format. But if the user needs to make it bigger, it adds a "zoom" check to make it usable. It overflows, so the user needs to do a scroll, but is possible to reorganize elements.
Zoom disabled (default):
Zoom enabled:
