diff --git a/webapp/web/css/menupage/menupage.css b/webapp/web/css/menupage/menupage.css index 774c697ea..894c0b9d3 100644 --- a/webapp/web/css/menupage/menupage.css +++ b/webapp/web/css/menupage/menupage.css @@ -59,22 +59,15 @@ ul#vgraph-classes a { } /* FIND BY ------> */ #find-by { - width: 230px; float: right; - margin-top: 20px; + margin: 0 2em .4em 0; } #find-by h3 { - padding: 0 25px 12px 12px; + padding: 0 0 .2em .8em; border-bottom: 0; } -ul#find-filters { - float: left; - width: 230px; -} ul#find-filters li { - display: block; - height: 35px; - line-height: 35px; + float: left; padding-left: 10px; } ul#find-filters li:last-child { @@ -83,8 +76,6 @@ ul#find-filters li:last-child { ul#find-filters a { display: block; padding-left: 15px; - width: 265px; - height: 35px; } /* RESEARCHERS ------> */ #researchers { @@ -158,7 +149,6 @@ ul#find-filters a { clear: both; width: 90%; margin: 0 auto; - margin-top: 40px; overflow: hidden; } #browse-by h2 { @@ -223,6 +213,10 @@ ul#alpha-browse-individuals a { margin-right: 17px; min-height: 170px; } +h3.selected-class { + margin: 0 0 0 1em; + padding: .8em 0 0 0; +} #individuals-in-class ul { list-style: none; } diff --git a/webapp/web/js/browseClassGroupsPie.js b/webapp/web/js/browseClassGroupsPie.js deleted file mode 100644 index d28a4cbf1..000000000 --- a/webapp/web/js/browseClassGroupsPie.js +++ /dev/null @@ -1,95 +0,0 @@ -/* $This file is distributed under the terms of the license in /doc/license.txt$ */ - -var browseClassGroups = { - // Initial page setup - onLoad: function() { - this.mergeFromTemplate(); - this.initObjects(); - }, - - // Add variables from browse template - mergeFromTemplate: function() { - $.extend(this, browseData); - }, - - // Create references to frequently used elements for convenience - initObjects: function() { - this.browseClassLinks = $('#vgraph-classes li a'); - }, - - // Retrieve classes - graphSetup: function() { - var values = [], - labels = [], - uris = []; - this.browseClassLinks.each(function() { - var count = $(this).children('span').text(); - var count = parseInt(count.slice(1, -1), 10); - var percentage = parseInt(Math.round((count / browseClassGroups.classGroupIndividualCount) * 100), 10); - var name = $(this).text(); - var countStart = name.lastIndexOf(' ('); - var name = name.substring(0, countStart); - // alert(name +' | ' + count +' | '+ percentage); - if ( percentage > 0) { - values.push(percentage); - var name = name +' ('+ percentage +'%)'; - labels.push(name); - uris.push($(this).attr("data-uri")); - } - }); - - // Send the parameters to build the pie chart - graphClasses.piechart(values, labels, uris); - } -}; - -var graphClasses = { - // Build the pie chart using gRaphael - piechart: function(values, labels, uris) { - // Clear the existing pie chart - $('#menupage-graph').empty(); - - // Create the canvas - var r = Raphael("menupage-graph", 500, 300); - - // Setup the colors for the slices - // colors = ['#192933', '#26404E', '#294656', '#194c68', '#487A96', '#63A8CE', '#67AED6','#758A96', '#9DB9C9' ]; - colors = ['#143D52', '#1F5C7A', '#297AA3', '#3399CC', '#5CADD6', '#85C2E0', '#ADD6EB', '#ADCBDD', '#D6EBF5', '#E9F1F5' ]; - // Reverse colors to see how it looks with larger slices in lighter hues: - // colors = colors.reverse(); - - // Now draw the pie chart - var pie = r.g.piechart(150, 142, 100, values, {legend: labels, legendmark: "square", legendpos: "east", colors: colors}); - pie.hover(function () { - this.sector.stop(); - this.sector.scale(1.1, 1.1, this.cx, this.cy); - if (this.label) { - this.label[0].stop(); - this.label[0].scale(1.5); - this.label[1].attr({"font-weight": 800}); - } - }, function () { - this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce"); - if (this.label) { - this.label[0].animate({scale: 1}, 500, "bounce"); - this.label[1].attr({"font-weight": 400}); - } - }); - - // Can't reliably link the slices at the moment. Will come up with a solution if we end up sticking with the pie charts - // $('path').click(function() { - // var index = $('path').index(this); - // var uri = uris[index]; - // // var link = browseClassGroups.baseUrl + '/individuallist?vclassId=' + encodeURIComponent(uri); - // window.location = "#browse-by"; - // browseByVClass.getIndividuals(uri); - // return false; - // }); - } -}; - -$(document).ready(function() { - browseClassGroups.onLoad(); - browseClassGroups.graphSetup(); - // graphClasses.piechart(); -}); \ No newline at end of file diff --git a/webapp/web/js/menupage/browseByVClass.js b/webapp/web/js/menupage/browseByVClass.js index 9f1830051..c9b693393 100644 --- a/webapp/web/js/menupage/browseByVClass.js +++ b/webapp/web/js/menupage/browseByVClass.js @@ -87,7 +87,8 @@ var browseByVClass = { scroll = true; } - // First wipe currently displayed individuals and existing pagination + // First wipe currently displayed class heading, individuals, and existing pagination + $('h3.selected-class').remove(); this.individualsInVClass.empty(); $('nav.pagination').remove(); @@ -98,6 +99,9 @@ var browseByVClass = { browseByVClass.pagination(pages, page); } + selectedClassHeading = '

