Permalink
Browse files

finish sliding channel tabs

  • Loading branch information...
1 parent e456458 commit cb91dc890f2ce1179065424571e0c9d5b735d79c @ngokevin committed Sep 20, 2012
Showing with 90 additions and 41 deletions.
  1. +26 −21 assets/css/subway-mobile.css
  2. +21 −16 assets/css/subway-mobile.scss
  3. +41 −2 assets/js/views/channel_list.js
  4. +2 −2 views/templates.jade
@@ -19,55 +19,59 @@
.container-fluid #chat-window {
width: 100%; }
.container-fluid #channels {
- display: block;
+ display: inline-block;
height: 34px;
- left: 0;
+ left: 34px;
position: fixed;
- overflow: hidden;
+ overflow: visible;
top: 0;
+ white-space: nowrap;
z-index: 1; }
.container-fluid #channels div.channel {
border: 1px solid rgba(10, 10, 10, 0.5);
border-radius: 25px 0 0;
display: inline-block;
height: 34px;
+ left: 0;
padding: 7px 0;
- margin: 0 3px;
position: relative;
text-align: left;
- width: 25%; }
+ width: 120px; }
.container-fluid #channels div.channel span.channel-name {
- display: block;
+ display: inline-block;
margin-left: 8px;
- overflow: hidden;
+ overflow: none;
text-overflow: ellipsis;
- width: 50%; }
+ width: 45%; }
.container-fluid #channels div.channel span.unread, .container-fluid #channels div.channel span.unread-mentions {
- float: none; }
+ float: none;
+ vertical-align: 6px; }
.container-fluid #channels div.channel div.close-button {
position: absolute;
right: 0;
top: 7px;
visibility: visible; }
- .container-fluid #channels #prev-channel, .container-fluid #channels #next-channel {
- background: rgba(67, 73, 80, 0.5);
+ .container-fluid #channels #slide-prev, .container-fluid #channels #slide-next {
+ background: rgba(67, 73, 80, 0.75);
color: white;
font-size: 24px;
display: inline-block;
height: 34px;
padding-top: 4px;
+ position: fixed;
text-align: center;
- width: 34px; }
- .container-fluid #channels #prev-channel:hover, .container-fluid #channels #next-channel:hover {
- background: rgba(67, 73, 80, 0.75);
+ width: 34px;
+ z-index: 2; }
+ .container-fluid #channels #slide-prev:hover, .container-fluid #channels #slide-next:hover {
+ background: rgba(67, 73, 80, 0.95);
cursor: pointer; }
- .container-fluid #channels #prev-channel {
- float: left; }
- .container-fluid #channels #prev-channel:after {
+ .container-fluid #channels #slide-prev {
+ left: 0; }
+ .container-fluid #channels #slide-prev:after {
content: "<"; }
- .container-fluid #channels #next-channel {
- float: right; }
- .container-fluid #channels #next-channel:after {
+ .container-fluid #channels #slide-next {
+ right: 0; }
+ .container-fluid #channels #slide-next:after {
content: ">"; }
.container-fluid #channels.user-window-toggled {
left: -75%; }
@@ -81,7 +85,8 @@
.container-fluid #chat-contents {
margin-top: 34px; }
.container-fluid #user-window-toggle {
- background: rgba(67, 73, 80, 0.5);
+ background: rgba(67, 73, 80, 0.1);
+ border: 1px solid rgba(67, 73, 80, 0.3);
border-radius: 50px 0 0;
bottom: 56px;
display: block;
@@ -24,32 +24,34 @@
width: 100%;
}
#channels {
- display: block;
+ display: inline-block;
height: 34px;
- left: 0;
+ left: 34px;
position: fixed;
- overflow: hidden;
+ overflow: visible;
top: 0;
+ white-space: nowrap;
z-index: 1;
div.channel {
border: 1px solid rgba(10, 10, 10, .5);
border-radius: 25px 0 0;
display: inline-block;
height: 34px;
+ left: 0;
padding: 7px 0;
- margin: 0 3px;
position: relative;
text-align: left;
- width: 25%;
+ width: 120px;
span.channel-name {
- display: block;
+ display: inline-block;
margin-left: 8px;
- overflow: hidden;
+ overflow: none;
text-overflow: ellipsis;
- width: 50%;
+ width: 45%;
}
span.unread, span.unread-mentions {
float: none;
+ vertical-align: 6px;
}
div.close-button {
position: absolute;
@@ -58,28 +60,30 @@
visibility: visible;
}
}
- #prev-channel, #next-channel {
- background: rgba(67, 73, 80, .5);
+ #slide-prev, #slide-next {
+ background: rgba(67, 73, 80, .75);
color: white;
font-size: 24px;
display: inline-block;
height: 34px;
padding-top: 4px;
+ position: fixed;
text-align: center;
width: 34px;
+ z-index: 2;
&:hover {
- background: rgba(67, 73, 80, .75);
+ background: rgba(67, 73, 80, .95);
cursor: pointer;
}
}
- #prev-channel {
- float: left;
+ #slide-prev {
+ left: 0;
&:after {
content: "<";
}
}
- #next-channel {
- float: right;
+ #slide-next {
+ right: 0;
&:after {
content: ">";
}
@@ -102,7 +106,8 @@
}
#user-window-toggle {
- background: rgba(67, 73, 80, .5);
+ background: rgba(67, 73, 80, .1);
+ border: 1px solid rgba(67, 73, 80, .3);
border-radius: 50px 0 0;
bottom: 56px;
display: block;
@@ -1,19 +1,58 @@
+var TAB_WIDTH = 120;
+var BTN_WIDTH = 34;
+
var ChannelListView = Backbone.View.extend({
el: '#channels',
+ events: {
+ 'click #slide-prev': 'slidePrev',
+ 'click #slide-next': 'slideNext'
+ },
+
initialize: function() {
irc.chatWindows.bind('add', this.addChannel, this);
this.channelTabs = []
},
addChannel: function(chatWindow) {
+ var $el = $(this.el);
var view = new ChannelTabView({model: chatWindow});
this.channelTabs.push(view);
- $(this.el).append(view.render().el);
+ $el.append(view.render().el);
var name = chatWindow.get('name');
if(name[0] === '#' || name === 'status'){
view.setActive();
+
+ if ($el.css('position') == 'fixed') {
+ // MOBILE: navigate the tab list all the way to the right, to the
+ // newest tab.
+ $el.css('left', -1 * (this.channelTabs.length - 1) *
+ TAB_WIDTH + BTN_WIDTH + 'px');
+ }
+ }
+ },
+
+ slidePrev: function() {
+ // MOBILE: slide the tab list left, but don't let first tab hit the left.
+ var $el = $(this.el);
+ if ($el.css('position') != 'fixed') { return; }
+
+ var left = parseInt($el.css('left'), 10);
+ if (left < BTN_WIDTH) {
+ $el.css('left', left + TAB_WIDTH + 'px');
}
- }
+ },
+
+ slideNext: function() {
+ // MOBILE: slide the tab list right, but don't go farther than last tabs.
+ var $el = $(this.el);
+ if ($el.css('position') != 'fixed') { return; }
+
+ var left = parseInt($el.css('left'), 10);
+ if (left >= -1 * (this.channelTabs.length - 2) * TAB_WIDTH) {
+ $el.css('left', left - TAB_WIDTH + 'px');
+ }
+ },
+
});
View
@@ -7,8 +7,8 @@ script(id="chat_application", type="text/html")
small IRC client
#user-box
#channels
- #prev-channel
- #next-channel
+ #slide-prev.slide
+ #slide-next.slide
.content
script(id="load_image", type="text/html")

0 comments on commit cb91dc8

Please sign in to comment.