moved tabs in to actual header markup as they should be. working on scrolling form browser window and not inner divs

Author: kevzettler

app/assets/javascripts/backbone/helpers/channels.js.coffee

@@ -17,10 +17,14 @@ class Kandan.Helpers.Channels
     scrollPercentage > @options.autoScrollThreshold
 
   @scrollToLatestMessage: (channelId)->
-    @channel_activities_el(channelId).parent().scrollTop(100000)
+    console.log("scrolling to last message");
+    $('document').scrollTop($('docoument').height())
+    #@channel_activities_el(channelId).parent().scrollTop(100000)
 
   @currentScrollPosition: (channelId)->
-    @channel_activities_el(channelId).parent().scrollTop()
+    console.log("current scroll position");
+    $('document').scrollTop()
+    #@channel_activities_el(channelId).parent().scrollTop()
 
   @channel_activities_el: (channelId)->
     $("#channel-activities-#{channelId}")

app/assets/javascripts/backbone/kandan.js.coffee

@@ -37,16 +37,14 @@ window.Kandan =
     window.broadcaster.subscribe "/channels/*"
 
   initTabs: ()->
-    $('#channels').tabs({
-      create: (event, ui)->
-        $('ul.ui-tabs-nav').css({top: $('.header').offset().top + "px"})
+    $('#kandan').tabs({
       select: (event, ui)->
         $(document).data('active_channel_id',
         Kandan.Helpers.Channels.getChannelIdByTabIndex(ui.index))
         Kandan.Data.Channels.runCallbacks('change')
     })
 
-    $("#channels").tabs 'option', 'tabTemplate', '''
+    $("#kandan").tabs 'option', 'tabTemplate', '''
       <li>
         <span class="tab_right"></span>
         <span class="tab_left"></span>

app/assets/javascripts/backbone/views/chatarea.js.coffee

@@ -8,7 +8,7 @@ class Kandan.Views.ChatArea extends Backbone.View
     "click .create_channel": "createChannel"
 
   render: ->
-    $(@el).html(@template({channels: @options.channels}))
+    $('.header .logo').after(@template({channels: @options.channels}))
     for channel in @options.channels.models
       view = new Kandan.Views.ChannelPane({channel: channel})
       $(@el).append(view.render().el)
@@ -29,4 +29,4 @@ class Kandan.Views.ChatArea extends Backbone.View
   deleteChannel: (event)->
     channelIndex = $(event.target).parent().prevAll().length
     console.log "request for deletion", channelIndex
-    Kandan.Helpers.Channels.deleteChannelByTabIndex(channelIndex) if channelIndex != 0
+    Kandan.Helpers.Channels.deleteChannelByTabIndex(channelIndex) if channelIndex != 0

app/assets/stylesheets/_base.sass

@@ -5,11 +5,15 @@
 *
   +box-sizing(border-box)
 
+#kandan
+  height: 100%
+  width: 100%
+
 .header
   display: block
-  height: $header-height
   width: 100%
   position: fixed
+  height: $header-height
   top: 0
   background-color: $header-bg-1
   +background-image(linear-gradient($header-bg-1, $header-bg-2))
@@ -53,6 +57,7 @@
 /* gotta bump stuff in the header
 .logo, .ui-tabs-nav
   padding-top: 7px !important
+  float: left
 .search form
   padding-top: 5px
 

app/assets/stylesheets/_chat_area.sass

@@ -2,7 +2,7 @@
   margin-top: 0px
 
 .ui-widget-header
-  +background-image(linear-gradient($header-bg-1, $header-bg-2))
+  background: transparent !important
   +border-radius(0px)
   border: none
   .ui-state-active
@@ -23,28 +23,23 @@ html body .ui-tabs .ui-tabs-nav li
 .create_channel
   cursor: hover
 
-body html ul.ui-tabs-nav
-  display: block
-  width: 1050px
-  height: 32px
+.ui-tabs-nav
 
 
-/* html body #app_body .main-area #channels li.ui-state-active
-/*   backgroun-color: $active-tab-bg !important
-
-/* html body li.ui-state-default
-/*   background-color: #9da7aa !important
-
 .ui-tabs
   +border-radius(0px)
   padding: 0px
   margin-top: 0px
   border: none
   .ui-tabs-nav
-    position: fixed
-    top: 0px
-    left: 90px
     z-index: 20
+    display: block
+    position: absolute
+    bottom: 0px
+    float: left
+    padding: 0px !important
+    margin-left: 80px
+    margin-bottom: 1px !important
     li a
       font-size: 14px
     .ui-state-default
@@ -83,13 +78,13 @@ body html ul.ui-tabs-nav
 .paginated-activities
   +box-shadow(5px 0px 5px -3px #cccccc, -5px 0px 5px -3px #cccccc, 5px 10px 5px -3px #cccccc, -5px 10px 5px -3px #cccccc)
   +border-top-radius(4px)
-  overflow-y: scroll
   float: left
   width: 100%
   min-height: 88%
   height: 88%
   background: #FFF
   padding: 10px
+  padding-bottom: 72px
   .pagination
     text-decoration: underline
     cursor: pointer
@@ -103,7 +98,9 @@ body html ul.ui-tabs-nav
   float: left
   border-top: 1px solid #EBEFF1
   padding: 10px 0px 10px 10px
-  width: 100%
+  width: 77%
+  position: fixed
+  bottom: 0px
   textarea
     +border-top-left-radius(4px)
     +border-bottom-left-radius(4px)

app/assets/stylesheets/_sidebar.sass

@@ -1,4 +1,8 @@
 .sidebar
+  padding-top: $header-height + 20
+  position: fixed
+  top: 0px
+  right: 0px
   min-height: 100%
   height: 100%
   width: $sidebar-width

app/views/main/index.html.erb

@@ -6,31 +6,32 @@
 
 
 
-
-<div class="header">
-  <%= image_tag "logo.png", :class=>"logo" %>  
-
-  <a href="#" class="user_menu_link">
-    <cite class="user_flag"></cite>
-    <div class="user"></div>
-  </a>
-
-  <div class="user_menu">
-    <a href="<%= destroy_user_session_path %>">logout</a>
+<div id="kandan">
+  <div class="header">
+    <%= image_tag "logo.png", :class=>"logo" %>  
+
+    <a href="#" class="user_menu_link">
+      <cite class="user_flag"></cite>
+      <div class="user"></div>
+    </a>
+
+    <div class="user_menu">
+      <a href="<%= destroy_user_session_path %>">logout</a>
+    </div>
+
+    <div class="search">
+      <form method="get" action="/search" target="_blank">
+	<input type="text" class="query" name="query"/>
+      </form>
+    </div>
   </div>
 
-  <div class="search">
-    <form method="get" action="/search" target="_blank">
-      <input type="text" class="query" name="query"/>
-    </form>
-  </div>
-</div>
-
-<div id="app_body">
-  <div class="main-area"></div>
+  <div id="app_body">
+    <div class="main-area"></div>
 
-  <div class="sidebar">
-    <div class="widgets"></div>
+    <div class="sidebar">
+      <div class="widgets"></div>
+    </div>
   </div>
 </div>
 

config/kandan_settings.yml

@@ -8,4 +8,4 @@
 :broadcaster:
   :name: "Faye"
 
-:per_page: 5
+:per_page: 30