diff --git a/app/assets/javascripts/Jit/ForceDirected/metamapFD.js b/app/assets/javascripts/Jit/ForceDirected/metamapFD.js index 695ba090..d3b4bcb0 100644 --- a/app/assets/javascripts/Jit/ForceDirected/metamapFD.js +++ b/app/assets/javascripts/Jit/ForceDirected/metamapFD.js @@ -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 = '
' + node.name + '
'; 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' }); }); }); diff --git a/app/assets/javascripts/Jit/RGraph/metamapRG.js b/app/assets/javascripts/Jit/RGraph/metamapRG.js index 0deaad1f..aa8fabba 100644 --- a/app/assets/javascripts/Jit/RGraph/metamapRG.js +++ b/app/assets/javascripts/Jit/RGraph/metamapRG.js @@ -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 = '
' + node.name + '
'; domElement.onclick = function(){ rg.onClick(node.id, { onComplete: function() { - + var html = + '

' + node.getData("itemcatname") + '

' + + '' + node.getData(' + + '' + node.name + '' + + '
Added by: ' + node.getData('username') + '
' + + '

' + node.getData('desc') + '

' + + '' + node.getData('link') + ''; + + //append connections information + $jit.id('showcard').innerHTML = '
'; + $jit.id('item_' + node.id).innerHTML = html; } }); } diff --git a/app/assets/stylesheets/ForceDirected.css b/app/assets/stylesheets/ForceDirected.css index af2d26f4..7138d1c0 100644 --- a/app/assets/stylesheets/ForceDirected.css +++ b/app/assets/stylesheets/ForceDirected.css @@ -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; diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 85f2f1dc..160089ed 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -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; } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index e765ecbc..7b9fbcd9 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -3,7 +3,7 @@ height:100%; width:100%; /* background-color:#031924; */ - color:#ccc; + color:#444; } #showcard{