Closes #22 and closes #19. Fixed height for specgrogram container, lo…

…ading gif, title attribues for playback controls.

- Loading gif is just the background image behind the spectrogram, which gets covered when the spectrogram image loads.

src/app/annotationViewer/_annotation_viewer.scss

@@ -11,9 +11,19 @@ $marqueeBorderColorInactive: #00FF00;
 
 baw-annotation-viewer {
 
+
+
   width: 100%;
   text-align: center;
 
+
+
+  & .annotation-viewer-ctrl {
+    background: url(/assets/img/load.gif) center center no-repeat;
+
+  }
+
+
   & #scroller {
     display: inline-block;
   }
@@ -59,13 +69,14 @@ baw-annotation-viewer {
 
 
   & #scroller{
+
     overflow-x: scroll;
     overflow-y: hidden;
     line-height: 0;
   }
 
   & .annotation-viewer {
-
+    height: 255px;
     display: inline-block;
     position: relative;
     line-height: 0;

src/app/annotationViewer/annotationViewer.tpl.html

@@ -1,5 +1,6 @@
-<div ng-controller="AnnotationViewerCtrl">
+<div ng-controller="AnnotationViewerCtrl" class="annotation-viewer-ctrl">
 
+
 
     <div id="scroller">
         <div class="tag-preview">

src/app/listen/listen.tpl.html

@@ -7,6 +7,7 @@
 
         <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hint absolute-time hint--top">{{absoluteDateChunkStart() | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}</span><span></span>
         </h4>
+
         <baw-annotation-viewer model="model"></baw-annotation-viewer>
 
         <div id="chunkTimeStamps" class="clear-pseudo">
@@ -18,7 +19,7 @@ <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hin
 
 
                 <div class="btn-group">
-                    <a class="btn btn-default" ng-href="{{createNavigationHref('previous')}}" ng-disabled="!previousEnabled">
+                    <a class="btn btn-default" ng-href="{{createNavigationHref('previous')}}" ng-disabled="!previousEnabled" title="Previous Recording">
                         <span class="glyphicon glyphicon-step-backward"></span>
                     </a>
                 </div>
@@ -35,7 +36,7 @@ <h4 class="center-block">Site: {{model.audioRecording.siteId}}, <span class="hin
 
                 </div>
                 <div class="btn-group">
-                    <a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled">
+                    <a class="btn btn-default" ng-href="{{createNavigationHref('next')}}" ng-disabled="!nextEnabled" title="Next Recording">
                         <span class="glyphicon glyphicon-step-forward"></span>
                     </a>
                 </div>