thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Clean up bottom bar styles

Browse source 
// FREEBIE
This commit is contained in:
lilia 2016-03-21 17:17:39 -07:00
parent 234f937bc7
commit d3b035121d
5 changed files with 10 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
background.html
View file

@ -82,7 +82,7 @@
</div> </div>
<div class='bottom-bar' id='footer'> <div class='bottom-bar' id='footer'>
<form class='send'> <form class='send clearfix'>
<div class='attachment-previews'></div> <div class='attachment-previews'></div>
<div class='choose-file'> <div class='choose-file'>
<div class='paperclip thumbnail'></div> <div class='paperclip thumbnail'></div>

9
js/views/conversation_view.js
View file

@ -92,7 +92,7 @@
'click' : 'onClick', 'click' : 'onClick',
'select .message-list .entry': 'messageDetail', 'select .message-list .entry': 'messageDetail',
'force-resize': 'forceUpdateMessageFieldSize', 'force-resize': 'forceUpdateMessageFieldSize',
'click .choose-file': 'focusMessageField', 'click .bottom-bar': 'focusMessageField',
'loadMore .message-list': 'fetchMessages', 'loadMore .message-list': 'fetchMessages',
'focus .send-message': 'focusBottomBar', 'focus .send-message': 'focusBottomBar',
'blur .send-message': 'unfocusBottomBar', 'blur .send-message': 'unfocusBottomBar',
@ -282,13 +282,6 @@
this.view.measureScrollPosition(); this.view.measureScrollPosition();
window.autosize(this.$messageField); window.autosize(this.$messageField);
var $attachmentPreviews = this.$('.attachment-previews'),
$bottomBar = this.$('.bottom-bar');
$bottomBar.outerHeight(
this.$messageField.outerHeight() +
$attachmentPreviews.outerHeight() + 12);
this.view.scrollToBottomIfNeeded(); this.view.scrollToBottomIfNeeded();
}, },

4
stylesheets/_conversation.scss
View file

@ -470,9 +470,9 @@
} }
.bottom-bar { .bottom-bar {
box-sizing: content-box;
$button-width: 36px; $button-width: 36px;
padding: 5px 1px 5px 0; padding: 5px 1px 5px 0;
height: 50px;
background: $grey_l; background: $grey_l;
form.active { form.active {
@ -481,6 +481,7 @@
form.send { form.send {
background: #ffffff; background: #ffffff;
padding-bottom: 1px;
} }
button, input, textarea { button, input, textarea {
@ -543,7 +544,6 @@
.send-message { .send-message {
display: block; display: block;
width: calc(100% - #{$button-width}); width: calc(100% - #{$button-width});
min-height: $button-height - 1px;
max-height: 100px; max-height: 100px;
padding: 10px; padding: 10px;
border: 0; border: 0;

4
stylesheets/_global.scss
View file

@ -142,8 +142,6 @@ button.back {
.file-input { .file-input {
position: relative; position: relative;
box-sizing: content-box;
border: 1px transparent solid;
.choose-file { .choose-file {
cursor: pointer; cursor: pointer;
} }
@ -185,7 +183,7 @@ button.back {
} }
.dropoff { .dropoff {
border: 1px #2090ea dashed; outline: solid 1px #2090ea;
} }
img.emoji { img.emoji {

12
stylesheets/manifest.css
View file

@ -121,9 +121,7 @@ button.back {
background-color: #f3f3f3; } background-color: #f3f3f3; }
.file-input { .file-input {
position: relative; position: relative; }
box-sizing: content-box;
border: 1px transparent solid; }
.file-input .choose-file { .file-input .choose-file {
cursor: pointer; } cursor: pointer; }
.file-input .paperclip { .file-input .paperclip {
@ -156,7 +154,7 @@ button.back {
text-align: center; } text-align: center; }
.dropoff { .dropoff {
border: 1px #2090ea dashed; } outline: solid 1px #2090ea; }
img.emoji { img.emoji {
height: 1em; height: 1em;
@ -987,13 +985,14 @@ input.search {
margin-top: 5px; } margin-top: 5px; }
.bottom-bar { .bottom-bar {
box-sizing: content-box;
padding: 5px 1px 5px 0; padding: 5px 1px 5px 0;
height: 50px;
background: #f3f3f3; } background: #f3f3f3; }
.bottom-bar form.active { .bottom-bar form.active {
outline: solid 1px #2090ea; } outline: solid 1px #2090ea; }
.bottom-bar form.send { .bottom-bar form.send {
background: #ffffff; } background: #ffffff;
padding-bottom: 1px; }
.bottom-bar button, .bottom-bar input, .bottom-bar textarea { .bottom-bar button, .bottom-bar input, .bottom-bar textarea {
color: #454545; } color: #454545; }
.bottom-bar button { .bottom-bar button {
@ -1036,7 +1035,6 @@ input.search {
.bottom-bar .send-message { .bottom-bar .send-message {
display: block; display: block;
width: calc(100% - 36px); width: calc(100% - 36px);
min-height: 35px;
max-height: 100px; max-height: 100px;
padding: 10px; padding: 10px;
border: 0; border: 0;