'+ results.vclass.name +'

'; + browseByVClass.individualsContainer.prepend(selectedClassHeading); + $.each(results.individuals, function(i, item) { label = results.individuals[i].label; moniker = results.individuals[i].moniker; @@ -127,9 +131,9 @@ var browseByVClass = { browseByVClass.selectedVClass(results.vclass.URI); browseByVClass.selectedAlpha(alpha); - // Scroll to the top of the browse section unless told otherwise + // Scroll to #menupage-intro page unless told otherwise if ( scroll != false ) { - $.scrollTo('#browse-by', 500); + $.scrollTo('#menupage-intro', 500); } }); }, diff --git a/webapp/web/js/raphael/g.pie.js b/webapp/web/js/raphael/g.pie.js deleted file mode 100644 index e9c937207..000000000 --- a/webapp/web/js/raphael/g.pie.js +++ /dev/null @@ -1,205 +0,0 @@ -/* - * g.Raphael 0.4.1 - Charting library, based on Raphaël - * - * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com) - * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. - */ -Raphael.fn.g.piechart = function (cx, cy, r, values, opts) { - opts = opts || {}; - var paper = this, - sectors = [], - covers = this.set(), - chart = this.set(), - series = this.set(), - order = [], - len = values.length, - angle = 0, - total = 0, - others = 0, - cut = 9, - defcut = true; - chart.covers = covers; - if (len == 1) { - series.push(this.circle(cx, cy, r).attr({fill: this.g.colors[0], stroke: opts.stroke || "#fff", "stroke-width": opts.strokewidth == null ? 1 : opts.strokewidth})); - covers.push(this.circle(cx, cy, r).attr(this.g.shim)); - total = values[0]; - values[0] = {value: values[0], order: 0, valueOf: function () { return this.value; }}; - series[0].middle = {x: cx, y: cy}; - series[0].mangle = 180; - } else { - function sector(cx, cy, r, startAngle, endAngle, fill) { - var rad = Math.PI / 180, - x1 = cx + r * Math.cos(-startAngle * rad), - x2 = cx + r * Math.cos(-endAngle * rad), - xm = cx + r / 2 * Math.cos(-(startAngle + (endAngle - startAngle) / 2) * rad), - y1 = cy + r * Math.sin(-startAngle * rad), - y2 = cy + r * Math.sin(-endAngle * rad), - ym = cy + r / 2 * Math.sin(-(startAngle + (endAngle - startAngle) / 2) * rad), - res = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(Math.abs(endAngle - startAngle) > 180), 1, x2, y2, "z"]; - res.middle = {x: xm, y: ym}; - return res; - } - for (var i = 0; i < len; i++) { - total += values[i]; - values[i] = {value: values[i], order: i, valueOf: function () { return this.value; }}; - } - values.sort(function (a, b) { - return b.value - a.value; - }); - for (i = 0; i < len; i++) { - if (defcut && values[i] * 360 / total <= 1.5) { - cut = i; - defcut = false; - } - if (i > cut) { - defcut = false; - values[cut].value += values[i]; - values[cut].others = true; - others = values[cut].value; - } - } - len = Math.min(cut + 1, values.length); - others && values.splice(len) && (values[cut].others = true); - for (i = 0; i < len; i++) { - var mangle = angle - 360 * values[i] / total / 2; - if (!i) { - angle = 90 - mangle; - mangle = angle - 360 * values[i] / total / 2; - } - if (opts.init) { - var ipath = sector(cx, cy, 1, angle, angle - 360 * values[i] / total).join(","); - } - var path = sector(cx, cy, r, angle, angle -= 360 * values[i] / total); - var p = this.path(opts.init ? ipath : path).attr({fill: opts.colors && opts.colors[i] || Raphael.getColor("#194c68") || "#666", stroke: opts.stroke || "#fff", "stroke-width": (opts.strokewidth == null ? 1 : opts.strokewidth), "stroke-linejoin": "round"}); - p.value = values[i]; - p.middle = path.middle; - p.mangle = mangle; - sectors.push(p); - series.push(p); - opts.init && p.animate({path: path.join(",")}, (+opts.init - 1) || 1000, ">"); - } - for (i = 0; i < len; i++) { - p = paper.path(sectors[i].attr("path")).attr(this.g.shim); - opts.href && opts.href[i] && p.attr({href: opts.href[i]}); - p.attr = function () {}; - covers.push(p); - series.push(p); - } - } - - chart.hover = function (fin, fout) { - fout = fout || function () {}; - var that = this; - for (var i = 0; i < len; i++) { - (function (sector, cover, j) { - var o = { - sector: sector, - cover: cover, - cx: cx, - cy: cy, - mx: sector.middle.x, - my: sector.middle.y, - mangle: sector.mangle, - r: r, - value: values[j], - total: total, - label: that.labels && that.labels[j] - }; - cover.mouseover(function () { - fin.call(o); - }).mouseout(function () { - fout.call(o); - }); - })(series[i], covers[i], i); - } - return this; - }; - // x: where label could be put - // y: where label could be put - // value: value to show - // total: total number to count % - chart.each = function (f) { - var that = this; - for (var i = 0; i < len; i++) { - (function (sector, cover, j) { - var o = { - sector: sector, - cover: cover, - cx: cx, - cy: cy, - x: sector.middle.x, - y: sector.middle.y, - mangle: sector.mangle, - r: r, - value: values[j], - total: total, - label: that.labels && that.labels[j] - }; - f.call(o); - })(series[i], covers[i], i); - } - return this; - }; - chart.click = function (f) { - var that = this; - for (var i = 0; i < len; i++) { - (function (sector, cover, j) { - var o = { - sector: sector, - cover: cover, - cx: cx, - cy: cy, - mx: sector.middle.x, - my: sector.middle.y, - mangle: sector.mangle, - r: r, - value: values[j], - total: total, - label: that.labels && that.labels[j] - }; - cover.click(function () { f.call(o); }); - })(series[i], covers[i], i); - } - return this; - }; - chart.inject = function (element) { - element.insertBefore(covers[0]); - }; - var legend = function (labels, otherslabel, mark, dir) { - var x = cx + r + r / 5, - y = cy, - h = y + 10; - labels = labels || []; - dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "east"; - mark = paper.g.markers[mark && mark.toLowerCase()] || "disc"; - chart.labels = paper.set(); - for (var i = 0; i < len; i++) { - var clr = series[i].attr("fill"), - j = values[i].order, - txt; - values[i].others && (labels[j] = otherslabel || "Others"); - labels[j] = paper.g.labelise(labels[j], values[i], total); - chart.labels.push(paper.set()); - chart.labels[i].push(paper.g[mark](x + 5, h, 5).attr({fill: clr, stroke: "none"})); - chart.labels[i].push(txt = paper.text(x + 20, h, labels[j] || values[j]).attr(paper.g.txtattr).attr({fill: opts.legendcolor || "#000", "text-anchor": "start"})); - covers[i].label = chart.labels[i]; - h += txt.getBBox().height * 1.2; - } - var bb = chart.labels.getBBox(), - tr = { - east: [0, -bb.height / 2], - west: [-bb.width - 2 * r - 20, -bb.height / 2], - north: [-r - bb.width / 2, -r - bb.height - 10], - south: [-r - bb.width / 2, r + 10] - }[dir]; - chart.labels.translate.apply(chart.labels, tr); - chart.push(chart.labels); - }; - if (opts.legend) { - legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos); - } - chart.push(series, covers); - chart.series = series; - chart.covers = covers; - return chart; -}; \ No newline at end of file diff --git a/webapp/web/templates/freemarker/body/menupage/menupage.ftl b/webapp/web/templates/freemarker/body/menupage/menupage.ftl index 031af31d8..dbdb7173d 100644 --- a/webapp/web/templates/freemarker/body/menupage/menupage.ftl +++ b/webapp/web/templates/freemarker/body/menupage/menupage.ftl @@ -6,20 +6,6 @@ <#include "menupage-browse.ftl"> diff --git a/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl b/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl index d4f0936ae..3cb7e2e11 100644 --- a/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl +++ b/webapp/web/templates/freemarker/body/partials/menupage/menupage-browse.ftl @@ -3,8 +3,6 @@ <#-- Template for browsing individuals in class groups for menupages -->
-

Browse by

-