diff --git a/webapp/web/css/menupage/menupage.css b/webapp/web/css/menupage/menupage.css index 92e8bf123..7bdfe21fd 100644 --- a/webapp/web/css/menupage/menupage.css +++ b/webapp/web/css/menupage/menupage.css @@ -253,6 +253,18 @@ li.individual h1.thumb { #individuals-in-class span.org { display: block; } +ul.mostSpecificTypes li { + float: left; + display: block; + padding: 0 10px; + border-right: 1px solid #c9c8c8; +} +ul.mostSpecificTypes li:first-child { + padding-left: 0; +} +ul.mostSpecificTypes li:last-child { + border-right: none +} p.no-individuals { margin: 1em 2em; } diff --git a/webapp/web/js/menupage/browseByVClass.js b/webapp/web/js/menupage/browseByVClass.js index 040e174d0..eb732a450 100644 --- a/webapp/web/js/menupage/browseByVClass.js +++ b/webapp/web/js/menupage/browseByVClass.js @@ -26,23 +26,23 @@ var browseByVClass = { }, // Event listeners. Called on page load - bindEventListeners: function() { + bindEventListeners: function() { // Listeners for vClass switching this.vgraphVClassLinks.click(function() { - uri = $(this).attr('data-uri'); + var uri = $(this).attr('data-uri'); browseByVClass.getIndividuals(uri); }); this.browseVClassLinks.click(function() { - uri = $(this).attr('data-uri'); + var uri = $(this).attr('data-uri'); browseByVClass.getIndividuals(uri); return false; }); // Listener for alpha switching this.alphaIndexLinks.click(function() { - uri = $('#browse-classes li a.selected').attr('data-uri'); - alpha = $(this).attr('data-alpha'); + var uri = $('#browse-classes li a.selected').attr('data-uri'); + var alpha = $(this).attr('data-alpha'); browseByVClass.getIndividuals(uri, alpha); return false; }); @@ -54,9 +54,9 @@ var browseByVClass = { // Listener for page switching -- separate from the rest because it needs to be callable paginationListener: function() { $('.pagination li a').click(function() { - uri = $('#browse-classes li a.selected').attr('data-uri'); - alpha = $('#alpha-browse-individuals li a.selected').attr('data-alpha'); - page = $(this).attr('data-page'); + var uri = $('#browse-classes li a.selected').attr('data-uri'); + var alpha = $('#alpha-browse-individuals li a.selected').attr('data-alpha'); + var page = $(this).attr('data-page'); browseByVClass.getIndividuals(uri, alpha, page); return false; }); @@ -71,7 +71,7 @@ var browseByVClass = { // Where all the magic happens -- gonna fetch me some individuals getIndividuals: function(vclassUri, alpha, page, scroll) { - url = this.dataServiceUrl + encodeURIComponent(vclassUri); + var url = this.dataServiceUrl + encodeURIComponent(vclassUri); if ( alpha && alpha != "all") { url += '&alpha=' + alpha; } @@ -87,8 +87,8 @@ var browseByVClass = { // Scroll to #menupage-intro page unless told otherwise if ( scroll != false ) { // only scroll back up if we're past the top of the #browse-by section - scrollPosition = browseByVClass.getPageScroll(); - browseByOffset = $('#browse-by').offset(); + var scrollPosition = browseByVClass.getPageScroll(); + var browseByOffset = $('#browse-by').offset(); if ( scrollPosition[1] > browseByOffset.top) { $.scrollTo('#menupage-intro', 500); } @@ -102,10 +102,11 @@ var browseByVClass = { if ( results.individuals.length == 0 ) { browseByVClass.emptyResultSet(results.vclass, alpha) } else { + var vclassName = results.vclass.name; $.each(results.individuals, function(i, item) { var individual, label, - vclassName, + mostSpecificTypes, uri, profileUrl, image, @@ -113,7 +114,8 @@ var browseByVClass = { individual = results.individuals[i]; label = individual.label; - vclassName = individual.vclassName; + mostSpecificTypes = individual.mostSpecificTypes; + moreInfo = browseByVClass.getMoreInfo(mostSpecificTypes, vclassName); uri = individual.URI; profileUrl = individual.profileUrl; if ( individual.thumbUrl ) { @@ -127,8 +129,10 @@ var browseByVClass = { listItem += '