CSS issues with popups

[amyxzhang]

all css issues with popups should go here.

[amyxzhang]

http://www.newyorker.com/magazine/2013/08/12/taken

On this website, the image in the bubble is squished to have a really small width.

[amyxzhang]

http://www.theatlantic.com/entertainment/archive/2015/03/sufjan-stevens-and-a-better-way-to-write-music-about-faith/388802/#disqus_thread

on this site, the user images are too low and thus are half in the bubble, half out.

[amyxzhang]

here is another example (maybe it just happens now and then when only 1 person in bubble??)

[amyxzhang]

on http://www.technologyreview.com/view/510646/racism-is-poisoning-online-ad-delivery-says-harvard-professor/
the bubble is under the title bar.
Setting the z-index of the bubble to 2100483646 (equal to z-index of the title bar) makes it appear above the title bar.

[amyxzhang]

Let's keep this ticket open for a little while after @LeaVerou changes in case new issues appear.

One thing I just noticed is it seems that when a picture has the yellow border around it (when you "bump" into someone, aka within 5 minutes of each other) it still has the old css it seems?

Update - after staring at the photo longer - i think my eyes might be mistaken and it's fine. maybe the yellow border isn't the best indication. What do you think @LeaVerou ?

[amyxzhang]

Also feel like the logout popup is too wide. thoughts?

[LeaVerou]

Yes, I haven't fixed those weird yellow borders etc. I definitely don't think they’re the best indication, just haven’t gotten to them yet!

And yes, the logout popup is indeed too wide. How can I reproduce it? I tried logging out and it didn’t appear.

[amyxzhang]

Hrm, I'm not exactly sure. I had to wait a while and start browsing around a bit before I got the popup.

Another example of the wide issue here. I think just setting a maximum width and letting the text wrap would be fine? Also it would be great to squeeze more of that comment into the popup if possible.

[amyxzhang]

Some more thoughts I had:
It would be nice if the mouseover alt text on the photos could look different than default. and also be more immediate on mouseover.

Also I would really like a way to differentiate visually between someone who's been on the page versus someone who's been to that site.

I also feel conflicted about the bubble for showing someone on the same site...it can certainly be annoying on the big sites but could be interesting on smaller domains. If there's a way so that we can prevent repetitive bubbles that might be nice. but I'm not sure exactly how to do that.

[LeaVerou]

Hrm, I'm not exactly sure. I had to wait a while and start browsing around a bit before I got the popup.

Hm, ok, I will try to reproduce it.

Another example of the wide issue here. I think just setting a maximum width and letting the text wrap would be fine? Also it would be great to squeeze more of that comment into the popup if possible.

Waaa?! How can I get one of these popups? I thought all they had was avatars!

It would be nice if the mouseover alt text on the photos could look different than default. and also be more immediate on mouseover.

Sure, though I think there are other things to fix with these popups that are more important at the moment.

Also I would really like a way to differentiate visually between someone who's been on the page versus someone who's been to that site.

We could use opacity for this, but opacity is also used for age, so that won’t work, we need to change how one of the two is shown. Hmm. Any ideas?

I also feel conflicted about the bubble for showing someone on the same site...it can certainly be annoying on the big sites but could be interesting on smaller domains. If there's a way so that we can prevent repetitive bubbles that might be nice. but I'm not sure exactly how to do that.

Even for bigger sites, your number of friends won’t be too large, so I don’t see it being annoying unless we’re talking about websites that almost everyone visits, like Google or Facebook.

[LeaVerou]

Also, I just noticed that in some (all?) cases it seems that the popup isn’t removed from the HTML after the fade finishes, which means the animationend event isn’t firing. This is very odd, as I’m pretty sure I tested that it was working. @amyxzhang, could you confirm this please? Thanks!

[joshblum]

whoa @LeaVerou this is awesome :D thanks so much for helping! my only nits are that I prefer the flat look of the notification since it has a more native feel for other notifications from chrome/different apps in OSx. what are the reasons for the change from flat?

[amyxzhang]

@LeaVerou you're right there seems to be a bug. If I wait for it to disappear, its HTML is still there. And then when I hover over the place where it used to be, it shows up again. Very annoying if I was trying instead to access something else that is under the popup.

