updated styling
This commit is contained in:
Connor Turland
parent
6b8a99eb01
commit
b83bcd65a4
5 changed files with 36 additions and 48 deletions
|
|
@ -93,9 +93,9 @@ function initFD(){
|
|||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: '#d1d1d1',
|
||||
color: '#222222',
|
||||
//type: 'arrow',
|
||||
lineWidth: 0.4
|
||||
lineWidth: 0.5
|
||||
},
|
||||
//Native canvas text styling
|
||||
Label: {
|
||||
|
|
@ -146,8 +146,8 @@ function initFD(){
|
|||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 0.4,
|
||||
color: '#d1d1d1'
|
||||
lineWidth: 0.5,
|
||||
color: '#222222'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -157,7 +157,7 @@ function initFD(){
|
|||
node.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 3,
|
||||
color: '#36acfb'
|
||||
color: '#FFF'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
|
@ -194,29 +194,12 @@ function initFD(){
|
|||
// Create a 'name' and 'close' buttons and add them
|
||||
// to the main node label
|
||||
var nameContainer = document.createElement('span'),
|
||||
closeButton = document.createElement('span'),
|
||||
style = nameContainer.style;
|
||||
nameContainer.className = 'name';
|
||||
nameContainer.innerHTML = node.name;
|
||||
closeButton.className = 'close';
|
||||
closeButton.innerHTML = 'x';
|
||||
nameContainer.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||
domElement.appendChild(nameContainer);
|
||||
domElement.appendChild(closeButton);
|
||||
style.fontSize = "0.9em";
|
||||
style.color = "#ddd";
|
||||
//Fade the node and its connections when
|
||||
//clicking the close button
|
||||
closeButton.onclick = function() {
|
||||
node.setData('alpha', 0, 'end');
|
||||
node.eachAdjacency(function(adj) {
|
||||
adj.setData('alpha', 0, 'end');
|
||||
});
|
||||
fd.fx.animate({
|
||||
modes: ['node-property:alpha',
|
||||
'edge-property:alpha'],
|
||||
duration: 500
|
||||
});
|
||||
};
|
||||
style.color = "#222222";
|
||||
//Toggle a node selection when clicking
|
||||
//its name. This is done by animating some
|
||||
//node styles like its dimension and the color
|
||||
|
|
@ -229,7 +212,7 @@ function initFD(){
|
|||
n.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 0.4,
|
||||
color: '#d1d1d1'
|
||||
color: '#222222'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -100,8 +100,8 @@ function initRG(){
|
|||
},
|
||||
Edge: {
|
||||
overridable: true,
|
||||
color: '#d1d1d1',
|
||||
lineWidth: 0.4
|
||||
color: '#222222',
|
||||
lineWidth: 0.5
|
||||
},
|
||||
//Native canvas text styling
|
||||
Label: {
|
||||
|
|
@ -152,8 +152,8 @@ function initRG(){
|
|||
n.setData('dim', 25, 'end');
|
||||
n.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 0.4,
|
||||
color: '#d1d1d1'
|
||||
lineWidth: 0.5,
|
||||
color: '#222222'
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -163,7 +163,7 @@ function initRG(){
|
|||
node.eachAdjacency(function(adj) {
|
||||
adj.setDataset('end', {
|
||||
lineWidth: 3,
|
||||
color: '#36acfb'
|
||||
color: '#FFF'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
|
|
@ -199,11 +199,21 @@ function initRG(){
|
|||
onCreateLabel: function(domElement, node){
|
||||
// Create a 'name' and 'close' buttons and add them
|
||||
// to the main node label
|
||||
domElement.innerHTML = node.name;
|
||||
domElement.innerHTML = '<div class="label">' + node.name + '</div>';
|
||||
domElement.onclick = function(){
|
||||
rg.onClick(node.id, {
|
||||
onComplete: function() {
|
||||
|
||||
var html =
|
||||
'<p class="type">' + node.getData("itemcatname") + '</p>' +
|
||||
'<img alt="' + node.getData("itemcatname") + '" class="icon" height="50" src="' + imgArray[node.getData("itemcatname")].src + '" width="50" />' +
|
||||
'<a href="/users/' + node.getData("userid") + '/items/' + node.id + '" class="title">' + node.name + '</a>' +
|
||||
'<div class="contributor">Added by: <a href="/users/' + node.getData('userid') + '">' + node.getData('username') + '</a></div>' +
|
||||
'<div class="desc"><p>' + node.getData('desc') + '</p></div>' +
|
||||
'<a href="' + node.getData('link') + '" class="link" target="_blank">' + node.getData('link') + '</a>';
|
||||
|
||||
//append connections information
|
||||
$jit.id('showcard').innerHTML = '<div class="item" id="item_' + node.id + '"></div>';
|
||||
$jit.id('item_' + node.id).innerHTML = html;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,7 @@
|
|||
|
||||
}
|
||||
|
||||
span.close {
|
||||
color:#FF5555;
|
||||
cursor:pointer;
|
||||
font-weight:bold;
|
||||
margin-left:3px;
|
||||
}
|
||||
.label { display:block; padding: 2px 4px; background:#ddd; opacity:0.8; border-radius:5px; }
|
||||
|
||||
span.name {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@ img {border:0; padding:0; margin:0; display:block; text-indent:-9999px;}
|
|||
html, body, .main, .wrapper, #container { height: 100%; }
|
||||
|
||||
html { }
|
||||
body { background:#031924 url(background2.jpg) repeat 0 0; font-family:Arial, Helvetica, sans-serif; background-attachment:fixed; color:#FFF; }
|
||||
body { background:#031924 url(background2.jpg) repeat 0 0; font-family: 'katarine-web', sans-serif; background-attachment:fixed; color:#FFF; }
|
||||
|
||||
h1 {display:block; text-align:left; }
|
||||
h2 {display:block; text-align:center; background: #333; font-size:24px;}
|
||||
h1 {display:block; text-align:left; font-family: "vinyl",sans-serif; }
|
||||
h2 {display:block; text-align:center; font-family: "vinyl",sans-serif; background: #333; font-size:24px;}
|
||||
|
||||
a {color:#2d6a5d; text-decoration:none;}
|
||||
.clearfloat {clear:both;}
|
||||
|
||||
.new_session, .new_user, .new_item, .new_synapse, .new_map, .edit_user, .edit_item, .edit_synapse, .edit_map { display: block; width: 350px; margin: 0 auto; background: url('bg.png'); padding: 20px; border-radius: 15px; color: #000; border:2px solid #000; }
|
||||
.new_session, .new_user, .new_item, .new_synapse, .new_map, .edit_user, .edit_item, .edit_synapse, .edit_map { display: block; width: 350px; position:absolute; left:50%; top:0; margin:200px 0 0 -195px; background: url('bg.png'); padding: 20px; border-radius: 15px; color: #000; border:2px solid #000; }
|
||||
|
||||
.anypage .new_item, .anypage .new_synapse { display: none; position:absolute; left:50%; top:0; margin:200px 0 0 -195px; border:2px solid #000; }
|
||||
#closenewtopic, #closenewsynapse { position:absolute; top: 3px; right:3px; }
|
||||
|
|
@ -51,12 +51,13 @@ input[type="submit"] { margin-top:5px; }
|
|||
|
||||
.headertop { display:block; position:fixed; top:0; left:0; z-index:10; height:38px; width:100%; min-width:622px; background: url(topbg2.png) repeat-x top left; }
|
||||
#mainTitle { float: left; }
|
||||
#mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; text-transform:uppercase; font-style: italic; font-weight: 400;}
|
||||
#mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; text-transform:uppercase; font-weight: 400;}
|
||||
.headertop ul { display:block; float: right; }
|
||||
.headertop ul li {display:block; float:right; margin:10px 5px 0 5px; }
|
||||
.headertop ul li a { color:#FFF; }
|
||||
|
||||
.wrapper {display:block; height:100%; margin:50px 0; }
|
||||
.wrapper {display:block; height:100%; margin:0 0; }
|
||||
.wrapper h1 { margin-top:50px; }
|
||||
|
||||
.nodemargin { padding-top:120px; }
|
||||
|
||||
|
|
@ -81,9 +82,8 @@ input[type="submit"] { margin-top:5px; }
|
|||
/* --- styling the filter ---*/
|
||||
.legend { position:fixed; bottom:10px; right:15px; z-index:12; display:block; width:auto; color: #67AF9F;
|
||||
white-space: nowrap;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
padding: 3px 8px;
|
||||
margin: -0.75em 0 0;
|
||||
|
|
@ -105,7 +105,7 @@ cursor: pointer; }
|
|||
#iconLegend ul { display:none; }
|
||||
#iconLegend ul li {clear:both; list-style-type:none; display:block; padding:3px; }
|
||||
#iconLegend ul img { width:40px; height:40px; float:left; }
|
||||
#iconLegend ul p {float:left; font-weight:bold; font-family: sans-serif; display: block; margin: 0; background: none; padding: 10px 4px 2px 4px;}
|
||||
#iconLegend ul p {float:left; display: block; margin: 0; background: none; padding: 10px 4px 2px 4px;}
|
||||
#iconLegend #filters-left { float:left; }
|
||||
#iconLegend #filters-right { float:left; }
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
height:100%;
|
||||
width:100%;
|
||||
/* background-color:#031924; */
|
||||
color:#ccc;
|
||||
color:#444;
|
||||
}
|
||||
|
||||
#showcard{
|
||||
|
|
|
|||
Loading…
Reference in a new issue