From 8d3ba9e887dbd7cec284c33bafd3d31d8921e31e Mon Sep 17 00:00:00 2001
From: Taka <taka@vm-linux-dev>
Date: Tue, 18 Feb 2020 20:45:59 +0000
Subject: [PATCH] Show the item count in long collapsible lists.

---
 web/src/PublicationSearchResult.js | 2 +-
 web/src/PublisherSearchResult.js   | 2 +-
 web/src/SearchResults.css          | 3 ++-
 web/src/utils.js                   | 4 ++++
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/PublicationSearchResult.js b/web/src/PublicationSearchResult.js
index ce21ebc..003f253 100644
--- a/web/src/PublicationSearchResult.js
+++ b/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> }
diff --git a/web/src/PublisherSearchResult.js b/web/src/PublisherSearchResult.js
index a9ebac6..fd348cc 100644
--- a/web/src/PublisherSearchResult.js
+++ b/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> ) ;
     }
diff --git a/web/src/SearchResults.css b/web/src/SearchResults.css
index 3971fdd..75c8b22 100644
--- a/web/src/SearchResults.css
+++ b/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 ; }
diff --git a/web/src/utils.js b/web/src/utils.js
index fcf53ec..b54fea7 100644
--- a/web/src/utils.js
+++ b/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." /> }