From cd78aa5a65a1e4af4682bbc482685c9f75d344c7 Mon Sep 17 00:00:00 2001
From: aaronf <afrerich@gmail.com>
Date: Sun, 24 Feb 2013 18:28:38 -0600
Subject: [PATCH] fade long tag names - refs diaspora/diaspora#3899

---
 Changelog.md                                |  1 +
 app/assets/stylesheets/_mixins.css.scss     | 10 ++++++++
 app/assets/stylesheets/application.css.sass | 28 ++++++++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/Changelog.md b/Changelog.md
index d5a67dd83..6241a8e6d 100644
--- a/Changelog.md
+++ b/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
diff --git a/app/assets/stylesheets/_mixins.css.scss b/app/assets/stylesheets/_mixins.css.scss
index 1423a84b6..b81e0309c 100644
--- a/app/assets/stylesheets/_mixins.css.scss
+++ b/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;
diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass
index afafe2504..f841ca066 100644
--- a/app/assets/stylesheets/application.css.sass
+++ b/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