litvinovg/vivo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

1. Removed generic styles so that vivo-sitewide styles are not overridden

Browse source 
2. Changed manual script includes to let template it do for us.
3. Changed default 10 colors for temporal graph line bars.
This commit is contained in:
cdtank 2011-01-14 21:39:11 +00:00
parent 2672057996
commit 609e5fd763
5 changed files with 61 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
productMods/css/visualization/entitycomparison/layout.css
View file

@ -2,28 +2,14 @@
@CHARSET "UTF-8"; @CHARSET "UTF-8";
head,#body {
font: 0.9em Helvetica;
}
#body { #body {
font: 0.9em Helvetica;
background-color: #fff; background-color: #fff;
min-height: 800px; min-height: 800px;
width: 100%; width: 100%;
min-width: 900px; /*min-width: 900px;*/
margin: auto; margin: auto;
} overflow: hidden;
h1 {
padding-top: 10px;
/* font-size: 1.5em; */
margin-left: 5%;
}
h2 {
/* font-size: 1.1em; */
margin-top: 10px;
margin-bottom: 5px;
} }
a.temporalGraphLinks { a.temporalGraphLinks {
@ -46,10 +32,6 @@ a.temporalGraphLinks {
margin-left: 10px; margin-left: 10px;
} }
form{
margin-top:70px;
margin-bottom: -50px;
}
#yaxislabel { #yaxislabel {
font-size: 12px; font-size: 12px;
float:right; float:right;
@ -69,7 +51,7 @@ form{
} }
#notification-container { #notification-container {
position: inherit; position: inherit;
} }
.disabled-checkbox-event-receiver { .disabled-checkbox-event-receiver {
@ -83,6 +65,7 @@ position: inherit;
margin-top: 20px; margin-top: 20px;
margin-bottom: -40px; margin-bottom: -40px;
} }
#bar { #bar {
height: 20px; height: 20px;
float: left; float: left;
@ -148,10 +131,6 @@ position: inherit;
margin-top: 50px; margin-top: 50px;
} }
#bottom,#graphContainer {
/*float: right;*/
}
#graphContainer { #graphContainer {
margin-bottom: 15px; margin-bottom: 15px;
width: 450px; width: 450px;
@ -180,7 +159,6 @@ position: inherit;
float:right; float:right;
margin-right:3%; margin-right:3%;
width:54%; width:54%;
margin-top: -43px;
} }
#counter,#total { #counter,#total {
@ -191,16 +169,11 @@ position: inherit;
margin-top: 10px; margin-top: 10px;
} }
li{ #paginatedTable {
padding: 5px;
list-style: none;
}
#paginatedTable{
margin-top:0px; margin-top:0px;
} }
.sDomSearchBar{ .sDomSearchBar {
margin-bottom: -10px; margin-bottom: -10px;
margin-left: 41%; margin-left: 41%;
} }
@ -213,32 +186,6 @@ li{
font-weight: bold !important; font-weight: bold !important;
} }
/*
.metallic{
background-color: #212D34;
color: white;
}
*/
#leftUpper{
/*
border: 1px #3D454E solid;
border-top: 10px #3D454E solid;
background-color: #D9D9D9;
padding-left: 10px;
*/
}
#leftLower{
/*
border: 1px #3D454E solid;
border-top: 10px #3D454E solid;
padding-left: 10px;
*/
}
#bottomButtons{ #bottomButtons{
width: 100%; width: 100%;
float:right; float:right;
@ -255,6 +202,6 @@ p.displayCounter{
border-bottom: 1px solid gray; border-bottom: 1px solid gray;
} }
#comparisonHeader, #entityHeader, #entitylevelheading, #comparisonParameter, #headerText{ #comparisonHeader, #entityHeader, #entitylevelheading, #comparisonParameter, #headerText {
color: #2485ae; color: #2485ae;
} }

28
productMods/js/visualization/entitycomparison/constants.js
View file

