Adding Responsiveness In Blocks

[FirePheonix]

the following PR adds responsiveness to blocks in MB when being resized horizontally.

fixes: #4342

I still have a few changes left to improve block rendering. I'm open to suggestions for further improvements. Let me know if you have any!

Music.Blocks.-.Google.Chrome.2025-02-05.15-30-32.1.mp4

[omsuneri]

@FirePheonix looks fine but put a demo of phone dimensions too as the main problem happens in mobile phone try experimenting that too

[FirePheonix]

YEP. Made it work.

Music.Blocks.-.Google.Chrome.2025-02-06.01-33-13.1.mp4

[walterbender]

You cannot reposition individual blocks. You need to maintain the integrity of the stacks. Otherwise after you move things, the connections between blocks get scrambled.

[FirePheonix]

@walterbender Yes sir, he repositioning logic has been implemented. I am now writing the code for ensuring that the integrity of the block stacks is maintained to prevent any disruption in their connections.

[FirePheonix]

@walterbender Sir, I've managed to add responsiveness ALONG with making it unscrambled, and made it much more optimized this time. Had to read the entirety of blocks.js and activity.js all over again to find out how MB actually managed blocks together.

here's the demo video:

Music.Blocks.-.Google.Chrome.2025-02-08.00-36-40.1.mp4

[FirePheonix]

Final Demo:

Makes sure to support all sized of devices
Makes sure to not scramble the blocks
Intelligently invokes home button function when required

Music.Blocks.-.Google.Chrome.2025-02-08.01-53-22.mp4

Please let me know if any other changes are required. I'll be glad to change.

[walterbender]

Looks really good. Adding the Home Button functionality makes a lot of sense.

[walterbender]

Note sure why, but when I resized to the smallest width, suddenly I got this:

Up until that point, it was doing what I expected in terms of reducing the number of columns:

[FirePheonix]

@walterbender The code worked well in my environment:

OS: Windows 11
Browser: Chrome

I recently updated some parts of the code, which might have introduced the block duplication issue you're experiencing. However, I suspect it could be related to system performance, possibly lag.

Here’s a demo video showcasing its functionality:

Music.Blocks.-.Google.Chrome.2025-02-09.00-26-20.mp4

Could you kindly review it again and let me know your thoughts?
Looking forward to your feedback.

[walterbender]

I will test again. I was using Firefox on Fedora.

[walterbender]

I cannot reproduce the earlier problem.