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
+        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) =>

lms/templates/annotatable.html

@@ -4,9 +4,9 @@
 		  <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 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>