928199 - user's project display does not have enough room to show the thumbnail ifs it has a lot of tags

Status: RESOLVED WONTFIX

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Scott [:thecount] Downe]

If a project has a lot of tags, and you view it in someone's project search, like https://webmaker.org/en-US/search?type=user&q=brett

The tags push the thumbnail out of view. Thumbnail might be more important here. maybe toggle the tags on and off on hover? and have them overlap over the thumbnail instead of push it down.

Comment 1

[Brett Gaylor [:brett]]

lol

Comment 3

[Jacob [:Jacob]]

As Scott wrote here - https://bugzilla.mozilla.org/show_bug.cgi?id=932470#c1

We should consider tag length, and how many tags can exist, in all places they are displayed. Having a ... truncate, and expand on hover is good.

Currently hitting us on Starter Makes page as Kat noted - https://bugzilla.mozilla.org/show_bug.cgi?id=938187

We need to cut down the tags i.e. Max Capacity's music video http://webmaker.org/starter-makes

Comment 4

[Jacob [:Jacob]]

For starters, as suggested in bug# 932470 let's truncate or remove all tutorial- tags since they are guaranteed to be super long, as they contain a URL in them and they are blocking our starter makes

Comment 5

[Scott [:thecount] Downe]

Attachment: https://github.com/mozilla/webmaker.org/pull/495

I'm not sure the extent we need to worry about tutorials.

I tried to deal with large tag links, and expand on hover, but it's pretty pointless if there is no space in the tag, which tutorials do not have spaces.

I'm actually on the side that we don't need to worry about tutorial tags if we only display on hover.

Comment 6

[inactivate account for kate]

Comment on attachment 831821 [details] [review]
https://github.com/mozilla/webmaker.org/pull/495

The hover state for the search page works great!

A few issues though:

* Very long lists of tags get the last one cut off, e.g.
https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/hu6d9rvk.png

* There is a lot of needless whitespace by putting each tag on a separate line that is almost always unnecessary

* The problem of tutorial tags being long and incomprehensible exists on other pages, such as starter-makes: https://dl.dropboxusercontent.com/spa/udzcfdb4yizzlua/u2nqydw9.png

The hover state on the individual tutorial tags, in my opinion, is mostly unnecessary and awkward... the tutorial urls (particularly with escaped punctuation) are not particularly meaningful anyway. Why not just filter them out with a regex in lib/makeapi?

If you want to land just the search hover state, I think that would be good for this ticket, but you should reopen removing tutorials from the list of tags.

Comment 7

[Scott [:thecount] Downe]

Comment on attachment 831821 [details] [review]
https://github.com/mozilla/webmaker.org/pull/495

Updated.

Comment 8

[inactivate account for kate]

Comment on attachment 831821 [details] [review]
https://github.com/mozilla/webmaker.org/pull/495

Run grunt and rebase before you land

Comment 9

[Scott [:thecount] Downe]

This ended up being landed in another ticket.

This can be closed, it's not so bad anymore.