1. Removed generic styles so that vivo-sitewide styles are not overridden
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
parent
2672057996
commit
609e5fd763
5 changed files with 61 additions and 140 deletions
|
|
@ -2,28 +2,14 @@
|
|||
|
||||
@CHARSET "UTF-8";
|
||||
|
||||
head,#body {
|
||||
font: 0.9em Helvetica;
|
||||
}
|
||||
|
||||
#body {
|
||||
font: 0.9em Helvetica;
|
||||
background-color: #fff;
|
||||
min-height: 800px;
|
||||
width: 100%;
|
||||
min-width: 900px;
|
||||
/*min-width: 900px;*/
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 10px;
|
||||
/* font-size: 1.5em; */
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
/* font-size: 1.1em; */
|
||||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a.temporalGraphLinks {
|
||||
|
|
@ -46,10 +32,6 @@ a.temporalGraphLinks {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
form{
|
||||
margin-top:70px;
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
#yaxislabel {
|
||||
font-size: 12px;
|
||||
float:right;
|
||||
|
|
@ -83,6 +65,7 @@ position: inherit;
|
|||
margin-top: 20px;
|
||||
margin-bottom: -40px;
|
||||
}
|
||||
|
||||
#bar {
|
||||
height: 20px;
|
||||
float: left;
|
||||
|
|
@ -148,10 +131,6 @@ position: inherit;
|
|||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#bottom,#graphContainer {
|
||||
/*float: right;*/
|
||||
}
|
||||
|
||||
#graphContainer {
|
||||
margin-bottom: 15px;
|
||||
width: 450px;
|
||||
|
|
@ -180,7 +159,6 @@ position: inherit;
|
|||
float:right;
|
||||
margin-right:3%;
|
||||
width:54%;
|
||||
margin-top: -43px;
|
||||
}
|
||||
|
||||
#counter,#total {
|
||||
|
|
@ -191,11 +169,6 @@ position: inherit;
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
li{
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#paginatedTable {
|
||||
margin-top:0px;
|
||||
}
|
||||
|
|
@ -213,32 +186,6 @@ li{
|
|||
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{
|
||||
width: 100%;
|
||||
float:right;
|
||||
|
|
|
|||
|
|
@ -2,28 +2,33 @@
|
|||
|
||||
//Hard coded color constants
|
||||
var TURQUOISE = "#8DD3C7";
|
||||
var DARK_TURQUOISE = "#009999";
|
||||
var LIGHT_YELLOW = "#FFFFB3";
|
||||
var LIGHT_VIOLET = "#BEBADA";
|
||||
var RED = "#CC0000";
|
||||
var LIGHT_RED = "#FB8072";
|
||||
var DARK_RED = "#520000";
|
||||
var SKY_BLUE = "#80B1D3";
|
||||
var DARK_BLUE = "#80B1D3";
|
||||
var LIGHT_BLUE = "#3399FF";
|
||||
var ORANGE = "#FDB462";
|
||||
var DARK_ORANGE = "#FF9900";
|
||||
var LIGHT_GREEN = "#B3DE69";
|
||||
var DARK_GREEN = "#006600";
|
||||
var VIBRANT_GREEN = "#99CC00";
|
||||
var LIGHT_PINK = "#FCCDE5";
|
||||
var LIGHT_GREY = "#D9D9D9";
|
||||
var PURPLE = "#BC80BD";
|
||||
var DARK_PURPLE = "#6600CC";
|
||||
var PINK_PURPLE = "#CC00CC";
|
||||
|
||||
var colorConstantQueue =
|
||||
[
|
||||
TURQUOISE, LIGHT_YELLOW, LIGHT_VIOLET, LIGHT_RED,
|
||||
SKY_BLUE, ORANGE, LIGHT_GREEN, LIGHT_PINK, LIGHT_GREY,
|
||||
PURPLE
|
||||
];
|
||||
var colorConstantQueue = [ DARK_BLUE, DARK_TURQUOISE,
|
||||
LIGHT_BLUE, DARK_GREEN,
|
||||
VIBRANT_GREEN, DARK_PURPLE,
|
||||
PINK_PURPLE, DARK_ORANGE,
|
||||
DARK_RED, RED ];
|
||||
|
||||
var freeColors = [
|
||||
TURQUOISE, LIGHT_YELLOW, LIGHT_VIOLET, LIGHT_RED,
|
||||
SKY_BLUE, ORANGE, LIGHT_GREEN, LIGHT_PINK, LIGHT_GREY,
|
||||
PURPLE
|
||||
];
|
||||
var freeColors = colorConstantQueue.slice();
|
||||
|
||||
var year = {
|
||||
min: 1998,
|
||||
|
|
@ -76,4 +81,3 @@ var FlotOptions = {
|
|||
};
|
||||
|
||||
FlotOptions.colors = colorConstantQueue;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
@CHARSET "UTF-8";
|
||||
|
||||
thead th, tr.even td{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.filterInfo {
|
||||
/*font-size: 0.9em;*/
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1089,7 +1089,7 @@ function disableUncheckedEntities(){
|
|||
createNotification("warning-notification", { title:'Information',
|
||||
text:'A Maximum of 10 entities can be compared.' },{
|
||||
custom: false,
|
||||
expires: 4000
|
||||
expires: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,69 +12,45 @@
|
|||
<#assign subOrganizationTemporalGraphGrantURL = "${urls.base}${standardVisualizationURLRoot}?vis=entity_grant_count">
|
||||
<#assign subOrganizationVivoProfileURL = "${urls.base}/individual?">
|
||||
|
||||
|
||||
|
||||
<#assign temporalGraphSmallIcon = '${urls.images}/visualization/temporal_vis_small_icon.jpg'>
|
||||
|
||||
|
||||
<#assign TemporalGraphDownloadFile = '${urls.base}${dataVisualizationURLRoot}?vis=entity_comparison&uri=${organizationURI}&labelField=label'>
|
||||
|
||||
|
||||
<#-- 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 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]-->
|
||||
|
||||
<#assign fliptext = '${urls.base}/js/visualization/entitycomparison/jquery_plugins/fliptext/jquery.mb.flipText.js'>
|
||||
|
||||
<#assign jqueryNotify = '${urls.base}/js/jquery_plugins/jquery.notify.min.js'>
|
||||
<#assign jqueryUI = '${urls.base}/js/jquery-ui/js/jquery-ui-1.8.4.custom.min.js'>
|
||||
|
||||
<#assign datatable = '${urls.base}/js/jquery_plugins/jquery.dataTables.min.js'>
|
||||
|
||||
<#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>
|
||||
${scripts.add(flot)}
|
||||
${scripts.add(fliptext)}
|
||||
${scripts.add(jqueryUI)}
|
||||
${scripts.add(datatable)}
|
||||
${scripts.add(entityComparisonUtils)}
|
||||
${scripts.add(entityComparisonConstants)}
|
||||
${scripts.add(jqueryNotify)}
|
||||
|
||||
<#-- CSS files -->
|
||||
|
||||
|
||||
<#assign demoTable = "${urls.base}/js/visualization/entitycomparison/jquery_plugins/datatable/demo_table.css" />
|
||||
|
||||
<#assign jqueryUIStyle = "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.4.custom.css" />
|
||||
<#assign jqueryNotifyStyle = "${urls.base}/css/jquery_plugins/ui.notify.css" />
|
||||
|
||||
<#assign entityComparisonStyle = "${urls.base}/css/visualization/entitycomparison/layout.css" />
|
||||
<#assign demoTable = "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 entityComparisonStyle = "css/visualization/entitycomparison/layout.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" />
|
||||
|
||||
|
||||
|
||||
<link href="${jqueryUIStyle}" rel="stylesheet" type="text/css" />
|
||||
<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" />
|
||||
${stylesheets.add(jqueryUIStyle)}
|
||||
${stylesheets.add(demoTable)}
|
||||
${stylesheets.add(entityComparisonStyle)}
|
||||
${stylesheets.add(vizStyle)}
|
||||
${stylesheets.add(jqueryNotifyStyle)}
|
||||
<!--[if IE]><link href="${entityComparisonStyleIEHack}" rel="stylesheet" type="text/css" /><![endif]-->
|
||||
|
||||
|
||||
|
|
@ -88,15 +64,15 @@ var subOrganizationVivoProfileURL = "${subOrganizationVivoProfileURL}";
|
|||
var subOrganizationTemporalGraphURL = "${subOrganizationTemporalGraphURL}";
|
||||
var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantURL}";
|
||||
|
||||
var jsonString = '${jsonContent}';
|
||||
var organizationLabel = '${organizationLabel}';
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$(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
|
||||
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. */
|
||||
|
|
@ -120,8 +96,6 @@ var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantU
|
|||
// initial display of the grid when the page loads
|
||||
init(graphContainer);
|
||||
|
||||
|
||||
|
||||
//click event handler for clear button
|
||||
$("a#clear").click(function(){
|
||||
clearRenderedObjects();
|
||||
|
|
@ -348,7 +322,7 @@ var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantU
|
|||
|
||||
<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="yaxislabel"></div>
|
||||
|
|
@ -357,7 +331,7 @@ var subOrganizationTemporalGraphGrantURL = "${subOrganizationTemporalGraphGrantU
|
|||
</div>
|
||||
|
||||
<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
|
||||
<span id="total">10</span> <span id="entityleveltext"> schools</span> to compare.
|
||||
<a id="clear" class="temporalGraphLinks">Clear</a></p>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue