taskcafe icon indicating copy to clipboard operation
taskcafe copied to clipboard

Mobile UI is broken

Open tionis opened this issue 5 years ago • 13 comments

In mobile browsers the UI is shown ok, but the login page is squashed together so strongly that its practically impossible to login.

tionis avatar Jul 20 '20 10:07 tionis

Theres also a problem while creating an event on mobile. In this case though the ui is way to wide for the screen until you zoom out. When I find the time I will test a few other pages for mobile compability.

tionis avatar Jul 20 '20 22:07 tionis

As far as I can tell, the UI doesn't adjust to the correct screen size on mobile, its way to wide and parts are not high enough.

tionis avatar Jul 20 '20 22:07 tionis

While getting the mobile to at least kinda work is on my todo list, it's not high priority at this moment so it might be a bit before I can address this issue.

I will leave this issue open though in case anyone else wants to take a stab at it!

JordanKnott avatar Jul 20 '20 22:07 JordanKnott

I would like to take a look at it, but am quite busy at the moment.
In a few weeks I should have time for this, I always wanted to learn some React.

tionis avatar Jul 21 '20 13:07 tionis

I think that's how the cards interface on mobile would be best handled, all other interfaces simple need to be scaled down to the screensize(with the exception with the top bar and the login UI)

tionis avatar Jul 21 '20 20:07 tionis

If these issues are fixed (additionally the card view has to be shrinked in width and the options have to be moved in a popup menu or down) the web ui is even superior to trello. (IMHO)

tionis avatar Jul 21 '20 20:07 tionis

I can take a look at implementing these changes if you haven't already started work on them

skybloo avatar Sep 04 '20 22:09 skybloo

@shermr Sure! I'm currently quite busy and would have to learn React to contribute.

tionis avatar Sep 10 '20 23:09 tionis

I like the idea of cards being shown one at a time and swiping horizontally to snap them to center but maybe even better is overlaying the cards slightly on top of each other in a stack (like Apple Passbook/Wallet does) so you can see all the cards at once and maybe the first task or two on each, then just tap the heading to jump into that card. See below example from Apple.

image

ilovepancakes95 avatar Sep 14 '20 15:09 ilovepancakes95

I'm just going to leave this here as a suggestion: https://github.com/couds/react-bulma-components

c-nv-s avatar Jan 30 '21 06:01 c-nv-s

The opposite issue exists on large monitors, most likely related. I'm running 2560x1440 and everything is very compressed. image

You should at least center the columns but it would be nice if more of the card was shown when the real estate is available (e.g. descriptions, checklists), or at least give the ability to change column widths and font sizes. Definitely more important to get mobile screens working but any solution is likely to allow for scaling to larger screens and they shouldn't be forgotten.

Aesir avatar Mar 10 '21 21:03 Aesir

@Aesir on 1440p I zoom in by 40%, I think this is more handy on demand than a fixed setting per device

hacker-h avatar Feb 24 '22 17:02 hacker-h

@hacker-h If you do one properly you get the other. Obviously, you don't need to support every resolution but supporting phone resolution with minimum sizes before switching and adding options for UI and font scaling make it so that virtually every resolution ends up being supported. This is very standard for most apps and websites now, with a lot of tools available that do most of the work.

Aesir avatar Feb 26 '22 20:02 Aesir