[TB] Enhance Responsiveness of ThemeBuilder Application on Mobile Devices

[Sweetdevil144]

Problem/Concern

Non responsiveness exhibited in small window view.

• This is one of the deployments where I found the issue : link to problem content

Proposed Solution

• Utilization of Hamburger menu for sidebar.
• Utilization of Flex and Grid Layouts wherever required.
  -Introduce media queries to adjust text sizes and layout dynamically based on the screen size.

[aaronreed708]

Thanks for opening the issue @Sweetdevil144! We haven't spent much time working on responsiveness, yet, since it is a design tool that isn't likely to be used on a very small screen. Probably nothing smaller than a tablet. With that in mind, do you have a suggested list of things that we could fix to assure a good user experience on a tablet? So that we can prioritize the work?

[Sweetdevil144]

Here are a few things we could prioritize:

• Optimizing the sidebar: Implementing a collapsible hamburger menu can help free up space and improve navigation.
• Flexible layouts: Using Flexbox and Grid can make the UI more adaptable, ensuring elements scale properly on various tablet sizes.
• Media queries: Adjusting basic UI components like buttons, text sizes, and spacing can greatly improve readability and interaction on smaller devices.

[kburk1997]

As discussed in the 5/16 meeting, this is not exclusively limited to mobile screens - this is an accessibility issue as well.

Web Content Accessibility Guidelines (WCAG) has a success criterion that mentions this - 1.4.10: Reflow:

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

-Vertical scrolling content at a width equivalent to 320 CSS pixels;
-Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

[Sweetdevil144]

Hey @kburk1997 , you're right. This is an accessibility issue in Whole as per the WCAG guidelines as well. Enhancing the Views may prove beneficial in fixing this issue.

[aaronreed708]

You are all making great points and good suggestions. @Sweetdevil144 would you like me to assign this issue to you?

[Sweetdevil144]

Yeah sure. I'd love to work on this. I'm wrapping up the test Enhancement Issue. So, I'll start with this parallely too.

[AradhyaDixit18]

@aaronreed708 @Sweetdevil144 noticed the same issue related to responsiveness . Can i help for some improvements? If yes then please assign me this task.

[Sweetdevil144]

Hey @AradhyaDixit18 . Sure go ahead!! I'm hell busy right now it's open for peeps. You'd be a great help 😁

[AradhyaDixit18]

@Sweetdevil144 okk then . I'll try to give my best.

[aaronreed708]

Thanks for volunteering! I’m on vacation this week, but happy to help if you have any questions next week.

…

Sent from my iPhone On Jun 29, 2024, at 4:20 PM, Aradhya DIxit ***@***.***> wrote:  @Sweetdevil144<https://github.com/Sweetdevil144> okk then . I'll try to give my best. — Reply to this email directly, view it on GitHub<#855 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AH3DTLI7T7YDBOBFWACPMIDZJ4JJFAVCNFSM6AAAAABHIAY3R2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOJYGMZDMOBVGQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[AradhyaDixit18]

@aaronreed708 Sir i just fixed the main landing page and made it responsive and created a PR #949 please review this and merge it also review the PR #946 where i have fixed the hex value and added a dynamic hex value i also created a separate issue for it please have a look

[aaronreed708]

Hi @AradhyaDixit18! Thank you for your contribution! I made some comments in #946 already so I'll keep those comments separate from those related to this issue.

I like the approach that you took in the first PR #949 and the visual that you were able to achieve. I'll put comments in the PR for PR-specific issues that I see.