Mobile version development

[tu2-atmanand]

This discussion topic will contain everything related to the development of mobile version of Task Board.

We have to discuss :

• The UI changes required, so all the components will be properly visible and adjusted in all screen sizes.
• Possible UI elements which might need to hide to arrange the components properly.
• The UX changes required, so the experience of using this plugin on Mobile phones will be smoother and hassle free.

[tu2-atmanand]

Changes required in Add or Edit task modal

• This modal contains two sections, the right section is all about the actual content of the task, such as main title, sub-tasks and description. And the left section is all about the properties of the task.
• The current UI of this modal cannot be used on mobile screen, because the right section flows out of the screen.
• Possible Solutions :
  • 1. The right section can be kept hidden at initially and a button can be provided on the top right, pressing on which, the right section will slide in from the right, like a overlay.
  • 2. Simply solution will be to show all these property fields right after the task title field and before the subtasks.

[tu2-atmanand]

Okay!

The first solution turned out way cooler than I imagined. Going with this :

[tu2-atmanand]

Changes required in Board Configurations Modal

• This modal contains two section, on left there is a navigation bar to see all the boards as a list. On the right is all the setting related to the specific selected board.
• Current UI, looks to clumsy, where the left section is taking too much width, making the left section setting un-usable.
• Possible Solutions :
  • 1. Create a handler icon on the top left corner, pressing this button will slide in the list of Boards from left, so user can easily select it.
  • 2. Convert the left section as a top navigation bar. Directly scroll horizontally and select the tab, which will be basically the board name and it will show all the board specific settings.

[tu2-atmanand]

This functionality has been implemented using the first suggested approach

[tu2-atmanand]

Changes required in Scan Vault modal

• For now this modal looks good on Mobile screens, also gives acceptable user experience.
• As an improvement, a little margin can be added inline, so it looks like a pop-up window.

[tu2-atmanand]

Some ideas for better User Experience

• While scrolling the board horizontally, we can snap the columns to the center of the screen. So, with simple slide, next columns will slide in at the center of the screen.

[tu2-atmanand]

Animation library used is not supported on phones

The plugin uses "framer-motion" as the animation library to give nice animation for the taskItemCards. But this library is not supported on phones.

At present I have two solution, either to complete remove the library and use custom CSS for the animation. Or use conditional importing of the library only on Desktop.

Since, using the custom CSS for animation is working with a little discomfort compared to the previous one, I believe somehow it can also be solved. Hence for now, to avoid any further issues on mobile version of Task Board with various types of phones, I am going with the Custom CSS approach.

Also created an issue to solve the bug in the future : #199