p5.js-web-editor icon indicating copy to clipboard operation
p5.js-web-editor copied to clipboard

Screen going blank with 'Alder veil

Open performant23 opened this issue 2 years ago • 5 comments

p5.js version

No response

What is your operating system?

Windows

Web browser and version

121.0.6167.140 (Official Build) (64-bit) (cohort: Stable)

Actual Behavior

Not sure if this is addressed in an issue before but when reducing the screen width below about 770px, the screen of the web editor goes completely blank with the page heading 'Alder veil' and the rest of UI disappears.

Expected Behavior

Ideal behavior would be that the interaction still remains possible for screens below 770px.

Steps to reproduce

Going to web editor and reducing the screen size via inspection or simply resizing the window would highlight the issue. The navbar, console, input section, etc. all disappears on doing this and we get a blank page where going from code to preview only happens through pressing the stop/resume button which sort of toggles the two views. Not sure if this behavior is expected or if this is a bug and ideally both code injection and preview should be visible for smaller screens. The first image shows the page after being resized to <=770px and the other one shows the image for >770px

Screenshot 2024-02-07 234230

Screenshot 2024-02-07 234210

performant23 avatar Feb 07 '24 18:02 performant23

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

welcome[bot] avatar Feb 07 '24 18:02 welcome[bot]

@performant23 i would like to work on this bug....

PATHAKAAKASH19 avatar Feb 07 '24 19:02 PATHAKAAKASH19

Hey, @PATHAKAAKASH19, I think you'll need to take this up with the maintainers of the repository.

performant23 avatar Feb 07 '24 19:02 performant23

thanks @performant23 i keep this in mind....

PATHAKAAKASH19 avatar Feb 07 '24 19:02 PATHAKAAKASH19

The navbar, console, input section, etc. all disappears on doing this and we get a blank page where going from code to preview only happens through pressing the stop/resume button which sort of toggles the two views. Not sure if this behavior is expected or if this is a bug and ideally both code injection and preview should be visible for smaller screens.

This is the expected behavior. It is not possible to show both the code editor and the sketch preview on small screens so we switch between them.

There is only one thing here that I would consider a "Bug" which is that the sketch stops playing when switching between the mobile and desktop layouts. The editor thinks it's playing the sketch which is why you see the preview rather than the code. See #2642

We could potentially make other improvements. Like "Alder veil" is the name of your sketch but you're not the first person to be confused by that. See #2790

lindapaiste avatar Feb 19 '24 21:02 lindapaiste