plankanban
feat: Added mobile support
Mobile support feature
Description
This pull request provides fixes facing the issue #19 including the following changes:
The board now adapts to mobile screens as well as the filters and the search bar above the board view. I've also fixed the scroll bar at the bottom of the page which was not showing up unless you scroll down to the bottom of the board view, mostly if you got long tasks with enough cards in it to go over the viewport height (on desktop as well as on mobile).
The cards modal also have been updated so it does not overrun the screen's width as well as the sidebar tools which now runs bellow the card details and on which appearence changes depending of how small the screen width is.
Hi! Thanks for working on this 🙏
I like the idea of moving buttons to the bottom of the card for smaller screens.
But the board now doesn't work correctly on all devices because of the extra scroll area (it's not supported in react-beautiful-dnd), so the window doesn't scroll left/right when dragging a card. Also, if there are many cards in one list, a vertical scroll bar appears. The idea of moving filters to a new line for mobile screens is not a very good option here. Firstly, the line will break if there are many labels in the filter, and secondly, if we add more filter options or other board actions, it'll occupy big part of the screen. Probably it would be better to just make this area scrollable (but need to test this for usability).
Hi! Thanks for working on this 🙏
I like the idea of moving buttons to the bottom of the card for smaller screens.
But the board now doesn't work correctly on all devices because of the extra scroll area (it's not supported in react-beautiful-dnd), so the window doesn't scroll left/right when dragging a card. Also, if there are many cards in one list, a vertical scroll bar appears. The idea of moving filters to a new line for mobile screens is not a very good option here. Firstly, the line will break if there are many labels in the filter, and secondly, if we add more filter options or other board actions, it'll occupy big part of the screen. Probably it would be better to just make this area scrollable (but need to test this for usability).
Hi, I'm going to do some changes facing these.
For the filters, I like the idea of making it scrollable, so I'm going on with it for now, also as part of that, in order to handle further filters, I suggest adding a filter-specific modal which can be acceded with a persistant "Filters" button that could replace the current filters section or directly be included inside of the header to gain more space. If this feature seems good to you, I'd like to take care of it in a different pull request as it will need more time for me to set up and so this one could be merged once everything is done to help for now and the time being.
What do you think of it ?
We think it's a good idea to put the filters in a separate modal/popup for small screens. Since we now have "hidable" board members, the button to open filters could be placed in the same line :)
I also thought it would be nice to make all popups open full screen on small screens, but we can add that ourselves a bit later when we finish the basic stuff for the v2.
After further investigations I've noticed that the subject was a little bit more touchy than I expected. I ran into the conclusion of going straight into changes facing the react-beautiful-dnd module itself, which I'm planning to fork in order to set up fixes facing the nested scrollable elements as it won't get any further support from now as specitied in it doc. In order to do so, I've configured the project in order to atleast fix the modals sizes as well as the filters section and header width as part of a partial fix to the initial mobile support issue, while I'm rushing for the part about the react module as the second part of that fix.
What do you think of that ?
I honestly don't fully understand why another scrolling div is needed there... We split the sections into fixed and static so that only the entire body would scroll, so that it would fit react-beautiful-dnd. Maybe to achieve this we just need to configure a viewport?
The viewport seems to work as it is already configured, but after further tests I've noticed that the fixed and static sections were only working on a desktop browser, no matter the width or the height of it. Once you try it on mobile, no matter if the sections are fixed or not, they move around when you scroll or drag a card, which I first though it was because of the compatibility of CSS positions properties between mobile and desktop browser, which could've been a subject years ago but which's not as today's browsers are widely compatible. I'm still trying with different CSS approaches as I could probably find a way to fix that, but for now I don't have any better solution
Got it 🙈 thanks for clarifying! We'll try to look for some way to solve this too, but we're very busy with the second version right now and it's a bit hard to switch to other tasks.
So, if this isn't making it into v2 either, then what is ?
I'm still onto this and am deeply trying to investigate to find a possible solution but the deeper I get, the harder the solutions are to implement and fit the project without having to change the whole architecture
Of course, and I thank you, I'm sorry I wasn't talking to you, I was asking @meltyshev, who says v2 is currently more important than anything, yet I'm not seeing what could be more important than this...
Of course, and I thank you, I'm sorry I wasn't talking to you, I was asking @meltyshev, who says v2 is currently more important than anything, yet I'm not seeing what could be more important than this...
The importance is different for everyone, for us it's the other tasks we've written here https://github.com/plankanban/planka/issues/627.
We're very grateful to the people who want to add mobile support and are working on it, but we can't accept it if it breaks some parts of the app. It's clearly a problem in the architecture, it was made that way because of react-beautiful-dnd, since it doesn't support nested scrolling. So, we probably have to change the drag&drop library first, but that could take some time.
Maybe a first step, even if it isn't perfect, could be finalized and merged into the project. Sure, the drag and drop is a problem, but it's already one. If at least the presentation is fine, it's already a good improvement, don't you think so?
You're right, I haven't checked the most recent changes, there doesn't seem to be any problems at all right now. I'll try to test everything again in the next days and accept it.
My only slight concern is that the buttons are at the very bottom of the card modal, and if there are a lot of comments/actions, it will be hard to reach those buttons. But at the same time I don't know any better solution, maybe for the mobile version we have to load next comments/actions by "Load more" button, but that can be added later.
~~Oops, I did something wrong, trying to fix 🙈~~ Nope, it's just as it should be.
I'll then accept it in its current state and remove the unused styles in the next commit so I don't have to make changes in your fork.
Just upgraded to 1.21 and on Firefox Mobile (Android 14) it's working as expected :partying_face: it went from downright unusable to fully usable, so really thank you for the amazing work! :1st_place_medal: :muscle:
