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

DRY up scrollable pattern

Browse source 
Switch to using gutter class instead of id since there is potentially
more than one usage on the page.
This commit is contained in:
lilia 2015-03-09 14:50:50 -07:00
parent a72ea7966d
commit c73f4d71a7
4 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -17,8 +17,8 @@
<div class='title-bar' id='header'>
<div class='socket-status'></div>
</div>
<div id='gutter' class='gutter'>
<div id='contacts'></div>
<div class='gutter'>
<div class='conversations scrollable'></div>
<span class='fab'></span>
</div>
</script>
@ -52,24 +52,26 @@
<button class='back'></button>
<span class='title-text'>New Message</span>
</div>
<div id='gutter' class='gutter'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='paperclip'></div>
<input type='file' name='avatar' class='file-input'>
<div class='gutter'>
<div class='scrollable'>
<div class='new-group-update-form clearfix'>
<div class='group-avatar'>
<div class='paperclip'></div>
<input type='file' name='avatar' class='file-input'>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='new-message' placeholder="Name or phone number" />
</div>
<div class='buttons'>
<button class='create'>Next</button>
</div>
<div class='results'>
<div class='new-contact contact'></div>
<div class='contacts'></div>
</div>
<input type='text' name='name' class='name' placeholder='Group Name' value="{{ name }}">
</div>
<div class='recipients-container'>
<span class='recipients'></span>
<input type='text' class='new-message' placeholder="Name or phone number" />
</div>
<div class='buttons'>
<button class='create'>Next</button>
</div>
<div class='results'>
<div class='new-contact contact'></div>
<div class='contacts'></div>
</div>
</div>
</script>

3
js/views/inbox_view.js
View file

@ -55,6 +55,7 @@
Whisper.InboxView = Whisper.View.extend({
template: $('#inbox').html(),
className: 'inbox',
initialize: function () {
this.render();
@ -64,7 +65,7 @@
this.openConversation.bind(this, null));
this.inbox = new Whisper.ConversationListView({
el : this.$el.find('#contacts'),
el : this.$el.find('.conversations'),
collection : bg.inbox
}).render();

5
stylesheets/_index.scss
View file

@ -2,10 +2,11 @@
padding: $header-height 0 0;
}
.gutter, #contacts {
.new-conversation, .inbox, .gutter {
height: 100%;
}
#contacts {
.scrollable {
height: 100%;
overflow: auto;
}

5
stylesheets/manifest.css
View file

@ -137,10 +137,11 @@ button.back {
.gutter {
padding: 36px 0 0; }
.gutter, #contacts {
.new-conversation, .inbox, .gutter {
height: 100%; }
#contacts {
.scrollable {
height: 100%;
overflow: auto; }
.socket-status {