[TB] Enhance Responsiveness of ThemeBuilder Application on Mobile Devices

finos / a11y-theme-builder

DesignOps toolchain theme builder for accessibility inclusion using Atomic Design.

Apache License 2.0

33 stars 68 forks source link

[TB] Enhance Responsiveness of ThemeBuilder Application on Mobile Devices #855

Open Sweetdevil144 opened 3 weeks ago

Sweetdevil144 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 3 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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

Sweetdevil144 commented 2 weeks ago

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.