Show the item count in long collapsible lists.

web/src/PublicationSearchResult.js

@@ -98,7 +98,7 @@ export class PublicationSearchResult extends React.Component
             <div className="content">
                 { image_url && <img src={image_url} className="image" alt="Publication." /> }
                 <div className="description" dangerouslySetInnerHTML={{__html: display_description}} />
-                { makeCollapsibleList( "Articles:", articles, PUBLICATION_EXCESS_ARTICLE_THRESHOLD, {float:"left",marginBottom:"0.25em"} ) }
+                { makeCollapsibleList( "Articles", articles, PUBLICATION_EXCESS_ARTICLE_THRESHOLD, {float:"left",marginBottom:"0.25em"} ) }
             </div>
             <div className="footer">
                 { this.props.data.pub_date && <div> <label>Published:</label> <span className="pub_date"> {this.props.data.pub_date} </span> </div> }

web/src/PublisherSearchResult.js

@@ -62,7 +62,7 @@ export class PublisherSearchResult extends React.Component
             <div className="content">
                 { image_url && <img src={image_url} className="image" alt="Publisher." /> }
                 <div className="description" dangerouslySetInnerHTML={{__html: display_description}} />
-                { makeCollapsibleList( "Publications:", pubs, PUBLISHER_EXCESS_PUBLICATION_THRESHOLD, {float:"left",marginBottom:"0.25em"} ) }
+                { makeCollapsibleList( "Publications", pubs, PUBLISHER_EXCESS_PUBLICATION_THRESHOLD, {float:"left",marginBottom:"0.25em"} ) }
             </div>
         </div> ) ;
     }

web/src/SearchResults.css

@@ -31,8 +31,9 @@
 .search-result .content p { margin-top: 0.25em ; }
 .search-result .content p:first-child { margin-top: 0 ; }
 .search-result .content .image { float: left ; margin: 0.25em 0.5em 0.5em 0 ; max-height: 5em ; max-width: 6em ; }
-.search-result .content .collapsible { margin-top:0.5em ; font-size: 90% ; color: #444 ; }
+.search-result .content .collapsible { margin-top:0.5em ; font-size: 90% ; color: #333 ; }
 .search-result .content .collapsible .caption img { height: 0.75em ; margin-left: 0.25em ; cursor: pointer ; }
+.search-result .content .collapsible .count { font-size: 80% ; font-style: italic ; color: #666 ; }
 .search-result .content .collapsible ul { margin: 0 0 0 1em ; }
 .search-result.publisher .content .collapsible li { cursor: pointer ; }
 .search-result.publication .content .collapsible li { cursor: pointer ; }

web/src/utils.js

@@ -189,6 +189,10 @@ export function makeCollapsibleList( caption, vals, maxItems, style ) {
         excessItemsRef.style.display = show ? "block" : "none" ;
         flipButtonRef.src = flipButtonRef.src.substr( 0, pos ) + (show ? "/collapsible-up.png" : "/collapsible-down.png") ;
     }
+    if ( excessItems.length === 0 )
+        caption = <span> {caption+":"} </span> ;
+    else
+        caption = <span> {caption} <span className="count"> ({vals.length}) </span> </span> ;
     return ( <div className="collapsible" style={style}>
         <div className="caption"> {caption}
             { excessItems.length > 0 && <img src="images/collapsible-down.png" onClick={flipExcessItems} ref={r => flipButtonRef=r} alt="Show/hide extra items." /> }