Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

+1 button adds too much vertical space on issue comments #56

Closed
davereid opened this Issue Feb 12, 2014 · 13 comments

Comments

Projects
None yet
5 participants

Right now when Zenhub modifies issue or PR comments to have +1 buttons, I feel like it just uses too much vertical space. Going to work on some alternate UI proposals. This said, I like the +1 buttons on issue/PR list pages.

Here are some ideas that wouldn't change the veritcal space for comments.

Option 1

Below user picture and to the left of the comment.
zenhub-52-alternate1

Option 2

In the comment header, to the right of the comment time
zenhub-52-alternate2

Option 3

In the comment header, right-most element (pushing any operations over)
zenhub-52-alternate3

To me, visually I like option 3 the best. It uses a consistent left-to-right location, unlike option 2.

Contributor

geoffrey commented Feb 12, 2014

I like the option 1

I liked option 1 at first, but then it felt like I was +1-ing the person, more than the contents of the comment. Which makes the presentation of option 3 for me the preferred way.

Ironically I could have made three different comments and let people +1 the different options. 😐

I think Option 3 is definitely my preferred solution here.

Contributor

constantx commented Feb 12, 2014

hi @davereid, thanks for the suggestions!

We're experiementing with the vertical space, and soon will be making good use of the available space by displaying avatars of those who +1'ed the issue/comment on the left side of the button.

This is because we see many peeking attempts into the +1 button to see who have +1'ed the issue/comments, thus will make this easier.

Look out in the next release soon :)

@constantx Hrm, I actually like that I don't have to see who +1'd the comment, just the total count. I think displaying who all +1'd would still be unnecessary information and further continues the problem of comments using too much vertical space. I like having the +1 users in the popup box on hover because it's less critical information.

I just tested by appending the +1 <a> element to div.timeline-comment-actions and it seems to work really great there without any kind of styling modification.

Edit: only downside being that div.timeline-comment-actions only exists for your own comments. Simply adding <div class="timeline-comment-actions"> into <div class="timeline-comment-header"> seems to work great as well.

I agree with @davereid on this one. One should not strive to add more to the interface. Showing who did this on hover is quite sufficient for my needs.

Contributor

constantx commented Feb 12, 2014

@davereid will definitely test it out :) Thank you for the time and suggestion man!

Contributor

roham commented May 21, 2014

In our internal test environment right now.. 😀

screenshot 2014-05-21 09 17 06

Contributor

geoffrey commented Jun 1, 2014

And... released in ZenHub production @0.6.22+ ! :)

@geoffrey geoffrey closed this Jun 1, 2014

Very nice!

davereid commented Jun 6, 2014

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment