Style the green 'online now' dot entirely in CSS.

This lets us clean up the HTML a little bit in preparation
for a later change which will cause the stream and people
lists to scroll independently of one another.

Also it feels a bit more fun.

(imported from commit b3b49149d7ec2960fd752fe50b41e55d363c1a98)
This commit is contained in:
Waseem Daher
2013-02-11 23:15:19 -05:00
parent 096e1b7727
commit 30bed51a65
3 changed files with 13 additions and 21 deletions

View File

@@ -125,10 +125,8 @@ var people_list = [
<li id="filtpers"><a href="#narrow/is/private-message">All private messages</a></li>
</div>
<hr>
<div id="user_presences_scroll">
<div id="user_presences">
</div>
</div>
</ul>
</div>
</div>

View File

@@ -924,7 +924,7 @@ exports.set_presence_list = function(users, presence_info) {
e.preventDefault();
});
if (presence_info[email]) {
user.prepend($('<img>').addClass('active-icon').attr('src', '/static/images/green-dot.png'));
user.addClass('active-icon');
}
$('#user_presences').append(user);

View File

@@ -80,11 +80,21 @@ a:hover code {
margin-top: 1em;
overflow-y: hidden;
}
.bottom_sidebar:hover {
overflow-y: auto;
}
#user_presences li {
margin-left: 15px;
}
#user_presences li.active-icon {
margin-left: 0px;
}
#user_presences li.active-icon:before {
content: url(/static/images/green-dot.png);
margin-right: 6px; /* +9px image = 15px */
}
ul.filters {
list-style-type: none;
padding-right: 1em;
@@ -876,19 +886,3 @@ table.floating_recipient {
max-height: 400px;
overflow-y: scroll;
}
li img.active-icon {
margin-left: -14px;
margin-right: 4px;
margin-bottom: 2px;
}
#user_presences_scroll {
max-height: 20em;
overflow: auto;
}
#user_presences {
margin-left: 16px;
}