@ -2,28 +2,33 @@
//Hard coded color constants //Hard coded color constants
var TURQUOISE = "#8DD3C7"; var TURQUOISE = "#8DD3C7";
var DARK_TURQUOISE = "#009999";
var LIGHT_YELLOW = "#FFFFB3"; var LIGHT_YELLOW = "#FFFFB3";
var LIGHT_VIOLET = "#BEBADA"; var LIGHT_VIOLET = "#BEBADA";
var RED = "#CC0000";
var LIGHT_RED = "#FB8072"; var LIGHT_RED = "#FB8072";
var DARK_RED = "#520000";
var SKY_BLUE = "#80B1D3"; var SKY_BLUE = "#80B1D3";
var DARK_BLUE = "#80B1D3";
var LIGHT_BLUE = "#3399FF";
var ORANGE = "#FDB462"; var ORANGE = "#FDB462";
var DARK_ORANGE = "#FF9900";
var LIGHT_GREEN = "#B3DE69"; var LIGHT_GREEN = "#B3DE69";
var DARK_GREEN = "#006600";
var VIBRANT_GREEN = "#99CC00";
var LIGHT_PINK = "#FCCDE5"; var LIGHT_PINK = "#FCCDE5";
var LIGHT_GREY = "#D9D9D9"; var LIGHT_GREY = "#D9D9D9";
var PURPLE = "#BC80BD"; var PURPLE = "#BC80BD";
var DARK_PURPLE = "#6600CC";
var PINK_PURPLE = "#CC00CC";
var colorConstantQueue = var colorConstantQueue = [ DARK_BLUE, DARK_TURQUOISE,
[ LIGHT_BLUE, DARK_GREEN,
TURQUOISE, LIGHT_YELLOW, LIGHT_VIOLET, LIGHT_RED, VIBRANT_GREEN, DARK_PURPLE,
SKY_BLUE, ORANGE, LIGHT_GREEN, LIGHT_PINK, LIGHT_GREY, PINK_PURPLE, DARK_ORANGE,
PURPLE DARK_RED, RED ];
];
var freeColors = [ var freeColors = colorConstantQueue.slice();
TURQUOISE, LIGHT_YELLOW, LIGHT_VIOLET, LIGHT_RED,
SKY_BLUE, ORANGE, LIGHT_GREEN, LIGHT_PINK, LIGHT_GREY,
PURPLE
];
var year = { var year = {
min: 1998, min: 1998,
@ -76,4 +81,3 @@ var FlotOptions = {
}; };
FlotOptions.colors = colorConstantQueue; FlotOptions.colors = colorConstantQueue;

4
productMods/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css
View file

@ -1,9 +1,5 @@
@CHARSET "UTF-8"; @CHARSET "UTF-8";
thead th, tr.even td{
background-color: white;
}
.filterInfo { .filterInfo {
/*font-size: 0.9em;*/ /*font-size: 0.9em;*/
display: inline-block; display: inline-block;

2
productMods/js/visualization/entitycomparison/util.js
View file

@ -1089,7 +1089,7 @@ function disableUncheckedEntities(){
createNotification("warning-notification", { title:'Information', createNotification("warning-notification", { title:'Information',
text:'A Maximum of 10 entities can be compared.' },{ text:'A Maximum of 10 entities can be compared.' },{
custom: false, custom: false,
expires: 4000 expires: false
}); });
} }
} }

84
productMods/templates/freemarker/visualization/entitycomparison/entityComparisonStandaloneActivator.ftl
View file