Text appears anytime there is a comment or chat message on a page recently that was made by a followee. You should see text if you go that same page I put a picture of from above as I made a comment there and you are following me.

[LeaVerou]

@joshblum Especially in OSX, I’m not sure where you see the lack of consistency, as nothing is particularly flat. We do want them to be clearly distinguishable from the rest of the page.

@amyxzhang Damn, thought so. No idea why this happened I’d swear I tested it. I’ll fix it tonight.

[LeaVerou]

Also I would really like a way to differentiate visually between someone who's been on the page versus someone who's been to that site.

How about size? We could make the avatars of people who have visited this specific page bigger. A bit tricky to make it work visually when there are both sizes present though.

[joshblum]

@LeaVerou the original designed was based on the OSx growl notifications: http://boedesign.com/demos/gritter/

I much prefer this design to the current one, I agree it should be distinguishable but also think it should have a more native feel which it doesn't have at all right now. I think the growl like notifications fit in better than the current implementation.

[LeaVerou]

Growl notifications are not a default OSX component, so I’m not sure they’re a good example of a UI that is consistent with the rest of OSX. In fact, the native OSX notifications have a very different design than Growl, meaning that Apple consciously rejected it.

Funnily enough, the current design was inspired by several different Growl themes (search “growl notifications” on Google images), just not so much the default one.

External consistency with operating systems on the Web is a fool’s errand, since the same UI is displayed across different OSes and something consistent with OSX might be inconsistent with Windows and so on (e.g. think of the position of close buttons — left on OSX, right on Windows. No matter what you do, you’re being inconsistent with at least one OS). So unless we check which OS we’re on and style it differently (which I’m not sure would be a good use of resources), there’s no way to be perfectly consistent.

In any case, if @amyxzhang agrees that they should be flatter, that’s pretty easy to do.

[joshblum]

I don't think looking at what apple does as default is necessarily good since there are many things I dislike about their interfaces/defaults hence the need for customization. But yes, totally agree perfect consistency isn't easy to achieve/isn't necessary to implement. Maybe I'm just so used to the old style the new one seems out of place :p.

@karger any opinions?

[amyxzhang]

I don't have a strong opinion either way but I'm happy with the new style. I think it looks visually appealing and distinct without being too jarring/noticeable which is nice. Anyway we have way more pressing visual monstrosities/logical bugs/new features to focus on and I think we've spent enough time on this :)

[amyxzhang]

When I'm viewing a pdf I get the following:

[LeaVerou]

Whoa, that’s so bizarre.
Turns out that PDFs don’t seem to have heads, so the CSS never gets added (there is no black background — that’s part of the PDF viewer). So this must have existed for quite a while.
It should be easy to fix, will push a fix soon.

[LeaVerou]

Fixed!

[amyxzhang]

awesome thanks @LeaVerou!

[LeaVerou]

From python.org:

Turns out this is because they have a color: #4d4d4d !important; declaration for button. There is no way to override !important with specificity, the only way to override such things would be to add !important on every single property, like we had done before. However, I think this would make the code tedious to maintain and !important declarations in such generic rules are rather rare, so I would advise against it. What do you think @amyxzhang?

[amyxzhang]

I think that one is not too terrible. If we ever notice anything egregiously bad, then we can go ahead and add the important declarations at that point. Sound good?

[LeaVerou]

Well, if we take it on a case by case basis, we can fix this particular issue by adding !important only in color declarations. But it’s a slippery slope.

[amyxzhang]

This particular issue doesn't bother me too much but at some point
something might look much worse/be un-usable. At that point we can fix that
case (and any other case that is egregiously bad). That's if you really
object to using !important (it seems like you do), otherwise we can close
the loophole right here and just add it everywhere.

On Wed, Apr 8, 2015 at 10:23 PM, Lea Verou [email protected] wrote:

Well, if we take it on a case by case basis, we can fix this particular
issue by adding !important only in color declarations. But it’s a
slippery slope.

—
Reply to this email directly or view it on GitHub
#24 (comment)
.

Amy X. Zhang | Ph.D. student at MIT CSAIL | http://people.csail.mit.edu/axz
| @amyxzh