Megathread: issues with "About" modal responsive design

[lindapaiste]

Increasing Access

We want the content to be clear and readable on all screen sizes.

Feature enhancement details

We have a bunch of open issues related to the responsive design of the "About" modal. I'm worried that fixing them one-by-one will just create more problems. We need a more substantial rewrite of this CSS and HTML.

Current issues:

• About Block content overflowing on changing language #2700
• In About modal position of "Contribute" and "Report a bug" is not consistent #2531
• Report a bug and code of conduct exceeds from about modal when window size is resized #2565
• editor about section responsiveness  #2538

Proposed solutions:

• Set explicit column widths (33.3%, 50%, 100%) for various breakpoints using media queries.
• Rearrange the HTML so that the about__footer is not a sibling of the columns.
• Shrink the logo on very small screens. Maybe move the version numbers to the right of the logo?
• Rethink the positioning on "medium" widths where we can fit two columns. Maybe a smaller logo up top and the two lists go next to each other below it?

How you can help:
Post some screenshots here of how you think the modal should look at various breakpoints, including landscape mode. You can play around with the HTML and CSS in your browser's dev tools or you can edit a screenshot in a graphics program. Let's not make PRs until we have a clearer vision of the desired behavior.

[aryanas159]

@lindapaiste Can I be assigned to this issue?

[aryanas159]

How does this layout look for a mobile breakpoint?

[lindapaiste]

@lindapaiste Can I be assigned to this issue?

At this stage we looking for feedback and ideas from the community. We are not ready to assign it to anyone.

[lindapaiste]

We may also think about how we organize these lists of links. Personally I don't think that "Twitter" and "Instagram" make sense under the "New to p5.js?" heading. It makes more sense thematically to put them in some sort of "Community" list, alongside "Forum" and "Discord". We could also consider using icon buttons for social media channels.

The pink text on the version numbers makes them look like links, which they aren't. They could be links to the releases on GitHub which documents what was changed in each version.

[lindapaiste]

Mockups of ideas

• Shrink the logo on very small screens. Maybe move the version numbers to the right of the logo?

With a smaller logo it's easier to get everything to fit without scrolling.

• Rethink the positioning on "medium" widths where we can fit two columns. Maybe a smaller logo up top and the two lists go next to each other below it?

I kept everything the same size but rearranged the elements in a way that makes more sense visually.

I still need to play around with landscape mode. I think we'll want to look at both the height and the width when determining whether a modal is full-screen. Right now we only look at the width. So it's not giving us much room to work with. If we bump this up to full screen it can probably keep the same general layout as on desktop.

[aryanas159]

@lindapaiste How's this for Mobile Landscape?

[Swarnendu0123]

Mockups of ideas

• Shrink the logo on very small screens. Maybe move the version numbers to the right of the logo?

With a smaller logo it's easier to get everything to fit without scrolling.

• Rethink the positioning on "medium" widths where we can fit two columns. Maybe a smaller logo up top and the two lists go next to each other below it?

I kept everything the same size but rearranged the elements in a way that makes more sense visually.

I still need to play around with landscape mode. I think we'll want to look at both the height and the width when determining whether a modal is full-screen. Right now we only look at the width. So it's not giving us much room to work with. If we bump this up to full screen it can probably keep the same general layout as on desktop.

Great idea @lindapaiste ! as a contributor and love for p5.js, can you please suggest how to proceed.

[raclim]

It makes more sense thematically to put them in some sort of "Community" list, alongside "Forum" and "Discord". We could also consider using icon buttons for social media channels.

I still need to play around with landscape mode. I think we'll want to look at both the height and the width when determining whether a modal is full-screen. Right now we only look at the width. So it's not giving us much room to work with. If we bump this up to full screen it can probably keep the same general layout as on desktop.

@lindapaiste I'm wondering if turning this into a dedicated page (like the ones in /account, /sketches, and /collections) might be better and give more space and freedom to organize the links?

The pink text on the version numbers makes them look like links, which they aren't. They could be links to the releases on GitHub which documents what was changed in each version.

Completely agree here!

[aryanas159]

@lindapaiste Do you wanna go with the suggestions made by @raclim?

[Akhilbisht798]

I agree with @raclim here. Instead of a modal which we are using we can make it a new page like account etc.
And there we also put p5.js instagram, twitter and discord with icons and stuff for joining our community.
It will provide much more space to experiment around.

And this page will act more like a gateway from where user can assess entire community of p5.js.

[Kiran1504]

the landscape one is easy to be solved and a pr is created for the same. Mobile screen and logo and scrolling changes can be done if required in issue #2686

[adityagarg06]

Hi @lindapaiste, Here is a proposed solution :

For bigger screens (1024px), languages with longer words, such as Italian, were overflowing, so changed the width and also changed the space between the footer items:

For screen width between (430px to 900px), Changing the size of the logo fixed the overflowing issue:

For screen width less than (430px), The flex-direction is changed to row. We can remove the scrolling by reducing the font size and logo size: