moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-12-01 13:42:16 -05:00
Code Issues Releases Wiki Activity

[ux] fix avatars in chat, improve messaging

Browse Source
This commit is contained in:
karolinaszczur 2013-09-26 13:03:35 +02:00
parent 324d5cc890
commit 2ffecb060d
2 changed files with 11 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/css/app/chat.styl
View File

@ -66,7 +66,6 @@
bottom: 75px bottom: 75px
width: 100% width: 100%
borderbox() borderbox()
background: lighten($activeBlue, 97%)
li li
position: relative position: relative
@ -74,7 +73,7 @@
list-style: none list-style: none
padding: 10px 0 padding: 10px 0
width: 100% width: 100%
min-height: 40px min-height: 50px
display: block display: block
borderbox() borderbox()
border-bottom: 1px solid $grayOutline border-bottom: 1px solid $grayOutline
@ -83,16 +82,14 @@
border: none border: none
.messageAvatar .messageAvatar
position: relative position: absolute
display: inline-block top: 50%
float: left left: 10px
width: 30px margin-top: -15px
height: 30px
margin: 0px 8px 8px 8px
img img
avatar() avatar()
border: 1px solid red
.name .name
text-indent: -9999em text-indent: -9999em
position: absolute position: absolute

14
public/css/otalk.css
View File

@ -683,7 +683,6 @@ h3 {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: #f7fdff;
} }
.messages li { .messages li {
position: relative; position: relative;
@ -691,7 +690,7 @@ h3 {
list-style: none; list-style: none;
padding: 10px 0; padding: 10px 0;
width: 100%; width: 100%;
min-height: 40px; min-height: 50px;
display: block; display: block;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -702,12 +701,10 @@ h3 {
border: none; border: none;
} }
.messages li .messageAvatar { .messages li .messageAvatar {
position: relative; position: absolute;
display: inline-block; top: 50%;
float: left; left: 10px;
width: 30px; margin-top: -15px;
height: 30px;
margin: 0px 8px 8px 8px;
} }
.messages li .messageAvatar img { .messages li .messageAvatar img {
width: 30px; width: 30px;
@ -718,7 +715,6 @@ h3 {
-o-border-radius: 50px; -o-border-radius: 50px;
-border-radius: 50px; -border-radius: 50px;
border-radius: 50px; border-radius: 50px;
border: 1px solid #f00;
} }
.messages li .messageAvatar .name { .messages li .messageAvatar .name {
text-indent: -9999em; text-indent: -9999em;