Show doc version in search results

Ref #25.

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -9,22 +9,23 @@ templates.sidebarDoc = (doc, options = {}) ->
   else
     link += """<span class="_list-arrow"></span>"""
   link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
-  link += "#{doc.name}"
+  link += """<span class="_list-text">#{doc.name}"""
   link += " #{doc.version}" if options.disabled and doc.version
-  link + "</a>"
+  link + "</span></a>"
 
 templates.sidebarType = (type) ->
-  """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span>#{type.name}</a>"""
+  """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span><span class="_list-text">#{type.name}</span></a>"""
 
 templates.sidebarEntry = (entry) ->
   """<a href="#{entry.fullPath()}" class="_list-item _list-hover">#{$.escape entry.name}</a>"""
 
 templates.sidebarResult = (entry) ->
-  addon = if entry.isIndex() and app.disabledDocs.contains(entry.doc)
+  addons = if entry.isIndex() and app.disabledDocs.contains(entry.doc)
     """<span class="_list-enable" data-enable="#{entry.doc.slug}">Enable</span>"""
   else
     """<span class="_list-reveal" data-reset-list title="Reveal in list"></span>"""
-  """<a href="#{entry.fullPath()}" class="_list-item _list-hover _list-result _icon-#{entry.doc.icon}">#{addon}#{$.escape entry.name}</a>"""
+  addons += """<span class="_list-count">#{entry.doc.version}</span>""" if entry.doc.version
+  """<a href="#{entry.fullPath()}" class="_list-item _list-hover _list-result _icon-#{entry.doc.icon}">#{addons}<span class="_list-text">#{$.escape entry.name}</span></a>"""
 
 templates.sidebarNoResults = ->
   html = """ <div class="_list-note">No results.</div> """
@@ -41,7 +42,7 @@ templates.sidebarLabel = (doc, options = {}) ->
   label += " _icon-#{doc.icon}" unless doc.version
   label += """"><input type="checkbox" name="#{doc.slug}" class="_list-checkbox" """
   label += "checked" if options.checked
-  label + ">#{doc.fullName}</label>"
+  label + """><span class="_list-text">#{doc.fullName}</span></label>"""
 
 templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
   html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""

assets/javascripts/views/sidebar/sidebar_hover.coffee

@@ -24,7 +24,7 @@ class app.views.SidebarHover extends app.View
   show: (el) ->
     unless el is @cursor
       @hide()
-      if @isTarget(el) and @isTruncated(el)
+      if @isTarget(el) and @isTruncated(el.lastElementChild or el)
         @cursor = el
         @clone = @makeClone @cursor
         $.append document.body, @clone
@@ -48,8 +48,7 @@ class app.views.SidebarHover extends app.View
     return
 
   makeClone: (el) ->
-    clone = el.cloneNode()
-    clone.textContent = el.textContent
+    clone = el.cloneNode(true)
     clone.classList.add 'clone'
     clone
 

assets/stylesheets/components/_sidebar.scss

@@ -80,14 +80,9 @@
 ._list-item {
   display: block;
   position: relative;
-  overflow: hidden;
   padding: .25rem .75rem;
   line-height: 1.5rem;
   font-size: .875rem;
-  white-space: nowrap;
-  word-wrap: normal;
-  overflow-wrap: normal;
-  text-overflow: ellipsis;
   cursor: default;
   background: $sidebarBackground;
   box-shadow: inset -1px 0 $sidebarBorder;
@@ -120,9 +115,23 @@
   }
 }
 
+._list-item, ._list-text {
+  overflow: hidden;
+  white-space: nowrap;
+  word-wrap: normal;
+  overflow-wrap: normal;
+  text-overflow: ellipsis;
+}
+
+._list-text {
+  display: block;
+  pointer-events: none;
+}
+
 ._list-count, ._list-enable {
   float: right;
   font-size: .75rem;
+  margin-left: .375rem;
 
   .focus > &,
   .active > & {
@@ -229,6 +238,7 @@
   padding-right: 1.75rem;
 
   > ._list-reveal { display: block; }
+  > ._list-count { display: none; }
 }
 
 ._list-reveal {
@@ -237,14 +247,14 @@
   top: 0;
   bottom: 0;
   right: 0;
-  width: 1.75rem;
+  width: 2rem;
   cursor: pointer;
 
   &:before {
     content: '';
     position: absolute;
     bottom: 50%;
-    left: .5rem;
+    left: .75rem;
     width: .75rem;
     height: 1px;
     background: rgba($selectionText, .9);
@@ -274,9 +284,9 @@
 
 ._list-hover.clone {
   position: fixed;
+  overflow: visible;
   z-index: $hoverZ;
   left: 0;
-  overflow: visible;
   min-width: $sidebarWidth;
   padding: .25rem .75rem;
   pointer-events: none;
@@ -287,11 +297,15 @@
 
   @media #{$mediumScreen} { min-width: $sidebarMediumWidth; }
 
+  > ._list-text { display: inline; }
+
   &:not(._list-result) {
     padding-left: 2.75rem;
 
     &:before { content: none; }
   }
+
+  ._list-reveal, ._list-enable { display: none; }
 }
 
 //