Browse code
Upravy v CSS tykajuce sa dlhych mien, stavov. Nastavene lepsie poziciovanie vyberu stavu.
Cinan Rakosnik authored on 20/05/2013 at 15:46:32Showing 2 changed files
- app/assets/javascripts/backbone/templates/contacts/contact.hamlc
- app/assets/stylesheets/chat.css.scss
| ... | ... |
@@ -1,7 +1,7 @@ |
| 1 | 1 |
.avatar |
| 2 | 2 |
%img{src: "#{@avatar || 'assets/avatar.png'}", alt: I18n.t("chat.roster.avatar_alt") , title: "#{@jid}" }
|
| 3 | 3 |
%h1 |
| 4 |
- %span{ title: "#{@jid}" } #{@name}
|
|
| 4 |
+ %span.name{ title: "#{@jid}" } #{@name}
|
|
| 5 | 5 |
%span.status.icon-record{class: "#{@status}"}
|
| 6 | 6 |
%h2 #{@message}
|
| 7 | 7 |
%span.action |
| ... | ... |
@@ -71,6 +71,22 @@ |
| 71 | 71 |
font-size: 12px; |
| 72 | 72 |
color: $black; |
| 73 | 73 |
text-shadow: white 1px 1px; |
| 74 |
+ |
|
| 75 |
+ .name {
|
|
| 76 |
+ overflow: hidden; |
|
| 77 |
+ text-overflow: ellipsis; |
|
| 78 |
+ white-space: nowrap; |
|
| 79 |
+ display: inline-block; |
|
| 80 |
+ max-width: 66%; |
|
| 81 |
+ float: left; |
|
| 82 |
+ } |
|
| 83 |
+ } |
|
| 84 |
+ |
|
| 85 |
+ h2 {
|
|
| 86 |
+ overflow: hidden; |
|
| 87 |
+ text-overflow: ellipsis; |
|
| 88 |
+ white-space: nowrap; |
|
| 89 |
+ max-width: 66%; |
|
| 74 | 90 |
} |
| 75 | 91 |
|
| 76 | 92 |
h3 {
|
| ... | ... |
@@ -80,12 +96,14 @@ |
| 80 | 80 |
|
| 81 | 81 |
.rolldown {
|
| 82 | 82 |
clear: both; |
| 83 |
- left: 67px; |
|
| 84 |
- position: absolute; |
|
| 85 |
- width: 67px; |
|
| 83 |
+ left: 59px; |
|
| 84 |
+ width: 72px; |
|
| 86 | 85 |
font-weight: normal; |
| 87 | 86 |
float: left; |
| 88 | 87 |
z-index: 10; |
| 88 |
+ margin: 2px; |
|
| 89 |
+ position: absolute; |
|
| 90 |
+ top: 60px; |
|
| 89 | 91 |
|
| 90 | 92 |
a {
|
| 91 | 93 |
color: $status-color; |
| ... | ... |
@@ -109,7 +127,6 @@ |
| 109 | 109 |
position: relative; |
| 110 | 110 |
top: 2px; |
| 111 | 111 |
font-size: 13px; |
| 112 |
- float: right; |
|
| 113 | 112 |
} |
| 114 | 113 |
} |
| 115 | 114 |
|
| ... | ... |
@@ -281,14 +298,22 @@ |
| 281 | 281 |
background: $bg-roster; |
| 282 | 282 |
} |
| 283 | 283 |
} |
| 284 |
+ |
|
| 285 |
+ .action {
|
|
| 286 |
+ background: $bg-roster; |
|
| 287 |
+ margin-right: 0; |
|
| 288 |
+ } |
|
| 284 | 289 |
} |
| 285 | 290 |
|
| 286 | 291 |
.action {
|
| 287 |
- margin-right: 5px; |
|
| 288 |
- margin-top: -31px; |
|
| 292 |
+ margin-right: 10px; |
|
| 293 |
+ margin-top: -33px; |
|
| 289 | 294 |
float: right; |
| 290 | 295 |
width: 67px; |
| 291 | 296 |
color: #7e8b90; |
| 297 |
+ position: relative; |
|
| 298 |
+ width: auto; |
|
| 299 |
+ background: #fbfbfb; |
|
| 292 | 300 |
|
| 293 | 301 |
.icon-bubble, .icon-bubbles, .icon-x-full, .icon-owner, .icon-make-owner {
|
| 294 | 302 |
display: none; |
| ... | ... |
@@ -349,6 +374,7 @@ |
| 349 | 349 |
font-size: 15px; |
| 350 | 350 |
position: relative; |
| 351 | 351 |
top: 1px; |
| 352 |
+ margin-left: 5px; |
|
| 352 | 353 |
|
| 353 | 354 |
&.online, &.away, &.dnd, &.offline {
|
| 354 | 355 |
font-size: 11px; |