Redesign card view

[stefan-niedermann]

Design session for the Android client with @jancborchardt brought up a detail issue:

Instead of displaying an icon when a description is present we will show on android the first line (truncated description).

Maybe this should be the same behavior on the server app?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[juliusknorr]

Makes sense to me 👍

[stefan-niedermann]

Just for docu: this is how a card looks like on the Android app currently:

[juliusknorr]

@jancborchardt I'm not sure if we actually should condense the labels, this makes them look to similar to avatars and also doesn't provide enought information what the label is about. The text should be fully visible I think, since otherwise users will always need to remember which labels they have on their boards and the first letter isn't a clear indicator. Just think of labels as we use them in the server repo, where we prefix labels for grouping. ("feature: files" and "feature: settings" have the same color and same beginning but they still should be distinguishable in the UI)

[juliusknorr]

@stefan-niedermann Appart from the comment above the new layout looks much cleaner. 👍 Avatars are displayed in the bottom right (just to have that referenced here as well)

[fti7]

Why not moving the labels to the top? like in the other kanban tools?
Trello usually condenses it by default.
In the most Boards there are just a handful Labels; No need for a Text
But it also allow to uncondense it via an Click.

Personally i would also like to see such an layout in the Web App. The current layout needs too much space if you have many cards :-)

[jancborchardt]

@fti7 the first screenshot looks really good, but the issue here is that then the label only relies on color as a distinction and would thus be difficult to distinguish for people with color vision difficulties.

But it also allow to uncondense it via an Click.

Click/tap opens the details at the moment.

---

@stefan-niedermann I don’t fully remember what was the last state but I remember we had a nice solution in the Android app on the last day of the Contributor Week after the input of @jenniferpiperek? As far as I remember we and @juliushaertl were quite happy with that. Could you post a screenshot? :)

[juliusknorr]

@jancborchardt This is the android app layout #938 (comment)

This is the current look in the web UI:
Compact:

Normal

As written above I'm not to happy with just showing the first letter of the label, as this might lead to confusion if users have multiple labels of the same color.

Since we have a compact view in the web UI, how about just showing color labels on that compact mode and expand the information if the regular mode is used similar to this:

Compact:

Normal:

I would prefer to not move the labels to the top, since they distract from what is actually the main information, the card name.

[jancborchardt]

This is the android app layout #938 (comment)

Yep, I got that, but since it was from March 14 I thought on the last day of the hackweek we did some additional work on it? I had remembered @stefan-niedermann worked on it some more with some layout improvements. Maybe I misremember.

[jakobroehrl]

@jancborchardt
What do you think about the last state? (Server App)

Thanks!

[jancborchardt]

@jakobroehrl good stuff! Only 2 things:

• I’d say tags should never wrap lines but be forced into one line. If there’s more tags, they should just ellipsize. Maybe with flexbox so each of the tags ellipsizes a bit?
• The people avatars/circles should overlap a bit like we do in the Text app:
  

[jakobroehrl]

@jancborchardt Thanks, I will try to implement it.
Maybe you could review the complete VUE Implementation when we are ready to release?