added tips to cards
This commit is contained in:
Connor Turland
parent
fb4da722ab
commit
4e8fc6fe06
10 changed files with 76 additions and 191 deletions
|
|
@ -33,7 +33,9 @@ function generateShowcardHTML() {
|
|||
style="background-image:url($_imgsrc_$);" \
|
||||
title="click and drag to move card"></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 synapseCount">$_synapse_count_$</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(/\$_userid_\$/g, node.getData("userid"));
|
||||
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(/\$_go_link_\$/g, go_link);
|
||||
html = html.replace(/\$_a_tag_\$/g, a_tag);
|
||||
|
|
@ -142,7 +145,7 @@ function replaceVariables(html, node) {
|
|||
} else {
|
||||
html = html.replace(/\$_link_\$/g, node.getData("link"));
|
||||
}
|
||||
|
||||
|
||||
html = html.replace(/\$_desc_nil_\$/g, desc_nil);
|
||||
if (node.getData("desc") == "" && authorizeToEdit(node)) {
|
||||
//logged in but desc isn't there so it's invisible
|
||||
|
|
@ -195,7 +198,7 @@ function populateShowCard(node) {
|
|||
var selectingMetacode = false;
|
||||
// attach the listener that shows the metacode title when you hover over the image
|
||||
$('.showcard .metacodeImage').mouseenter(function(){
|
||||
$('.showcard .icon').css('z-index','3');
|
||||
$('.showcard .icon').css('z-index','4');
|
||||
$('.showcard .metacodeTitle').show();
|
||||
});
|
||||
$('.showcard .linkItem.icon').mouseleave(function() {
|
||||
|
|
|
|||
|
|
@ -2015,21 +2015,7 @@ li.meta, li.tutorial, li.exploreMaps {
|
|||
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 {
|
||||
width: 830px;
|
||||
|
|
@ -2050,6 +2036,29 @@ text-align:center;
|
|||
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 {
|
||||
text-align: center;
|
||||
margin: 1em 0 1em 0;
|
||||
|
|
|
|||
|
|
@ -159,6 +159,7 @@ position: relative;
|
|||
.linkItem.contributor {
|
||||
background-image: url(MMCCicon_mapper_black.png);
|
||||
margin-left:20px;
|
||||
z-index:3;
|
||||
}
|
||||
.linkItem.mapCount {
|
||||
background-image: url(MMCCicon_map_black.png);
|
||||
|
|
@ -266,7 +267,25 @@ background-color: #F8F8F8;
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ class MainController < ApplicationController
|
|||
|
||||
# home page
|
||||
def home
|
||||
@maps = Map.visibleToUser(@current, nil).sort! { |a,b| b.created_at <=> a.created_at }
|
||||
@maps = @maps.slice(0,5)
|
||||
@maps = Map.find_all_by_featured(true).shuffle!
|
||||
@maps = @maps.slice(0,3)
|
||||
|
||||
respond_with(@maps)
|
||||
end
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ end
|
|||
@topicdata['$yloc'] = @mapping.yloc
|
||||
@topicdata['$mappingid'] = @mapping.id
|
||||
@topicdata['$permission'] = topic.permission
|
||||
@topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y")
|
||||
json.data @topicdata
|
||||
json.id topic.id
|
||||
json.name topic.name
|
||||
|
|
|
|||
|
|
@ -84,6 +84,7 @@ belongs_to :metacode
|
|||
@topicdata['$userid'] = self.user.id
|
||||
@topicdata['$username'] = self.user.name
|
||||
@topicdata['$permission'] = self.permission
|
||||
@topicdata['$date'] = self.created_at.strftime("%m/%d/%Y")
|
||||
json.data @topicdata
|
||||
json.id self.id
|
||||
json.name self.name
|
||||
|
|
@ -110,6 +111,7 @@ belongs_to :metacode
|
|||
@topicdata['$yloc'] = @mapping.yloc
|
||||
@topicdata['$mappingid'] = @mapping.id
|
||||
@topicdata['$permission'] = self.permission
|
||||
@topicdata['$date'] = self.created_at.strftime("%m/%d/%Y")
|
||||
json.data @topicdata
|
||||
json.id self.id
|
||||
json.name self.name
|
||||
|
|
@ -155,6 +157,7 @@ belongs_to :metacode
|
|||
@topicdata['$userid'] = topic.user.id
|
||||
@topicdata['$username'] = topic.user.name
|
||||
@topicdata['$permission'] = topic.permission
|
||||
@topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y")
|
||||
json.data @topicdata
|
||||
json.id topic.id
|
||||
json.name topic.name
|
||||
|
|
@ -175,6 +178,7 @@ belongs_to :metacode
|
|||
@topicdata['$userid'] = topic.user.id
|
||||
@topicdata['$username'] = topic.user.name
|
||||
@topicdata['$permission'] = topic.permission
|
||||
@topicdata['$date'] = topic.created_at.strftime("%m/%d/%Y")
|
||||
json.data @topicdata
|
||||
json.id topic.id
|
||||
json.name topic.name
|
||||
|
|
|
|||
|
|
@ -12,18 +12,13 @@
|
|||
<div class="lightboxContent" id="about">
|
||||
<h3>About Metamaps.cc</h3>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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>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>
|
||||
|
||||
<p>We are currently based between San Francisco, CA and Waterloo, Ontario, Canada. Learn more in the PAQ link below.</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/paq">P(ossibly)AQ</a></li>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
</li>
|
||||
<li class="meta openLightbox" data-open="about">ABOUT</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>
|
||||
<div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,15 +14,18 @@
|
|||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<p class="contact">
|
||||
<a href="/request" class="request button">Request Invite</a>
|
||||
</p>
|
||||
|
||||
<div class="centeredProfile">
|
||||
<div id="homeMap"></div>
|
||||
<div id="homeMap">
|
||||
<% @maps.each do |map| %>
|
||||
<%= render map %>
|
||||
<% end %>
|
||||
</div>
|
||||
</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 class="clearfloat"></div>
|
||||
|
||||
|
|
@ -30,152 +33,3 @@
|
|||
Welcome
|
||||
</h1>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
<div class="linkItem icon">
|
||||
<div class="metacodeImage" style="background-image:url(/assets/map.png);"></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 class="linkItem topicCount"><%= map.topics.count %></div>
|
||||
<div class="linkItem synapseCount"><%= map.synapses.count %></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue