Edition hover effect on description

app/coffee/modules/common/components.coffee

@@ -519,7 +519,9 @@ EditableDescriptionDirective = ($rootscope, $repo, $confirm, $compile, $loading)
         $scope.$on "$destroy", ->
             $el.off()
 
-        $el.on "click", ".edit", ->
+        $el.on "click", ".view-description", (event) ->
+            target = angular.element(event.currentTarget)
+            if target.not('a')
                 $el.find('div.edit-description').show()
                 $el.find('div.view-description').hide()
                 $el.find('textarea').focus()

app/styles/layout/us-detail.scss

@@ -58,7 +58,7 @@
             margin-bottom: 0;
             max-width: 94%;
             &:hover {
-                .edit {
+                .icon-edit {
                     @include transition(opacity .3s linear);
                     opacity: 1;
                 }
@@ -93,6 +93,8 @@
             @extend %large;
             color: $gray-light;
             margin-left: .5rem;
+        }
+        .icon-edit {
             opacity: 0;
         }
         .us-related-task {
@@ -168,11 +170,36 @@
 
 .duty-content {
     position: relative;
+    &:hover {
+        cursor: pointer;
+        p {
+            @include transition(background .2s linear);
+            background: $whitish;
+        }
+        .edit {
+            @include transition(all .2s linear);
+            opacity: 1;
+            top: -1.5rem;
+        }
+    }
+    &.wysiwyg {
+        overflow: visible;
+    }
     textarea {
         background: $white;
         height: 10rem;
         margin-bottom: 2rem;
     }
+    .edit {
+        @include transition(all .2s linear);
+        background: $whitish;
+        color: $grayer;
+        left: 0;
+        opacity: 0;
+        padding: .2rem .5rem;
+        position: absolute;
+        top: -0;
+    }
     a.save {
         color: $blackish;
         opacity: .8;