fixed blank slate sidebar resize glitch

lms/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -15,6 +15,7 @@ class @DiscussionThreadListView extends Backbone.View
     @collection.on "add", @addAndSelectThread
     @sidebar_padding = 10
     @sidebar_header_height = 87
+    @boardName
 
   reloadDisplayedCollection: (thread) =>
     thread_id = thread.get('id')
@@ -41,8 +42,8 @@ class @DiscussionThreadListView extends Backbone.View
     windowHeight = $(window).height();
 
     discussionBody = $(".discussion-article")
-    discussionsBodyTop = if discussionBody[0] then discussionBody.offset().top;
-    discussionsBodyBottom = discussionsBodyTop + discussionBody.outerHeight();
+    discussionsBodyTop = if discussionBody[0] then discussionBody.offset().top
+    discussionsBodyBottom = discussionsBodyTop + discussionBody.outerHeight()
 
     sidebar = $(".sidebar")
     if scrollTop > discussionsBodyTop - @sidebar_padding
@@ -62,10 +63,11 @@ class @DiscussionThreadListView extends Backbone.View
     amount = Math.max(topOffset - discussionBottomOffset, 0)
 
     sidebarHeight = sidebarHeight - @sidebar_padding - amount
-    sidebar.css 'height', Math.min(Math.max(sidebarHeight, 400), discussionBody.outerHeight())
+    sidebarHeight = Math.min(Math.max(sidebarHeight, 400), discussionBody.outerHeight())
+    sidebar.css 'height', sidebarHeight
 
     postListWrapper = @$('.post-list-wrapper')
-    postListWrapper.css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px');
+    postListWrapper.css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px')
 
 
   # Because we want the behavior that when the body is clicked the menu is
@@ -150,16 +152,53 @@ class @DiscussionThreadListView extends Backbone.View
     boardName = item.find(".board-name").html()
     _.each item.parents('ul').not('.browse-topic-drop-menu'), (parent) ->
       boardName = $(parent).siblings('a').find('.board-name').html() + ' / ' + boardName
-    @$(".current-board").html(boardName)
+    @$(".current-board").html(@fitName(boardName))
     fontSize = 16
     @$(".current-board").css('font-size', '16px')
-
     while @$(".current-board").width() > (@$el.width() * .8) - 40
       fontSize--
       if fontSize < 11
         break
       @$(".current-board").css('font-size', fontSize + 'px')
 
+  setSelectedTopic: (name) ->
+    @$(".current-board").html(@fitName(name))
+
+  getNameWidth: (name) ->
+    test = $("<div>")
+    test.css
+      "font-size": @$(".current-board").css('font-size')
+      opacity: 0
+      position: 'absolute'
+      left: -1000
+      top: -1000
+    $("body").append(test)
+    test.html(name)
+    width = test.width()
+    test.remove()
+    return width
+
+  fitName: (name) ->
+    width = @getNameWidth(name)
+    if width < @maxNameWidth
+      return name
+    path = (x.replace /^\s+|\s+$/g, "" for x in name.split("/"))
+    while path.length > 1
+      path.shift()
+      partialName = "... / " + path.join(" / ")
+      if  @getNameWidth(partialName) < @maxNameWidth
+        return partialName
+
+    rawName = path[0]
+
+    name = "... / " + rawName
+
+    while @getNameWidth(name) > @maxNameWidth
+      rawName = rawName[0...rawName.length-1]
+      name =  "... / " + rawName + " ..."
+
+    return name
+
   filterTopic: (event) ->
     @setTopic(event)
     item = $(event.target).closest('li')

lms/templates/discussion/index.html

@@ -27,7 +27,7 @@
     <div class="discussion-body">
         <div class="sidebar"></div>
         <div class="discussion-column">
-        	<div class="blank-slate">
+        	<div class="discussion-article blank-slate">
 	        	<h1>${course.title} discussions</h1>
 
         	</div>