Browse code
Rozne male upravy v CSS
Cinan Rakosnik authored on 20/05/2013 at 14:22:55Showing 4 changed files
- app/assets/javascripts/backbone/templates/contacts/me.hamlc
- app/assets/javascripts/backbone/views/contacts/me.js.coffee
- app/assets/stylesheets/application.css.scss
- app/assets/stylesheets/chat.css.scss
| ... | ... |
@@ -7,22 +7,21 @@ |
| 7 | 7 |
%p change |
| 8 | 8 |
%h1 |
| 9 | 9 |
%input{ type: 'text', title: "#{@jid}", class: 'js-edit-name', value: "#{@name}"}
|
| 10 |
- %h2 #{@message || '<input type="text" class="js-edit-status empty" value="'+I18n.t('chat.roster.change_status_msg')+'">' }
|
|
| 11 |
- -#todo: nastylovat placeholder |
|
| 10 |
+ %h2{style: 'margin-top: -5px'} #{@message || '<input type="text" class="js-edit-status empty" value="'+I18n.t('chat.roster.change_status_msg')+'">' }
|
|
| 12 | 11 |
%h3 |
| 13 | 12 |
.rolldown.js-change-state |
| 14 | 13 |
.js-state-clickable{ 'data-state' => 'online' }
|
| 15 | 14 |
%span.status.icon-record.online |
| 16 | 15 |
%a.active{ href: '#' }
|
| 17 | 16 |
Online |
| 18 |
- %br |
|
| 17 |
+ %span.icon-arrow-down.drop-down |
|
| 19 | 18 |
.hidden.js-state-clickable{ 'data-state' => 'away' }
|
| 20 | 19 |
%span.status.icon-record.away |
| 21 | 20 |
%a{ href: '#' }
|
| 22 | 21 |
Away |
| 23 |
- %br |
|
| 22 |
+ %span.icon-arrow-down.drop-down |
|
| 24 | 23 |
.hidden.js-state-clickable{ 'data-state' => 'dnd' }
|
| 25 | 24 |
%span.status.icon-record.dnd |
| 26 | 25 |
%a{ href: '#' }
|
| 27 | 26 |
DND |
| 28 |
- %span.icon-arrow-down.drop-down |
|
| 29 | 27 |
\ No newline at end of file |
| 28 |
+ %span.icon-arrow-down.drop-down |
|
| 30 | 29 |
\ No newline at end of file |
| ... | ... |
@@ -83,6 +83,7 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
| 83 | 83 |
.find('.hidden').removeClass('hidden')
|
| 84 | 84 |
|
| 85 | 85 |
$('.rolldown').removeClass('js-change-state')
|
| 86 |
+ .find('.drop-down').addClass('hidden')
|
|
| 86 | 87 |
|
| 87 | 88 |
confirmChangeState: (e) -> |
| 88 | 89 |
$this = $(e.currentTarget) |
| ... | ... |
@@ -92,6 +93,7 @@ class Xmpp.Views.Contacts.MeView extends Backbone.View |
| 92 | 92 |
.children().addClass('hidden')
|
| 93 | 93 |
|
| 94 | 94 |
$('.rolldown').find('a').removeClass('active')
|
| 95 |
+ .find('.drop-down').removeClass('hidden')
|
|
| 95 | 96 |
|
| 96 | 97 |
$this.removeClass('hidden')
|
| 97 | 98 |
.find('a').addClass('active')
|
| ... | ... |
@@ -43,6 +43,7 @@ |
| 43 | 43 |
.wrap {
|
| 44 | 44 |
overflow-y: auto; |
| 45 | 45 |
overflow-x: hidden; |
| 46 |
+ width: 210px; |
|
| 46 | 47 |
} |
| 47 | 48 |
} |
| 48 | 49 |
|
| ... | ... |
@@ -75,7 +76,7 @@ |
| 75 | 75 |
h3 {
|
| 76 | 76 |
font-size: 12px; |
| 77 | 77 |
color: $status-color; |
| 78 |
- margin-top: -3px; |
|
| 78 |
+ margin-top: -2px; |
|
| 79 | 79 |
|
| 80 | 80 |
.rolldown {
|
| 81 | 81 |
clear: both; |
| ... | ... |
@@ -84,24 +85,31 @@ |
| 84 | 84 |
width: 67px; |
| 85 | 85 |
font-weight: normal; |
| 86 | 86 |
float: left; |
| 87 |
+ z-index: 10; |
|
| 88 |
+ |
|
| 87 | 89 |
a {
|
| 88 | 90 |
color: $status-color; |
| 89 | 91 |
} |
| 90 | 92 |
|
| 91 | 93 |
&.editing {
|
| 92 | 94 |
background: white; |
| 95 |
+ @include box-shadow(rgba(33,87,81, 0.4) 0 0 2px); |
|
| 93 | 96 |
} |
| 94 | 97 |
|
| 95 | 98 |
.active {
|
| 96 | 99 |
font-weight: bold; |
| 97 | 100 |
} |
| 101 |
+ |
|
| 102 |
+ div {
|
|
| 103 |
+ clear: both; |
|
| 104 |
+ } |
|
| 98 | 105 |
} |
| 99 | 106 |
|
| 100 | 107 |
.drop-down {
|
| 101 | 108 |
position: relative; |
| 102 |
- top: 1px; |
|
| 103 |
- left: 54px; |
|
| 109 |
+ top: 2px; |
|
| 104 | 110 |
font-size: 13px; |
| 111 |
+ float: right; |
|
| 105 | 112 |
} |
| 106 | 113 |
} |
| 107 | 114 |
|
| ... | ... |
@@ -252,6 +260,7 @@ |
| 252 | 252 |
padding: 8px 10px; |
| 253 | 253 |
background: white; |
| 254 | 254 |
border-right: 0 !important; |
| 255 |
+ z-index: 1; |
|
| 255 | 256 |
|
| 256 | 257 |
li {
|
| 257 | 258 |
background: white; |
| ... | ... |
@@ -275,7 +284,7 @@ |
| 275 | 275 |
} |
| 276 | 276 |
|
| 277 | 277 |
.action {
|
| 278 |
- margin-right: 2px; |
|
| 278 |
+ margin-right: 5px; |
|
| 279 | 279 |
margin-top: -31px; |
| 280 | 280 |
float: right; |
| 281 | 281 |
width: 67px; |
| ... | ... |
@@ -289,6 +298,10 @@ |
| 289 | 289 |
padding-right: 10px; |
| 290 | 290 |
padding-top: 1px; |
| 291 | 291 |
|
| 292 |
+ &:hover {
|
|
| 293 |
+ cursor: pointer; |
|
| 294 |
+ } |
|
| 295 |
+ |
|
| 292 | 296 |
&:before {
|
| 293 | 297 |
margin-left: 6px; |
| 294 | 298 |
} |
| ... | ... |
@@ -335,7 +348,7 @@ |
| 335 | 335 |
.status {
|
| 336 | 336 |
font-size: 15px; |
| 337 | 337 |
position: relative; |
| 338 |
- top: 2px; |
|
| 338 |
+ top: 1px; |
|
| 339 | 339 |
|
| 340 | 340 |
&.online, &.away, &.dnd, &.offline {
|
| 341 | 341 |
font-size: 11px; |