fixing screen-resize issue

[MohitGupta14]

for issue #3312 , on resizing Now canvas will restored and it will also solves the #3034

[pikurasa]

If I resize the window in the following way, I get some weird results (see the icons in upper-right).

[MohitGupta14]

If I resize the window in the following way, I get some weird results (see the icons in upper-right).

It's fine , when I work on designing issues with phone I will set each position of the navbar icons according to different size of screen.

These icons went down because as window shrinks so to fit all the content it went out of the nav bar. This also happen because we have two extra buttons recording and full-screen one which is taking space so for smaller screen we need to shift there positions

Solution is just to make the icons may be smaller according to different screen size.

And check also that save as PNG thing working on resizing.

[MohitGupta14]

These videos for better understanding
Current situation 👇
https://github.com/sugarlabs/musicblocks/assets/81846020/41f2e506-85c7-41aa-97ea-c946d38758cd

After this branch 👇
https://github.com/sugarlabs/musicblocks/assets/81846020/4a23932c-b0b0-4c47-acb3-a10204a25af1

[pikurasa]

Thank you for the additional context and for showing those clear tests -- that really helps!

I won't be able to test on various devices until tomorrow, but the tests you show are persuasive.

@walterbender do you have any feedback in the meantime.

[pikurasa]

Some results on a laptop, while emulating devices:

1. When I got into full screen and back (without emulation), everything is fine.
2. When I open up dev tools and keep it to responsive, I cannot see the graphics when the frame is more narrow, but the graphics return when I exit dev tools
3. However, when I open up the dev console and try to emulate a device, it seems to get confused and use up al the system resources. See this video:
   resizing-issue-2.ogv.zip

Hope this is helpful!

[MohitGupta14]

please consider only f0dc5c6 commit it will solve that responsive problem.

[pikurasa]

Is there a way to get the canvas (very light grey area) to also resize?

Meanwhile, I am continuing to test, but emulation tests, in particular, get my browser stuck.

Is it due to lines 2560 and 2561 in the logs, which send the size of the console?

Those may be sending too many messages to the log.

[pikurasa]

@MohitGupta14 Any updates for this PR?

[MohitGupta14]

This latest commit 168c78c will solve the resize issue in most of the scenarios.

[pikurasa]

I have a suggestion for resizing: Whenever someone clicks the expand/collapse button for the canvas (light grey area), adjustments are made to fit the screen size accordingly. WDYT?

Those screenshots were taken while on the "Resize Issue" branch, btw. You can see that, while the blocks are filling the screen, the canvas area is not.

[pikurasa]

It works well, but if I put the window into full screen then out of full screen, it seems to lose the bottom part where the trash, home, and magnifying icons are. That's a problem as they are quite important for the user to be able to access. Are you getting similar results?

[pikurasa]

I tested https://mohitgupta14.github.io/sugarLabs-musicblocks/, and that works very well.

@walterbender does it also pass your tests and review?