Moved the return link above the inline discussion and updated the header styling…

Moved the return link above the inline discussion and updated the header styling so the hide annotations button is right-aligned with the help icon.

common/lib/xmodule/xmodule/css/annotatable/display.scss

@@ -11,7 +11,21 @@
     padding: 2px 4px;
     border: 1px solid $border-color;
     border-radius: 3px;
-    .annotatable-toggle { }
+    .annotatable-toggle {
+      position: absolute;
+      top: 0;
+      right: 30px;
+    }
+    .annotatable-help-icon {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 17px;
+      height: 17px;
+      background: url(../images/info-icon.png) no-repeat;
+    }
+    .annotatable-toggle, .annotatable-help-icon { margin: 2px 7px 2px 0; }
   }
 }
 
@@ -46,17 +60,6 @@
   }
 }
 
-.annotatable-help-icon {
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 33%;
-  width: 17px;
-  height: 17px;
-  margin: 0 7px 0 0;
-  background: url(../images/info-icon.png) no-repeat;
-}
-
 .ui-tooltip.qtip.ui-tooltip {
   font-size: $body-font-size;
   border: 1px solid #333;

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -47,7 +47,7 @@ class @Annotatable
 
     initDiscussionReturnLinks: () ->
         $(@discussionXModuleSelector).find(@discussionSelector).each (index, el) =>
-            $(el).after @createReturnLink(@getDiscussionId el)
+            $(el).before @createReturnLink(@getDiscussionId el)
 
     getTipOptions: (el) ->
         content:
@@ -80,14 +80,22 @@ class @Annotatable
 
     onClickReply: (e) =>
         e.preventDefault()
+
         discussion_el = @getInlineDiscussion e.currentTarget
-        @scrollTo(discussion_el, @afterScrollToDiscussion)
+        return_el = discussion_el.prev(@returnSelector)
+
+        if return_el.length == 1
+            @scrollTo(return_el, () -> @afterScrollToDiscussion(discussion_el))
+        else
+            @scrollTo(discussion_el, @afterScrollToDiscussion)
 
     onClickReturn: (e) =>
         e.preventDefault()
-        span_el = @getSpan e.currentTarget
+
+        el = @getSpan e.currentTarget
         offset = -200
-        @scrollTo(span_el, @afterScrollToSpan, offset)
+
+        @scrollTo(el, @afterScrollToSpan, offset)
 
     getSpan: (el) ->
         discussion_id = @getDiscussionId(el)
@@ -125,14 +133,15 @@ class @Annotatable
             duration: 500
             onAfter: @_once => after?.call this, el
             offset: offset
-        })
+        }) if el
  
-    afterScrollToDiscussion: (el) ->
-        btn = $('.discussion-show', el)
+    afterScrollToDiscussion: (discussion_el) ->
+        btn = $('.discussion-show', discussion_el)
+        console.log(btn)
         btn.click() if !btn.hasClass('shown')
 
-    afterScrollToSpan: (el) ->
-        el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000
+    afterScrollToSpan: (span_el) ->
+        span_el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000
 
     makeTipContent: (el) ->
         (api) =>
@@ -193,4 +202,4 @@ class @Annotatable
         if text.length > limit
             text.substring(0, limit - 1).split(' ').slice(0, -1).join(' ') + '...' # truncate on word boundary
         else
-            text
\ No newline at end of file
+            text

lms/templates/annotatable.html

@@ -4,10 +4,10 @@
 		  <div class="annotatable-title">${display_name} </div>
 		% endif
 		<div class="annotatable-description">
-				<div class="annotatable-help-icon" title="Move your cursor over the highlighted areas to display annotations. Discuss the annotations in the forums using the link at the bottom of the annotation. You may hide annotations at any time by using the button at the top of the section."></div>
-				Annotated Reading + Guided Discussion<br/>
+                Annotated Reading + Guided Discussion
 				<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
-		</div>
+                <div class="annotatable-help-icon" title="Move your cursor over the highlighted areas to display annotations. Discuss the annotations in the forums using the link at the bottom of the annotation. You may hide annotations at any time by using the button at the top of the section."></div>
+        </div>
 	</div>
 	
 	<div class="annotatable-content">