moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-25 18:52:20 -05:00
Code Issues Releases Wiki Activity

[ux] make vertical alignment work properly in roster

Browse Source
This commit is contained in:
karolinaszczur 2013-09-27 18:36:04 +02:00
parent e9f8e5efc6
commit 56407a7d54
4 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
clientapp/templates.js
View File

@ -46,12 +46,12 @@ exports.includes.bareMessage = function anonymous(locals) {
exports.includes.contactListItem = function anonymous(locals) {
var buf = [];
with (locals || {}) {
buf.push('<li class="contact"><img' + jade.attrs({
buf.push('<li class="contact"><div class="wrap"><img' + jade.attrs({
src: contact.avatar,
"class": "avatar"
}, {
src: true
}) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></li>");
}) + '/><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><div class="status">' + jade.escape(null == (jade.interp = contact.status) ? "" : jade.interp) + "</div></div></li>");
}
return buf.join("");
};

13
clientapp/templates/includes/contactListItem.jade
View File

@ -1,8 +1,9 @@
li.contact
img.avatar(src=contact.avatar)
.user
span.name=contact.displayName
span.idleTime=contact.idleSince
.unread=contact.unreadCount
.status=contact.status
.wrap
img.avatar(src=contact.avatar)
.user
span.name=contact.displayName
span.idleTime=contact.idleSince
.unread=contact.unreadCount
.status=contact.status

16
public/css/app/roster.styl
View File

@ -49,19 +49,27 @@
text-transform: uppercase
#roster,
#bookmarks
#bookmarks
li
display: table
list-style-type: none
padding: 7px 35px 7px 10px
margin: 0px
position: relative
min-height: 30px
min-height: 40px
font-size: $fontSmall
color: #fff
cursor: pointer
transition: all .3s ease-in 0
-webkit-transition: all .3s ease-in 0
-moz-transition: all .3s ease-in 0
width: 100%
borderbox()
.wrap
display: table-cell
vertical-align: middle
.unread:not(:empty)
display: block
@ -146,7 +154,6 @@
.user
margin-left: 40px
line-height: 30px
color: white
width: 70%
@ -163,9 +170,6 @@
margin: 0
margin-left: 40px
&:not(:empty)
margin-top: -8px
.unread
display: none
color: white

17
public/css/otalk.css
View File

@ -371,11 +371,12 @@ h3 {
}
#roster li,
#bookmarks li {
display: table;
list-style-type: none;
padding: 7px 35px 7px 10px;
margin: 0px;
position: relative;
min-height: 30px;
min-height: 40px;
font-size: 12px;
color: #fff;
cursor: pointer;
@ -385,6 +386,15 @@ h3 {
-moz-transition: all 0.3s ease-in 0;
-webkit-transition: all 0.3s ease-in 0;
-moz-transition: all 0.3s ease-in 0;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#roster li .wrap,
#bookmarks li .wrap {
display: table-cell;
vertical-align: middle;
}
#roster li .unread:not(:empty),
#bookmarks li .unread:not(:empty) {
@ -512,7 +522,6 @@ h3 {
#roster li .user,
#bookmarks li .user {
margin-left: 40px;
line-height: 30px;
color: #fff;
width: 70%;
}
@ -531,10 +540,6 @@ h3 {
margin: 0;
margin-left: 40px;
}
#roster li .status:not(:empty),
#bookmarks li .status:not(:empty) {
margin-top: -8px;
}
#roster li .unread,
#bookmarks li .unread {
display: none;