@ -12,69 +12,45 @@
<#assign subOrganizationTemporalGraphGrantURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count"> <#assign subOrganizationTemporalGraphGrantURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?"> <#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'> <#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_comparison&uri=${organizationURI}&labelField=label'> <#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_comparison&uri=${organizationURI}&labelField=label'>
<#-- Javascript files --> <#-- Javascript files -->
<#assign flot = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
<#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'> <#assign excanvas = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/flot/excanvas.js'>
<#assign flot = 'js/visualization/entitycomparison/jquery_plugins/flot/jquery.flot.js'>
<#assign fliptext = 'js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
<#assign jqueryNotify = 'js/jquery_plugins/jquery.notify.min.js'>
<#assign jqueryUI = 'js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
<#assign datatable = 'js/jquery_plugins/jquery.dataTables.min.js'>
<#assign entityComparisonUtils = 'js/visualization/entitycomparison/util.js'>
<#assign entityComparisonConstants = 'js/visualization/entitycomparison/constants.js'>
<!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]--> <!--[if IE]><script type="text/javascript" src="${excanvas}"></script><![endif]-->
${scripts.add(flot)}
<#assign fliptext = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'> ${scripts.add(fliptext)}
${scripts.add(jqueryUI)}
<#assign jqueryNotify = '${urls.base}/js/jquery_plugins/jquery.notify.min.js'> ${scripts.add(datatable)}
<#assign jqueryUI = '${urls.base}/js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'> ${scripts.add(entityComparisonUtils)}
${scripts.add(entityComparisonConstants)}
<#assign datatable = '${urls.base}/js/jquery_plugins/jquery.dataTables.min.js'> ${scripts.add(jqueryNotify)}
<#assign entityComparisonUtils = '${urls.base}/js/visualization/entitycomparison/util.js'>
<#assign entityComparisonConstants = '${urls.base}/js/visualization/entitycomparison/constants.js'>
<script type="text/javascript" src="${flot}"></script>
<script type="text/javascript" src="${fliptext}"></script>
<!--
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
-->
<script type="text/javascript" src="${jqueryUI}"></script>
<script type="text/javascript" src="${datatable}"></script>
<script type="text/javascript" src="${entityComparisonUtils}"></script>
<script type="text/javascript" src="${entityComparisonConstants}"></script>
<script type="text/javascript" src="${jqueryNotify}"></script>
<#-- CSS files --> <#-- CSS files -->
<#assign demoTable = "js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
<#assign demoTable = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" /> <#assign jqueryUIStyle = "js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
<#assign jqueryNotifyStyle = "css/jquery_plugins/ui.notify.css" />
<#assign jqueryUIStyle = "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" /> <#assign entityComparisonStyle = "css/visualization/entitycomparison/layout.css" />
<#assign jqueryNotifyStyle = "${urls.base}/css/jquery_plugins/ui.notify.css" />
<#assign entityComparisonStyle = "${urls.base}/css/visualization/entitycomparison/layout.css" />
<#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" /> <#assign entityComparisonStyleIEHack = "${urls.base}/css/visualization/entitycomparison/layout-ie.css" />
<#assign vizStyle = "css/visualization/visualization.css" />
<#assign vizStyle = "${urls.base}/css/visualization/visualization.css" /> ${stylesheets.add(jqueryUIStyle)}
${stylesheets.add(demoTable)}
${stylesheets.add(entityComparisonStyle)}
${stylesheets.add(vizStyle)}
<link href="${jqueryUIStyle}" rel="stylesheet" type="text/css" /> ${stylesheets.add(jqueryNotifyStyle)}
<link href="${demoTable}" rel="stylesheet" type="text/css" />
<link href="${entityComparisonStyle}" rel="stylesheet" type="text/css" />
<link href="${vizStyle}" rel="stylesheet" type="text/css" />
<link href="${jqueryNotifyStyle}" rel="stylesheet" type="text/css" />
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]--> <!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
@ -88,15 +64,15 @@ var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}"; var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantURL}"; var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantURL}";
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
var jsonString = '${jsonContent}';
var organizationLabel = '${organizationLabel}';
/* This is used to cache the current state whether the user is allowed to select more entities from /* This is used to cache the current state whether the user is allowed to select more entities from
the datatable or not. Once Max number of entity selection is reached the user can no longer select the datatable or not. Once Max number of entity selection is reached the user can no longer select
more & this variable will be set to false. */ more & this variable will be set to false. */
@ -120,8 +96,6 @@ var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantU
// initial display of the grid when the page loads // initial display of the grid when the page loads
init(graphContainer); init(graphContainer);
//click event handler for clear button //click event handler for clear button
$("a#clear").click(function(){ $("a#clear").click(function(){
clearRenderedObjects(); clearRenderedObjects();
@ -348,7 +322,7 @@ var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantU
<div id="rightblock"> <div id="rightblock">
<h4 id="headerText">Comparing <span id="comparisonHeader">Publications</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h4> <h3 id="headerText">Comparing <span id="comparisonHeader">Publications</span> of <span id="entityHeader">Institutions</span> in <span id="organizationLabel"></span></h3>
<div id="temporal-graph"> <div id="temporal-graph">
<div id="yaxislabel"></div> <div id="yaxislabel"></div>
@ -357,7 +331,7 @@ var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantU
</div> </div>
<div id="bottom"> <div id="bottom">
<h4><span id="comparisonParameter"></span></h4> <h3><span id="comparisonParameter"></span></h3>
<p class="displayCounter">You have selected <span id="counter">0</span> of a maximum <p class="displayCounter">You have selected <span id="counter">0</span> of a maximum
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare. <span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
<a id="clear" class="temporalGraphLinks">Clear</a></p> <a id="clear" class="temporalGraphLinks">Clear</a></p>