Truncated excerpt design tweaks

 * Increase the expansion speed

 * Make the drop-shadow at the bottom of collapsed annotation bodies
   expand to the full width of the annotation card and be clickable
   to provide an easier-to-hit target for expanding collapsed
   annotations

 * Make the shadow non-clickable when hidden after expansion

h/static/styles/excerpt.scss

-.excerpt {
-  transition: max-height .3s ease-in;
-  position: relative;
+@at-root {
+  $expand-duration: .15s;
+
+  // the truncated body of the <excerpt>
+  .excerpt {
+    transition: max-height $expand-duration ease-in;
     overflow: hidden;
-}
+  }
 
-.excerpt__inline-controls {
+  // a container which wraps the <excerpt> and contains the excerpt
+  // itself plus the shadow at the bottom that can be clicked to expand or
+  // collapse it
+  .excerpt__container {
+    position: relative;
+  }
+
+  // inline controls for expanding and collapsing
+  // the <excerpt>
+  // -------------
+  .excerpt__inline-controls {
     display: block;
     position: absolute;
     right: 0;
     bottom: 0;
     pointer-events: none;
-}
+  }
 
-.excerpt__toggle-link {
+  .excerpt__toggle-link {
     pointer-events: auto;
     padding-left: 15px;
     background-image: linear-gradient(to right, transparent 0px, white 12px);
-}
+  }
 
-.excerpt__toggle-link > a {
+  .excerpt__toggle-link > a {
     color: $text-color;
     font-style: italic;
     font-weight: normal;
-}
+  }
+
+
+  // a shadow displayed at the bottom of an <excerpt>s with inline controls
+  // disabled, which provides a hint that the excerpt is collapsed
+  // -------------
+
+  // the distance by which the shadow indicating a collapsed
+  // annotation expands beyond the left/right edges of the card.
+  // This value is chosen such that the shadow expands to the full width of
+  // the card
+  $shadow-h-offset: -12px;
 
-// a shadow displayed at the bottom of an <excerpt>s with inline controls
-// disabled, which provides a hint that the excerpt is collapsed
-.excerpt__shadow {
+  .excerpt__shadow {
     position: absolute;
-  left: 0;
-  right: 0;
+    left: $shadow-h-offset;
+    right: $shadow-h-offset;
     bottom: 0;
-  height: 20px;
+    height: 40px;
     background-image: linear-gradient(to bottom,
-    transparent 0%, rgba(0,0,0,0.10) 90%, rgba(0,0,0,0.15) 100%);
-  transition: opacity .3s linear;
-}
+      transparent 50%, rgba(0,0,0,0.08) 95%, rgba(0,0,0,0.13) 100%);
+    transition: opacity $expand-duration linear;
+  }
 
-.excerpt__shadow.is-hidden {
+  .excerpt__shadow.is-hidden {
     opacity: 0;
+    pointer-events: none;
+  }
 }

h/templates/client/annotation.html

@@ -110,6 +110,7 @@
     <div class="u-stretch"></div>
     <a class="u-strong" ng-show="vm.canCollapseBody"
        ng-click="vm.collapseBody = !vm.collapseBody"
+       ng-title="vm.collapseBody ? 'Show the full annotation text' : 'Show the first few lines only'"
        ng-bind="vm.collapseBody ? 'More' : 'Less'"></a>
   </div>
   <!-- / Tags -->

h/templates/client/excerpt.html

 <div ng-transclude ng-if="!vm.enabled()"></div>
-<div class="excerpt" ng-if="vm.enabled()">
+<div class="excerpt__container" ng-if="vm.enabled()">
+  <div class="excerpt">
     <div ng-transclude></div>
     <div class="excerpt__inline-controls"
          ng-show="vm.showInlineControls()">
@@ -12,7 +13,10 @@
             title="Show the first few lines only">Less</a>
       </span>
     </div>
+  </div>
   <div class="excerpt__shadow"
+       ng-click="vm.toggle()"
        ng-class="{'is-hidden' : !vm.isExpandable()}"
-       ng-if="!vm.inlineControls"></div>
+       ng-if="!vm.inlineControls"
+       title="Show the full excerpt"></div>
 </div>