glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added tips to cards

Browse source
This commit is contained in:
Connor Turland 2014-02-10 01:29:02 -05:00
parent fb4da722ab
commit 4e8fc6fe06
10 changed files with 76 additions and 191 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/Jit/onCreateLabelHandler.js
View file

@ -33,7 +33,9 @@ function generateShowcardHTML() {
style="background-image:url($_imgsrc_$);" \ style="background-image:url($_imgsrc_$);" \
title="click and drag to move card"></div> \ title="click and drag to move card"></div> \
</div> \ </div> \
<div class="linkItem contributor"></div> \ <div class="linkItem contributor hoverForTip"> \
<div class="tip">Created by $_username_$ on $_date_$</div> \
</div> \
<div class="linkItem mapCount">$_map_count_$</div> \ <div class="linkItem mapCount">$_map_count_$</div> \
<div class="linkItem synapseCount">$_synapse_count_$</div> \ <div class="linkItem synapseCount">$_synapse_count_$</div> \
<div class="linkItem mapPerm $_mk_permission_$"></div> \ <div class="linkItem mapPerm $_mk_permission_$"></div> \
@ -131,6 +133,7 @@ function replaceVariables(html, node) {
html = html.replace(/\$_name_\$/g, node.name); html = html.replace(/\$_name_\$/g, node.name);
html = html.replace(/\$_userid_\$/g, node.getData("userid")); html = html.replace(/\$_userid_\$/g, node.getData("userid"));
html = html.replace(/\$_username_\$/g, node.getData("username")); html = html.replace(/\$_username_\$/g, node.getData("username"));
html = html.replace(/\$_date_\$/g, node.getData("date"));
html = html.replace(/\$_metacode_select_\$/g, $('#metacodeOptions').html()); html = html.replace(/\$_metacode_select_\$/g, $('#metacodeOptions').html());
html = html.replace(/\$_go_link_\$/g, go_link); html = html.replace(/\$_go_link_\$/g, go_link);
html = html.replace(/\$_a_tag_\$/g, a_tag); html = html.replace(/\$_a_tag_\$/g, a_tag);
@ -142,7 +145,7 @@ function replaceVariables(html, node) {
} else { } else {
html = html.replace(/\$_link_\$/g, node.getData("link")); html = html.replace(/\$_link_\$/g, node.getData("link"));
} }
html = html.replace(/\$_desc_nil_\$/g, desc_nil); html = html.replace(/\$_desc_nil_\$/g, desc_nil);
if (node.getData("desc") == "" && authorizeToEdit(node)) { if (node.getData("desc") == "" && authorizeToEdit(node)) {
//logged in but desc isn't there so it's invisible //logged in but desc isn't there so it's invisible
@ -195,7 +198,7 @@ function populateShowCard(node) {
var selectingMetacode = false; var selectingMetacode = false;
// attach the listener that shows the metacode title when you hover over the image // attach the listener that shows the metacode title when you hover over the image
$('.showcard .metacodeImage').mouseenter(function(){ $('.showcard .metacodeImage').mouseenter(function(){
$('.showcard .icon').css('z-index','3'); $('.showcard .icon').css('z-index','4');
$('.showcard .metacodeTitle').show(); $('.showcard .metacodeTitle').show();
}); });
$('.showcard .linkItem.icon').mouseleave(function() { $('.showcard .linkItem.icon').mouseleave(function() {

39
app/assets/stylesheets/application.css
View file

@ -2015,21 +2015,7 @@ li.meta, li.tutorial, li.exploreMaps {
height:100%; height:100%;
} }
#homeMap {
height: 350px;
width: 510px;
margin: 0 auto;
transform: rotate(18deg);
-ms-transform: rotate(18deg);
-webkit-transform: rotate(18deg);
}
#homeMap-label div.node{
transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-webkit-transform: rotate(-18deg);
font-family: 'vinyl';
text-transform: uppercase;
}
.home_content { .home_content {
width: 830px; width: 830px;
@ -2050,6 +2036,29 @@ text-align:center;
background: url('home_bg2.png') no-repeat center -46px; background: url('home_bg2.png') no-repeat center -46px;
} }
.home_content .request {
margin: 5px auto;
background: #15bad4;
height: 40px;
font-family: 'LatoLight';
font-size: 16px;
font-style: italic;
width: auto;
padding: 0 30px;
cursor: pointer;
color:white;
line-height:40px;
}
.home_content .request:hover{
background: #19C8E4;
-webkit-box-shadow: none;
box-shadow: none;
}
#homeMap {
margin-left:23px;
}
.contact { .contact {
text-align: center; text-align: center;
margin: 1em 0 1em 0; margin: 1em 0 1em 0;

21
app/assets/stylesheets/base.css
View file

@ -159,6 +159,7 @@ position: relative;
.linkItem.contributor { .linkItem.contributor {
background-image: url(MMCCicon_mapper_black.png); background-image: url(MMCCicon_mapper_black.png);
margin-left:20px; margin-left:20px;
z-index:3;
} }
.linkItem.mapCount { .linkItem.mapCount {
background-image: url(MMCCicon_map_black.png); background-image: url(MMCCicon_map_black.png);
@ -266,7 +267,25 @@ background-color: #F8F8F8;
float:left; float:left;
} }
.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip {
display:block;
}
.CardOnGraph .tip, .mapCard .tip {
display:none;
position: absolute;
background: white;
width: 155px;
bottom: 0;
left: 38px;
color: black;
border-radius: 4px;
font-size:15px !important;
font-family:'LatoLight';
line-height:17px;
padding: 3px 5px 2px;
border: 1px solid black;
z-index:100;
}
.CardOnGraph .link { .CardOnGraph .link {

4
app/controllers/main_controller.rb
View file

@ -10,8 +10,8 @@ class MainController < ApplicationController
# home page # home page
def home def home
@maps = Map.visibleToUser(@current, nil).sort! { |a,b| b.created_at <=> a.created_at } @maps = Map.find_all_by_featured(true).shuffle!
@maps = @maps.slice(0,5) @maps = @maps.slice(0,3)
respond_with(@maps) respond_with(@maps)
end end

1
app/models/map.rb
View file

@ -91,6 +91,7 @@ end
@topicdata['$yloc'] = @mapping.yloc @topicdata['$yloc'] = @mapping.yloc
@topicdata['$mappingid'] = @mapping.id @topicdata['$mappingid'] = @mapping.id
@topicdata['$permission'] = topic.permission @topicdata['$permission'] = topic.permission
@topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y")
json.data @topicdata json.data @topicdata
json.id topic.id json.id topic.id
json.name topic.name json.name topic.name

4
app/models/topic.rb
View file

@ -84,6 +84,7 @@ belongs_to :metacode
@topicdata['$userid'] = self.user.id @topicdata['$userid'] = self.user.id
@topicdata['$username'] = self.user.name @topicdata['$username'] = self.user.name
@topicdata['$permission'] = self.permission @topicdata['$permission'] = self.permission
@topicdata['$date'] = self.created_at.strftime("%m/%d/%Y")
json.data @topicdata json.data @topicdata
json.id self.id json.id self.id
json.name self.name json.name self.name
@ -110,6 +111,7 @@ belongs_to :metacode
@topicdata['$yloc'] = @mapping.yloc @topicdata['$yloc'] = @mapping.yloc
@topicdata['$mappingid'] = @mapping.id @topicdata['$mappingid'] = @mapping.id
@topicdata['$permission'] = self.permission @topicdata['$permission'] = self.permission
@topicdata['$date'] = self.created_at.strftime("%m/%d/%Y")
json.data @topicdata json.data @topicdata
json.id self.id json.id self.id
json.name self.name json.name self.name
@ -155,6 +157,7 @@ belongs_to :metacode
@topicdata['$userid'] = topic.user.id @topicdata['$userid'] = topic.user.id
@topicdata['$username'] = topic.user.name @topicdata['$username'] = topic.user.name
@topicdata['$permission'] = topic.permission @topicdata['$permission'] = topic.permission
@topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y")
json.data @topicdata json.data @topicdata
json.id topic.id json.id topic.id
json.name topic.name json.name topic.name
@ -175,6 +178,7 @@ belongs_to :metacode
@topicdata['$userid'] = topic.user.id @topicdata['$userid'] = topic.user.id
@topicdata['$username'] = topic.user.name @topicdata['$username'] = topic.user.name
@topicdata['$permission'] = topic.permission @topicdata['$permission'] = topic.permission
@topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y")
json.data @topicdata json.data @topicdata
json.id topic.id json.id topic.id
json.name topic.name json.name topic.name

19
app/views/layouts/_lightboxes.html.erb
View file

@ -12,18 +12,13 @@
<div class="lightboxContent" id="about"> <div class="lightboxContent" id="about">
<h3>About Metamaps.cc</h3> <h3>About Metamaps.cc</h3>
<p> <p>Metamaps is an online interface for communities to build and visualize their shared knowledge. It is a tool to connect people, resources, and ideas in a big picture view, without losing context or detail.</p>
Metamaps is an online interface for communities to build and visualize their shared knowledge.
It is a tool to connect people, resources, and ideas in 'big picture' views without losing context or detail. <p>Metamaps provides a window into complex systems. Maps are a natural way to spark insight, find opportunities, and create social synergy. The platform is evolving for a range of applications amidst a growing network of designers, developers, practitioners, entrepreneurs, and artists.</p>
</p>
<p> <p>We're weaving a human scale web to enhance natural connectivity: the Metamaps project is a collaborative venture powered by a passionate collection of peers who have dedicated this effort to uncovering a wealth of knowledge held in common.</p>
Metamaps provide a natural window into complex systems, sparking insights, creative opportunities, and social synergy.
The platform is evolving to meet a growing range of application scenarios. <p>We are currently based between San Francisco, CA and Waterloo, Ontario, Canada. Learn more in the PAQ link below.</p>
</p>
<p>
The Metamaps project is a collaborative venture powered by a passionate network of peers,
dedicated to the wealth of knowledge we find in common.
</p>
<ul> <ul>
<li><a href="/paq">P(ossibly)AQ</a></li> <li><a href="/paq">P(ossibly)AQ</a></li>

2
app/views/layouts/application.html.erb
View file

@ -70,7 +70,7 @@
</li> </li>
<li class="meta openLightbox" data-open="about">ABOUT</li> <li class="meta openLightbox" data-open="about">ABOUT</li>
<li class="tutorial openLightbox" data-open="tutorial">TUTORIAL</li> <li class="tutorial openLightbox" data-open="tutorial">TUTORIAL</li>
<li class="exploreMaps"><%= link_to "EXPLORE MAPS", maps_url %></li> <li class="exploreMaps"><%= link_to "EXPLORE MAPS", activemaps_url %></li>
</ul> </ul>
<div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>--> <div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
</div> </div>

164
app/views/main/home.html.erb
View file

@ -14,15 +14,18 @@
</div> </div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
<p class="contact">
<a href="/request" class="request button">Request Invite</a>
</p>
<div class="centeredProfile"> <div class="centeredProfile">
<div id="homeMap"></div> <div id="homeMap">
<% @maps.each do |map| %>
<%= render map %>
<% end %>
</div>
</div> </div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
<p class="contact">
Status: INVITE-ONLY BETA <br>
<a href="/request">request invite</a> : <a href="http://blog.metamaps.cc">visit the blog</a><br>
To get in touch, follow or tweet <a target="_blank" href="https://twitter.com/metamapps">@metamapps</a>, or join our <a target="_blank" href="https://plus.google.com/u/0/communities/115060009262157699234">Google+ community</a>.
</p>
</div> </div>
<div class="clearfloat"></div> <div class="clearfloat"></div>
@ -30,152 +33,3 @@
Welcome Welcome
</h1> </h1>
</div> </div>
<script>
var image1 = new Image();
image1.src = '/assets/map.png';
var image2 = new Image();
image2.src = '/assets/person.png';
var image3 = new Image();
image3.src = '/assets/problem.png';
var image4 = new Image();
image4.src = '/assets/futuredev.png';
var image5 = new Image();
image5.src = '/assets/knowledge.png';
var image6 = new Image();
image6.src = '/assets/implication.png';
var rgraph;
$(window).load(function() {
var json = {
id: "x",
name: "explore maps",
data: {
t: "map"
},
children: [
<% @maps.each_with_index do |map, index| %>
{ id: <%= map.id %>,
name: "<%= map.name.truncate(20) %>",
data: {
t: <%= index + 1 %>
}
},
<% end %>
]
};
$jit.RGraph.Plot.NodeTypes.implement({
'customNode': {
'render': function (node, canvas) {
var pos = node.pos.getc(true),
dim = node.getData('dim'),
type = node.data.t,
ctx = canvas.getCtx();
if (type == "map") {
ctx.drawImage(image1, pos.x - dim, pos.y - dim, dim*2, dim*2);
} else if (type == 1) {
ctx.drawImage(image2, pos.x - dim, pos.y - dim, dim*2, dim*2);
} else if (type == 2) {
ctx.drawImage(image3, pos.x - dim, pos.y - dim, dim*2, dim*2);
} else if (type == 3) {
ctx.drawImage(image4, pos.x - dim, pos.y - dim, dim*2, dim*2);
} else if (type == 4) {
ctx.drawImage(image5, pos.x - dim, pos.y - dim, dim*2, dim*2);
} else if (type == 5) {
ctx.drawImage(image6, pos.x - dim, pos.y - dim, dim*2, dim*2);
}
},
'contains': function(node, pos) {
var npos = node.pos.getc(true),
dim = node.getData('dim');
return this.nodeHelper.circle.contains(npos, pos, dim);
}
}
});
rgraph = new $jit.RGraph({
//Where to append the visualization
injectInto: 'homeMap',
//Optional: create a background canvas that plots
//concentric circles.
background: {
CanvasStyles: {
strokeStyle: '#36bbe8',
lineWidth: 1
}
},
//Add navigation capabilities:
//zooming by scrolling and panning.
Navigation: {
enable: true,
panning: true,
zooming: 10
},
//Set Node and Edge styles.
Node: {
type: 'customNode',
dim: 20
},
Edge: {
color: '#000',
lineWidth: 0.2
},
levelDistance: 150,
onBeforeCompute: function(node){
//Log.write("centering " + node.name + "...");
//Add the relation list in the right column.
//This list is taken from the data property of each JSON node.
//$jit.id('inner-details').innerHTML = node.data.relation;
},
//Add the name of the node in the correponding label
//and a click handler to move the graph.
//This method is called once, on label creation.
onCreateLabel: function(domElement, node){
domElement.innerHTML = node.name;
domElement.onclick = function(){
if (node.data.t == "map") {
window.location = "/maps";
} else {
window.location = "/maps/" + node.id;
}
};
},
//Change some label dom properties.
//This method is called each time a label is plotted.
onPlaceLabel: function(domElement, node){
var style = domElement.style;
style.display = '';
style.cursor = 'pointer';
if (node._depth == 0) {
style.fontSize = "1.2em";
style.color = "#FFF";
} else if(node._depth == 1){
style.fontSize = "1.6em";
style.color = "#FFF";
}
var left = parseInt(style.left);
var w = domElement.offsetWidth;
style.left = (left - w / 2 + 8) + 'px';
var top = parseInt(style.top);
style.top = (top + 10) + 'px';
}
});
//load JSON data
rgraph.loadJSON(json);
//trigger small animation
rgraph.graph.eachNode(function(n) {
var pos = n.getPos();
pos.setc(-200, -200);
});
rgraph.compute('end');
rgraph.fx.animate({
modes:['polar'],
duration: 2000
});
});
</script>

4
app/views/maps/_map.html.erb
View file

@ -14,8 +14,8 @@
<div class="linkItem icon"> <div class="linkItem icon">
<div class="metacodeImage" style="background-image:url(/assets/map.png);"></div> <div class="metacodeImage" style="background-image:url(/assets/map.png);"></div>
</div> </div>
<div class="linkItem contributor"> <div class="linkItem contributor hoverForTip">
<div class="tip">Created by <%= map.user.name %> on <%= map.created_at.strftime("%m/%d/%Y") %></div>
</div> </div>
<div class="linkItem topicCount"><%= map.topics.count %></div> <div class="linkItem topicCount"><%= map.topics.count %></div>
<div class="linkItem synapseCount"><%= map.synapses.count %></div> <div class="linkItem synapseCount"><%= map.synapses.count %></div>