fade long tag names - refs diaspora/diaspora#3899

Changelog.md

@@ -2,6 +2,7 @@
 
 ## Bug fixes
 
+* fade long tag names. [#3899](https://github.com/diaspora/diaspora/issues/3899)
 * avoid posting empty comments. [#3836](https://github.com/diaspora/diaspora/issues/3836)
 
 ## Refactor

app/assets/stylesheets/_mixins.css.scss

@@ -64,6 +64,16 @@ $default-border-radius: 3px;
   background-image: -o-linear-gradient(top, $from $start, $to $end);
 }
 
+@mixin horizontal-linear-gradient($from, $to, $start:0%, $end:100%){
+  background-image: mix($from,$to);
+  
+  background-image: -moz-linear-gradient(left, $from $start, $to $end);
+  background-image: -o-linear-gradient(left, $from $start, $to $end);
+  background-image: -webkit-linear-gradient(left, $from $start, $to $end);
+  background-image: -ms-linear-gradient(left, $from $start, $to $end);
+  background-image: -khtml-linear-gradient(left, $from $start, $to $end);
+}
+
 @mixin opacity($val){
   filter: alpha(opacity= $val* 100);
   -moz-opacity: $val;

app/assets/stylesheets/application.css.sass

@@ -2304,8 +2304,11 @@ ul.left_nav
     :margin-top 4px
     @include transition(opacity)
     @include opacity(0.3)
-    :float right
+    :position absolute
     :display none
+    :background
+      :color white
+    :padding 0 5px
     &:hover
       @include opacity(1)
 
@@ -2342,16 +2345,39 @@ ul.left_nav
       :width 150px
     ul.sub_nav
       :width 140px
+      &:hover
+        :width auto
 
       a.aspect_selector,
       a.tag_selector
         :width 140px
+        :overflow hidden
+        :position relative
+        :display inline-block
+        &:after
+          :display inline-block
+          :content ""
+          :width 80px
+          :height 25px
+          :position absolute
+          :top 0px
+          :left 100px
+          @include horizontal-linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1))
+        &:hover
+          :width auto
+          :z-index 0.9
+        &:hover:after
+          :background none
 
       li:hover,
       li.hover
         .edit,
         .unfollow_icon
           :display inline-block
+          :position absolute
+          :top 0
+          :left 0
+          :z-index 1
 
   .user_card
     :margin-left 8px