Improve performance of note pane animation

Summary:
Widen the pane a little, to 40% of the screen from 33%. Also darken the click
capture area, more like the mockups.

Test Plan:
- Go to a document
- Open the note pane
- It should be almost buttery smooth
- Rest of the page should darken

Differential Revision: https://phabricator.opengovfoundation.org/D169

Author: doshitan

resources/assets/sass/annotation.scss

@@ -6,32 +6,30 @@
 }
 
 .annotation-click-capture {
-  @extend .col-md-8;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
+  right: 0;
+  background-color: rgba(0,0,0,0.2);
 }
 
 .annotation-pane {
-  @extend .col-md-4;
   position: fixed;
   top: 0;
   bottom: 0;
   right: 0;
   height: 100%;
+  width: 100%;
   z-index: ($zindex-navbar + 1);
   background-color: white;
-  @extend %simple-shadow;
-  padding: 0 0 (2 * $line-height-computed);
-  // Pad the top to allow the header to float above it.
-  margin-top: 0;
 
   // Slide in/out
-  margin-right: -34%;
-  @include transition(all $transition-duration $transition-easing);
+  @include translate(100%, 0);
+  @include transition-transform($transition-duration $transition-easing);
   &.active {
-    margin-right: 0;
+    @extend %simple-shadow;
+    @include translate(0, 0);
   }
 
   .title-header {
@@ -60,11 +58,12 @@
     display: inline-block;
   }
 
-  .close-button {
-    float: right;
-    font-style: italic;
+  .close {
     line-height: (2 * $line-height-computed);
-    cursor: pointer;
+  }
+
+  @media screen and (min-width: $screen-md-min) {
+    width: 40%;
   }
 }
 
@@ -218,14 +217,6 @@
     display: none;
   }
 
-  .annotation-pane {
-    left: 100%;
-
-    &.active {
-      left: 0;
-    }
-  }
-
   // Hide all inline annotations for now.
   .annotator-outer,
   .annotator-adder {

resources/views/documents/show.blade.php

@@ -64,16 +64,18 @@
             </div>
 
             <aside class="annotation-container col-md-1">
-                <aside class="annotation-pane" role="dialog">
+                <aside class="annotation-pane-wrapper" role="dialog">
                     <div class="annotation-click-capture hidden" onclick="hideNotes()"></div>
 
-                    <header class="title-header navbar navbar-default navbar-static-top">
-                    <h2>@lang('messages.document.notes')</h2>
-                        <a class="close-button navbar-link" onclick="hideNotes()">@lang('messages.close')</a>
-                    </header>
+                    <div class="annotation-pane">
+                        <header class="title-header navbar navbar-default navbar-static-top">
+                        <h2>@lang('messages.document.notes')</h2>
+                            <a class="close" aria-label="{{ trans('messages.close') }}" onclick="hideNotes()">&times;</a>
+                        </header>
 
-                    <ul class="annotation-list media-list">
-                    </ul>
+                        <ul class="annotation-list media-list">
+                        </ul>
+                    </div>
                 </aside>
             </aside>
         </div>