tabs and header padding

kandanapp · Apr 3, 2012 · a94ce20 · a94ce20
1 parent 3130e21
commit a94ce20
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/app/assets/javascripts/backbone/kandan.js.coffee b/app/assets/javascripts/backbone/kandan.js.coffee
@@ -38,16 +38,23 @@ window.Kandan =
 
   initTabs: ()->
     $('#channels').tabs({
+      create: (event, ui)->
+        $('ul.ui-tabs-nave').css({top: $('.header').offset().top + "px"})
+
       select: (event, ui)->
         $(document).data('active_channel_id',
-          Kandan.Helpers.Channels.getChannelIdByTabIndex(ui.index))
+        Kandan.Helpers.Channels.getChannelIdByTabIndex(ui.index))
         Kandan.Data.Channels.runCallbacks('change')
     })
 
     $("#channels").tabs 'option', 'tabTemplate', '''
       <li>
-        <a href="#{href}">#{label}</a>
-        <a href="#" class="ui-icon ui-icon-close">x</a>
+        <span class="tab_right"></span>
+        <span class="tab_left"></span>
+        <span class="tab_content">
+          <a href="#{href}">#{label}</a>
+          <a href="#" class="ui-icon ui-icon-close">x</a>
+        </span>
       </li>
     '''
 

diff --git a/app/assets/stylesheets/_base.sass b/app/assets/stylesheets/_base.sass
@@ -15,6 +15,9 @@
   +background-image(linear-gradient($header-bg-1, $header-bg-2))
   z-index: 10
   padding: 0 5px
+  -webkit-box-shadow: inset -7px -7px 6px -5px #3a4547
+  -moz-box-shadow: inset -7px -7px 6px -5px #3a4547
+  box-shadow: inset -7px -7px 6px -5px #3a4547
 
 .logo
   padding-top: 5px

diff --git a/app/assets/stylesheets/_sidebar.sass b/app/assets/stylesheets/_sidebar.sass
@@ -91,6 +91,9 @@
   color: #CCC
   padding-left: 10px
   padding-right: 10px
+  padding-top: 4px
+  height: 20px
+  line-height: 20px
   img
     vertical-align: middle
     width: 20px

diff --git a/app/assets/templates/chatarea.jst.eco b/app/assets/templates/chatarea.jst.eco
@@ -1,8 +1,12 @@
 <ul>
   <% for channel in @channels.models: %>
     <li>
-      <a href="#<%= "channels-#{channel.get('id')}" %>"><%= channel.get('name') %></a>
-      <a href="#" class="close_channel" title="close channel">x</a>
+      <span class="tab_right"></span>
+      <span class="tab_left"></span>
+      <span class="tab_content">	
+      	    <a href="#<%= "channels-#{channel.get('id')}" %>"><%= channel.get('name') %></a>
+	    <a href="#" class="close_channel" title="close channel">x</a>
+      </span>
     </li>
   <% end %>
   <li>