Merge pull request #258 from jtremback/truncating-tabs

Truncating tabs

h/css/base.scss

@@ -155,22 +155,6 @@ $em: 14 / 1em !default;
   }
 }
 
-@mixin tabbox {
-  @include box-shadow(2px -10px 13px -8px hsla(0, 0%, 0%, .1) inset);
-  background: hsla(0, 0%, 99%, 1);
-  border-top-right-radius: 2em 5em;
-  border-top-left-radius: 2em 5em;
-  color: #999;
-  border: 1px solid $grayLighter;
-  border-bottom: none;
-  &:hover {
-    background: white;
-  }
-  &:active {
-    @include box-shadow( none );
-  }
-}
-
 
 
 //ICON IMAGES////////////////////////////////

h/css/common.scss

@@ -350,28 +350,88 @@ blockquote {
 
 //TABS////////////////////////////////
 .nav-tabs {
-  @include pie-clearfix;
-  margin: 0 .5em;
-
-  & > li > a {
-    cursor: pointer;
-    float: left;
-    line-height: 1;
-    padding: .5em 1em;
-    padding-top: .25em;
-    margin-right: -.5em;
-    margin-bottom: 0px;
+  width: 100%;
+  font-family: sans-serif;
+  & > li {
     position: relative;
-    text-decoration: none;
-    @include tabbox;
-  }
-
-  & > .active > a {
-    @include box-shadow(none);
-    color: #333;
-    font-weight: bold;
-    background: hsla(0, 0%, 100%, 1);
-    z-index: 90;
+    display: inline-block;
+    overflow: hidden;
+    margin-right: -.5em;
+    background: hsla(0, 0%, 99%, 1);
+    border-top-right-radius: 2em 5em;
+    border-top-left-radius: 2em 5em;
+    border: 1px solid $grayLighter;
+    border-bottom: none;
+    & > a {
+      overflow: hidden;
+      display: inline-block;
+      white-space: nowrap;
+      padding: .5em 1em;
+      color: #999;
+      text-decoration: none;
+    }
+    &::before {
+      content: "";
+      @include background( linear-gradient(right, hsla(0, 0%, 99%, 1), hsla(0, 0%, 99%, 1), hsla(0, 0%, 99%, 0)) );
+      width: 1em;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      border-top-right-radius: 2em 5em;
+    }
+    &::after {
+      content: "";
+      @include box-shadow(0px -10px 13px -8px hsla(0, 0%, 0%, .1) inset);
+      border-top-right-radius: 2em 5em;
+      border-top-left-radius: 2em 5em;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    &:hover {
+      background: white;
+    }
+    &.active {
+      background: hsla(0, 0%, 100%, 1);
+      z-index: 90;
+      & > a {
+        color: #333;
+        font-weight: bold;
+      }
+      &::before {
+        @include background( linear-gradient(right, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0)) );
+      }
+      &::after {
+        @include box-shadow( none );
+      }
+    }
+    .tabs-below & {
+      border: 1px solid $grayLighter;
+      border-top: none;
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+      border-bottom-right-radius: 2em 5em;
+      border-bottom-left-radius: 2em 5em;
+      &::before {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 2em 5em;
+      }
+      &::after {
+        @include box-shadow(0px 10px 13px -8px hsla(0, 0%, 0%, .1) inset);
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: 2em 5em;
+        border-bottom-left-radius: 2em 5em;
+      }
+      &.active {
+        &::after {
+          @include box-shadow( none );
+        }
+      }
+    }
   }
 }
 
@@ -382,7 +442,6 @@ blockquote {
   margin-top: -1px;  // Pull up and under tabs
   padding: 1em;
   position: relative;
-
   &.active {
     display: inherit !important;
   }
@@ -390,7 +449,6 @@ blockquote {
 
 
 
-
 //PAPER////////////////////////////////
 //Provides the white background upon which items sit
 .paper {

h/js/directives.coffee

@@ -129,6 +129,17 @@ tabReveal = ['$parse', ($parse) ->
 ]
 
 
+tabTruncate = ->
+  link: (scope, iElement) ->
+    angular.element(iElement).addClass("truncate")
+    tabs = angular.element(iElement.children()[0].childNodes)
+    percentage = 100 / tabs.length + "%"
+    for i in [0..tabs.length-1]
+      angular.element(tabs[i]).css "width", percentage
+      a_width = tabs[i].childNodes[0].clientWidth
+      angular.element(tabs[i]).css "max-width", a_width
+
+
 thread = ->
   link: (scope, iElement, iAttrs, controller) ->
     scope.collapsed = false
@@ -142,3 +153,4 @@ angular.module('h.directives', ['ngSanitize'])
   .directive('resettable', resettable)
   .directive('tabReveal', tabReveal)
   .directive('thread', thread)
+  .directive('tabTruncate', tabTruncate)