added lightboxes
This commit is contained in:
Connor Turland
parent
b5b147de7e
commit
4350c0df1b
6 changed files with 177 additions and 10 deletions
|
|
@ -495,10 +495,16 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
|
|||
$(this).parents('.CardOnGraph').find('.go-link').attr('href', link);
|
||||
});
|
||||
|
||||
// when you click the addmap button
|
||||
$('.addMap').click(function(event) {
|
||||
createNewMap();
|
||||
});
|
||||
|
||||
//bind lightbox clicks
|
||||
$('.openLightbox').click(function() {
|
||||
openLightbox($(this).attr('data-open'));
|
||||
});
|
||||
|
||||
// bind keyboard handlers
|
||||
$('body').bind('keyup', function(e) {
|
||||
switch(e.which) {
|
||||
|
|
@ -691,3 +697,10 @@ function openNodeShowcard(node) {
|
|||
//node.setData('dim', 1, 'current');
|
||||
MetamapsModel.showcardInUse = node.id;
|
||||
}
|
||||
|
||||
function openLightbox(which) {
|
||||
$('.lightboxContent').hide();
|
||||
$('#' + which).show();
|
||||
$('#lightbox_overlay').show();
|
||||
$('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1476,6 +1476,99 @@ background-size: 30px 30px;
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* lightboxes */
|
||||
|
||||
#lightbox_overlay {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1000000;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#lightbox_main {
|
||||
width: 550px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
top:50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#lightbox_screen {
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: #000;
|
||||
opacity: 0.42;
|
||||
filter: alpha(opacity=42);
|
||||
-moz-opacity: 0.42;
|
||||
}
|
||||
|
||||
#lightbox_overlay #lightbox_main #lightbox_header {
|
||||
padding: 6px 5px 1px 0;
|
||||
background-color: #333;
|
||||
font-weight: bold;
|
||||
height: 18px;
|
||||
border: solid 2px #000;
|
||||
}
|
||||
|
||||
#lightbox_overlay #lightbox_main a#lightbox_close {
|
||||
/*background-image: url(../images/barometer_close.png);*/
|
||||
cursor: pointer;
|
||||
height: 42px;
|
||||
outline-color: -moz-use-text-color;
|
||||
outline-style: none;
|
||||
outline-width: medium;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
right: -22px;
|
||||
width: 42px;
|
||||
z-index: 4;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#lightbox_content {
|
||||
background: silver;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.lightboxContent h3 {
|
||||
font-style: italic;
|
||||
text-transform: uppercase;
|
||||
font-family: 'vinyl';
|
||||
font-size: 30px;
|
||||
line-height:35px;
|
||||
color:black;
|
||||
}
|
||||
|
||||
.lightboxContent {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.openLightbox {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
#about ul {
|
||||
list-style:none;
|
||||
}
|
||||
#about ul li {
|
||||
display:inline-block;
|
||||
padding:5px;
|
||||
}
|
||||
#about li a {
|
||||
color:#097A51;
|
||||
}
|
||||
|
||||
/* --- styling the logo button ---*/
|
||||
/*.footer {
|
||||
width: 188px;
|
||||
|
|
@ -1561,7 +1654,7 @@ background-size: 22px 20px;
|
|||
height:124px;
|
||||
z-index:12;
|
||||
width:151px;
|
||||
color: #67AF9F;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ class MainController < ApplicationController
|
|||
desc = true
|
||||
end
|
||||
|
||||
search = term.downcase + '%'
|
||||
search = desc ? '%' + term.downcase + '%' : term.downcase + '%'
|
||||
query = desc ? 'LOWER("desc") like ?' : 'LOWER("name") like ?'
|
||||
if !user
|
||||
@maps = Map.where(query, search).limit(5).order('"name"')
|
||||
|
|
|
|||
63
app/views/layouts/_lightboxes.html.erb
Normal file
63
app/views/layouts/_lightboxes.html.erb
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<%#
|
||||
# @file
|
||||
# The inner HTML of the account box that comes up in the bottom left
|
||||
#%>
|
||||
|
||||
|
||||
<div id="lightbox_overlay">
|
||||
<div id="lightbox_main">
|
||||
<a id="lightbox_close" onclick="document.getElementById('lightbox_overlay').style.display = 'none';return false" href="#"></a>
|
||||
<div id="lightbox_content">
|
||||
|
||||
<div class="lightboxContent" id="about">
|
||||
<h3>About Metamaps.cc</h3>
|
||||
|
||||
<p>
|
||||
(not going to be this text)
|
||||
METAMAPS IS A PLATFORM FOR VISIONING, MAGIC MAKING, PRODUCTIVE CONVERSATION, UNDERSTANDING SOMETHING, INNOVATION, FREE STYLE WEAVING AND ALL NIGHT BRAINSTORMING.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="/faq">FAQ</a></li>
|
||||
<li><a href="http://blog.metamaps.cc" target="_blank">blog</a></li>
|
||||
<li><a href="https://plus.google.com/u/0/communities/115060009262157699234" target="_blank">community</a></li>
|
||||
<li><a href="https://twitter.com/metamapps" target="_blank">@metamapps</a></li>
|
||||
<li><a href="https://github.com/Connoropolous/metamaps_gen002" target="_blank">source code</a></li>
|
||||
<li><a href="http://metamaps.cc/maps/331" target="_blank">terms</a></li>
|
||||
</ul>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="tutorial">
|
||||
<h3>Tutorial</h3>
|
||||
<iframe width="510" height="383" src="//www.youtube.com/embed/0Bd8XxlNG3U?rel=0" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<div class="lightboxContent" id="cheatsheet">
|
||||
<h3>Quick Reference Guide</h3>
|
||||
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox_screen" onclick="document.getElementById('lightbox_overlay').style.display = 'none';return false" style="height: 100%;"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -69,10 +69,8 @@
|
|||
<div class="inBeta">beta</div>
|
||||
<button class="button" onclick="BAROMETER.show();">feedback!</button>
|
||||
</li>
|
||||
<li class="meta">
|
||||
<a href="#" target="_blank">about</a>
|
||||
</li>
|
||||
<li class="tutorial"><a href="#" target="_blank">tutorial</a></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>
|
||||
</ul>
|
||||
<div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
|
||||
|
|
@ -89,12 +87,12 @@
|
|||
<%= render :partial => 'maps/new' %>
|
||||
<% end %>
|
||||
|
||||
<%= render :partial => 'layouts/ga' if Rails.env.production? %>
|
||||
|
||||
<style type='text/css'>@import url('http://getbarometer.s3.amazonaws.com/assets/barometer/css/barometer.css');</style>
|
||||
<script src='http://getbarometer.s3.amazonaws.com/assets/barometer/javascripts/barometer.js' type='text/javascript'></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
BAROMETER.load('Scqak8nyHdFEkezKMNeQp');
|
||||
</script>
|
||||
<%= render :partial => 'layouts/lightboxes' %>
|
||||
<%= render :partial => 'layouts/ga' if Rails.env.production? %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
</div>
|
||||
|
||||
<div class="index">
|
||||
<div class="openCheatsheet"></div>
|
||||
<div class="openCheatsheet openLightbox" data-open="cheatsheet"></div>
|
||||
<span><img width="35" height="35" src="/assets/map.png"></span>
|
||||
<span class="mapName"><%= @map.name %></span>
|
||||
<span class="mapInfo"></span>
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
|
||||
var openInfo = function(event) {
|
||||
clearTimeout(lT);
|
||||
if (! sliding1 && event.srcElement.className != "openCheatsheet") {
|
||||
if (! sliding1 && event.srcElement.className != "openCheatsheet openLightbox") {
|
||||
sliding1 = true;
|
||||
|
||||
$('.mapInfoBox').fadeIn(200, function() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue