Add nº comments counter in card M proposals

[arnaumonty]

In order to show the level of deliberation in each proposal we should show the number of comments in each one:

• Show number of comments (Show it in full view XL too)
• Remove Reference proposal.

Example:

[furilo]

@decidim/product I guess we can work on this, along side #168 right? Should we move this to Ready and start?

[carolromero]

@furilo yes, it makes sense to think about it at the same time :)

[javierarce]

Here's the revamp of this card:

Our intention with the redistribution of the elements (date, comments, and author) is to put the important elements in a fixed and predictable position. By moving the author name below the description, both the date and the comment indicators will always appear at the same horizontal distance from the left border of the box. The author (thanks to its icon) will remain visible.

We are currently working on the redesign of the other cards, so let me show you a little sneak peak :)

[xabier]

hi @javierarce this progress is looking good!

I very much like the idea of the status bar. Unless we want to use colors for something else.

I am curious: why did you choose to put the author-name below? Isn't is almost a standar to put it below the title?

On the other hand, and this is relevant now, please have a look at this feature that is under development: #2360

Development is going very fast :)

One extra constraint that is important to keep in mind for future developments: consider how cards will look when combined together in the same grid. This is going to be the case sometime in the near future.

[javierarce]

I am curious: why did you choose to put the author-name below? Isn't is almost a standar to put it below the title?

My rationale for that is to avoid overloading the header of the card with a lot of information. The author at the bottom of the card serves as a kind of "signed by" indicator.

In any case, we are trying different directions:

One extra constraint that is important to keep in mind for future developments: consider how cards will look when combined together in the same grid. This is going to be the case sometime in the near future.

👌

[deivid-rodriguez]

Yes, please, take into account that we'll probably want the nickname (in @nickname format) listed there as well (that's what you meant by referencing that ticket, right @xabier?)

[josepjaume]

Hey, just seen this. Just wanted to congratulate you 👍 . Very good work! Eager to implement this!

[xabier]

@javierarce nice work. still please consider that in newspapers, blogs, etc. the author is always displayed bellow the title, I don't understand why we don't. Is there any reason?. I would try to optimize from what we already have and works. I also think that tags bellow is also clear, and I very much like the standard of adding and differentiation and action/counter section bellow.

[javierarce]

I don't understand why we don't. Is there any reason?.

Yes, as I said, I didn't want to cram the top of the card with a lot of information. If we want to put the title, name (and nickname), date, category, comment count, and rejected status on top we are going to end up a very fat header with bad visual hierarchy.

That's was rationale for my decision, but I'll design a version with the username under the title so we can compare :)

[javierarce]

Ok, new proposal for the cards (and this time with the author information under the card title :) )

https://marvelapp.com/7a1294h

For the verified badge I thought we could use this icon for the official related users and organizations and the star (maybe in a different color) for other kind of verified users:

[carolromero]

Wow this looks super nice @javierarce ! I think we're getting closer to what we have in mind :)

[xabier]

@javierarce we are getting there... this looks really good!

Yes, as I said, I didn't want to cram the top of the card with a lot of information. If we want to put the title, name (and nickname), date, category, comment count, and rejected status on top we are going to end up a very fat header with bad visual hierarchy.

I understand... it makes sense, sorry I didn't read your original explanation 😞 also I have been noticed that Twitter puts the author on top. Still, the hierarchy is important and the fact that we want to promote the content of proposal more than the author still makes me think that it is better not to put the author on the top. I like the new version you uploaded. Let's improve from here (if needed!)

[xabier]

Something that I very much like from how we are getting there is the idea to distinguish functional rows on the card. Maybe we can work even more in this direction. The idea of having rows this way is that once we get into the right design we can extrapolate to other cards.

If we work in this direction... the two last rows, [status|dates|endosement|comments] and [support-bar|supor-action], mix different types kind of information. Whereas status and dates are data that all proposal cards will have, the different actions might not always be available or activated, nor the progress bar. Should we try to mantain them separate? action in one (or two) rows, and metadata (such as status and date) separated?

[xabier]

For the verified badge I thought we could use this icon for the official related users and organizations and the star (maybe in a different color) for other kind of verified users

Please @javierarce contribute here ASAP with an svg for @decidim/lot-core -- > decidim/decidim#2336

[javierarce]

If we work in this direction... the two last rows, [status|dates|endosement|comments] and [support-bar|supor-action], mix different types kind of information. Whereas status and dates are data that all proposal cards will have, the different actions might not always be available or activated, nor the progress bar. Should we try to mantain them separate? action in one (or two) rows, and metadata (such as status and date) separated?

My intention is that the last row will always have the most important action (like support/vote, publish, etc.) and the key metric (number of supports). The bar on top will have metadata: like the status & date, and counters (number of comments and number of adhesions). Those counters will be links that bring users to the card view, so they won't update the card status like the main CTA (so if you click on the comment counter, you'll go to the comment section of the card view; and if you click on the adhesion counter, you'll go to the card view so you can read the card and decide if you want to give your adhesion).

[xabier]

My intention is that the last row will always have the most important action (like support/vote, publish, etc.) and the key metric (number of supports). The bar on top will have metadata: like the status & date, and counters (number of comments and number of adhesions). Those counters will be links that bring users to the card view, so they won't update the card status like the main CTA (so if you click on the comment counter, you'll go to the comment section of the card view; and if you click on the adhesion counter, you'll go to the card view so you can read the card and decide if you want to give your adhesion).

I have the intuition that we might want to have more actuable cards, meaning that I will like to Endorse directly for example. However, we can't iterate forever. So my suggestion is to freeze this now. And then we test it and see how it works, and maybe return to this in one or two months if needed. The design looks great and we need to start deploying. @decidim/product any inconvenient?

[carolromero]

+1 to go ahead with this design and see how it goes.

Those counters will be links that bring users to the card view, so they won't update the card status like the main CTA (so if you click on the comment counter, you'll go to the comment section of the card view; and if you click on the adhesion counter, you'll go to the card view so you can read the card and decide if you want to give your adhesion).

Regarding counters being links to the card main view, the case for comments is very clear, since you actually need the text box to add a comment.
Also with Endorsements, having to enter the main view gives us the opportunity to better explain what that action consists of and the difference with Supports.

[Crashillo]

PR decidim/decidim#2439