Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

prevent screen from juddering when clicking on diagram #15815

Merged
merged 4 commits into from
Sep 5, 2024

Conversation

Maschga
Copy link
Contributor

@Maschga Maschga commented Aug 30, 2024

Hi,
If you click on the In-Out-diagram, the screen jerks:

video-before.mp4

Adding overflow-y: scroll to the <body>-tag prevents this:

video-after.mp4

@naltatis naltatis added enhancement New feature or request ux User experience/ interface labels Aug 30, 2024
@naltatis naltatis self-requested a review August 30, 2024 13:14
@naltatis naltatis self-assigned this Aug 30, 2024
@naltatis
Copy link
Member

naltatis commented Sep 2, 2024

We didnt to this to avoid double scrollbar issues with scrollable modals. See loadpoint settings in demo config:

IMG_1929

But I guess doing this change except when modals are open would be fine. Can you test this on your devices?

body:not(.modal-open) {
	overflow-y: scroll;
}

@Maschga
Copy link
Contributor Author

Maschga commented Sep 3, 2024

Hi, I use Firefox and I do not have this problem with the doubled scrollbar:
https://github.com/user-attachments/assets/fb72c454-87b1-4b07-9115-afd50bd2c76f

However, I can move the screen slightly to the right. I think this is not intended? Do you have the same issue?

@naltatis
Copy link
Member

naltatis commented Sep 3, 2024

Do you have the same issue?

No i dont. Is your video with or without the overflow change? Firefox on Android?

@Maschga
Copy link
Contributor Author

Maschga commented Sep 3, 2024

I have this behaviour with and without the overflow-change.

@Maschga
Copy link
Contributor Author

Maschga commented Sep 3, 2024

@naltatis
Copy link
Member

naltatis commented Sep 4, 2024

It's due to the footer

What device/resolution? We already have a "short version" for the "100% solar" text but it doesn't seem to be short enough. at lease for dev-builds with long version.
Can you try to add text truncation for the text. Not sure if it's easy in combination with the flex design.
Other languages likely have even longer words.

@Maschga
Copy link
Contributor Author

Maschga commented Sep 4, 2024

Samsung Galaxy A71 with 1080 x 2400 px.

Before the text is cut off, I suggest using mediaqueries to place it in two lines in the centre if the screen is too small or the font size too large.
I can try it out tomorrow, I would like to do it.

@naltatis
Copy link
Member

naltatis commented Sep 5, 2024

@Maschga
Copy link
Contributor Author

Maschga commented Sep 5, 2024

I added this:

body:not(.modal-open) {
	overflow-y: scroll;
}

and added a media query, which wraps the text in two lines if the screen is too small.

On my devices (computer + smartphone) both issues are solved.

Does this work on your devices, too?
Does this solution suit you?

@naltatis
Copy link
Member

naltatis commented Sep 5, 2024

Scrolling tests look fine. Let's give it a try.

I replace the wrap with truncate of the version number. This is the least important information in the footer.

Generally I also like the two line wrap but we should not do it based on a fixed media query. A proper solution would be content based because translation texts may vary in width. Flex wrap does this by default, but i dont see a proper way to do the centering in case of a wrap. So lets keep it simple and just truncate/clip the version part when space is low.

Bildschirmfoto 2024-09-05 um 22 23 15

@naltatis naltatis merged commit c35eaca into evcc-io:master Sep 5, 2024
6 checks passed
@Maschga Maschga deleted the prevent-screen-from-juddering branch September 10, 2024 08:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request ux User experience/ interface
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants