Style changes to comments: increase font size, width. Improved scrolling between…

Style changes to comments: increase font size, width. Improved scrolling between spans and discussions.

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

@@ -100,7 +100,7 @@
 }
 
 .ui-tooltip.qtip.ui-tooltip-annotatable {
-  max-width: 350px;
+  max-width: 375px;
   .ui-tooltip-title:before { 
     font-weight: normal;
     content: "Guided Discussion: ";
@@ -110,8 +110,8 @@
     .annotatable-comment {
       display: block;
       margin: 0px 0px 10px 0;
-      max-height: 175px;
-      overflow: hidden;
+      max-height: 225px; // truncate the text via JS so we can get an ellipsis
+      overflow: auto;
     }
     .annotatable-reply {
       display: block;

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

@@ -12,6 +12,8 @@ class @Annotatable
     discussionXModuleSelector: '.xmodule_DiscussionModule'
     discussionSelector:        '.discussion-module'
 
+    commentMaxLength: 750 # Max length characters to show in the comment hover state
+
     constructor: (el) ->
         console.log 'loaded Annotatable' if @_debug
         @el = el
@@ -84,7 +86,8 @@ class @Annotatable
     onClickReturn: (e) =>
         e.preventDefault()
         span_el = @getSpan e.currentTarget
-        @scrollTo(span_el, @afterScrollToSpan)
+        offset = -200
+        @scrollTo(span_el, @afterScrollToSpan, offset)
 
     getSpan: (el) ->
         discussion_id = @getDiscussionId(el)
@@ -117,11 +120,11 @@ class @Annotatable
     toggleSpans: (hide) ->
         @$(@spanSelector).toggleClass 'hide', hide, 250
 
-    scrollTo: (el, after = -> true) ->
+    scrollTo: (el, after, offset = -20) ->
         $('html,body').scrollTo(el, {
             duration: 500
-            onAfter: @_once => after.call this, el
-            offset: -20
+            onAfter: @_once => after?.call this, el
+            offset: offset
         })
  
     afterScrollToDiscussion: (el) ->
@@ -135,7 +138,10 @@ class @Annotatable
         (api) =>
             discussion_id = @getDiscussionId(el)
             comment = $(@commentSelector, el).first().clone()
-            comment = comment.after(@createReplyLink discussion_id) if discussion_id
+            text = @_truncate comment.text().trim(), @commentMaxLength
+            comment.text(text)
+            if discussion_id
+                comment = comment.after(@createReplyLink discussion_id)
             comment
 
     makeTipTitle: (el) ->
@@ -182,3 +188,9 @@ class @Annotatable
         return =>
             fn.call this unless done
             done = true
+
+    _truncate: (text = '', limit) ->
+        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