home page styling
This commit is contained in:
Connor Turland
parent
a90eb90822
commit
341f9b9bdd
7 changed files with 146 additions and 99 deletions
|
|
@ -22,10 +22,12 @@
|
|||
|
||||
// all this only for the logged in home page
|
||||
if (Metamaps.Active.Mapper) {
|
||||
|
||||
Metamaps.Famous.yield.hide();
|
||||
|
||||
Metamaps.Famous.explore.set('mine');
|
||||
Metamaps.Famous.explore.show();
|
||||
|
||||
$('.yield').fadeOut(300);
|
||||
$('.mapsWrapper').fadeIn(300);
|
||||
|
||||
Metamaps.GlobalUI.Search.open();
|
||||
|
|
@ -41,12 +43,14 @@
|
|||
}
|
||||
// logged out home page
|
||||
else {
|
||||
|
||||
Metamaps.Famous.yield.show();
|
||||
|
||||
Metamaps.Famous.explore.hide();
|
||||
|
||||
Metamaps.GlobalUI.Search.unlock();
|
||||
Metamaps.GlobalUI.Search.close(0, true);
|
||||
|
||||
$('.yield').fadeIn(300);
|
||||
$('.mapsWrapper').fadeOut(300);
|
||||
}
|
||||
|
||||
|
|
@ -79,8 +83,9 @@
|
|||
|
||||
Metamaps.GlobalUI.Search.open();
|
||||
Metamaps.GlobalUI.Search.lock();
|
||||
|
||||
$('.yield').fadeOut(300);
|
||||
|
||||
Metamaps.Famous.yield.hide();
|
||||
|
||||
$('.mapsWrapper').fadeIn(300);
|
||||
|
||||
Metamaps.Famous.explore.set(section);
|
||||
|
|
@ -103,9 +108,8 @@
|
|||
$('.wrapper').removeClass('homePage explorePage');
|
||||
$('.wrapper').addClass('mapPage');
|
||||
|
||||
$('.yield').fadeOut(300);
|
||||
Metamaps.Famous.yield.hide();
|
||||
$('.mapsWrapper').fadeOut(300);
|
||||
|
||||
Metamaps.Famous.explore.hide();
|
||||
|
||||
// clear the visualization, if there was one, before showing its div again
|
||||
|
|
|
|||
|
|
@ -56,6 +56,56 @@ define(function(require, exports, module) {
|
|||
};
|
||||
f.mainContext.add(f.viz.mod).add(f.viz.surf);
|
||||
|
||||
|
||||
// CONTENT / OTHER PAGES
|
||||
f.yield = {};
|
||||
f.yield.surf = new Surface({
|
||||
size: [true, true],
|
||||
classes: [],
|
||||
properties: {
|
||||
display: 'none'
|
||||
}
|
||||
});
|
||||
var loadYield = function () {
|
||||
f.loadYield();
|
||||
f.yield.surf.removeListener('deploy',loadYield);
|
||||
};
|
||||
if (!(Metamaps.currentSection === "map" ||
|
||||
Metamaps.currentSection === "explore" ||
|
||||
(Metamaps.currentSection === "" && Metamaps.Active.Mapper) )) {
|
||||
f.yield.surf.on('deploy', loadYield);
|
||||
}
|
||||
f.yield.mod = new Modifier({
|
||||
origin: [0.5, 0.5],
|
||||
opacity: 0
|
||||
});
|
||||
f.yield.show = function () {
|
||||
f.yield.surf.setProperties({ "display":"block" });
|
||||
f.yield.mod.setOpacity(
|
||||
1,
|
||||
{ duration: 300 }
|
||||
);
|
||||
};
|
||||
f.yield.hide = function () {
|
||||
f.yield.mod.setOpacity(
|
||||
0,
|
||||
{ duration: 300 },
|
||||
function() {
|
||||
f.yield.surf.setProperties({"display": "none"});
|
||||
}
|
||||
);
|
||||
};
|
||||
f.mainContext.add(f.yield.mod).add(f.yield.surf);
|
||||
|
||||
f.loadYield = function () {
|
||||
Metamaps.Loading.loader.hide();
|
||||
var yield = document.getElementById('yield').innerHTML;
|
||||
f.yield.surf.setContent(yield);
|
||||
f.yield.surf.deploy(f.yield.surf._currTarget);
|
||||
f.yield.show();
|
||||
};
|
||||
|
||||
|
||||
// EXPLORE MAPS BAR
|
||||
f.explore = {};
|
||||
f.explore.surf = new Surface({
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
margin:0;
|
||||
}
|
||||
|
||||
.yield {
|
||||
#yield {
|
||||
display:none;
|
||||
}
|
||||
|
||||
|
|
@ -485,6 +485,65 @@
|
|||
|
||||
/* end upperRightUI */
|
||||
|
||||
|
||||
/* homepage */
|
||||
|
||||
.homeWrapper {
|
||||
width: 560px;
|
||||
margin: 0 auto;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.homeTitle {
|
||||
font-size: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.homeIntro {
|
||||
font-size: 23px;
|
||||
line-height: 26px;
|
||||
text-align: justify;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.homeWrapper .green {
|
||||
color: #4fc059;
|
||||
}
|
||||
|
||||
.homeVideo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.callToAction a {
|
||||
display: block;
|
||||
width: 220px;
|
||||
height: 12px;
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
|
||||
margin: 0 auto;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.callToAction .requestInviteCTA {
|
||||
background-color: #4fc059;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.callToAction .requestInviteCTA:hover {
|
||||
background-color: #49ad4e;
|
||||
}
|
||||
.callToAction .exploreFeaturedCTA {
|
||||
background-color: #a354cd;
|
||||
}
|
||||
.callToAction .exploreFeaturedCTA:hover {
|
||||
background-color: #9150bc;
|
||||
}
|
||||
|
||||
/* end home page */
|
||||
|
||||
/* infoAndHelp */
|
||||
|
||||
.infoAndHelp {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
<%= render :partial => 'layouts/upperelements' %>
|
||||
<%= render :partial => 'layouts/exploremaps' %>
|
||||
|
||||
<div class="yield"><%= yield %></div>
|
||||
<%= yield %>
|
||||
|
||||
<!--<div class="mapElement" id="infovis"></div> <!-- where map visualizations get rendered -->
|
||||
<div class="showcard mapElement mapElementHidden" id="showcard"></div> <!-- the topic card -->
|
||||
|
|
|
|||
|
|
@ -5,100 +5,31 @@
|
|||
#%>
|
||||
|
||||
<% if !authenticated? %>
|
||||
|
||||
<% content_for :title, "Home | Metamaps" %>
|
||||
|
||||
<div id="preloaded-images">
|
||||
<img src="/assets/metacodes75ms300x300.gif" width="128 height="128" alt="Image 01" />
|
||||
</div>
|
||||
|
||||
<div class="home_bg">
|
||||
|
||||
<div class="home_content">
|
||||
<div class="home_desc">
|
||||
<div class="welcomeTo">
|
||||
Welcome to Metamaps
|
||||
</div>
|
||||
<img id="homeMapImage" src="/assets/metamap128x128.png" width="128" height="128" />
|
||||
|
||||
<div class="metamapsIs">
|
||||
a home on the web for <span class="swapWord">
|
||||
<ul class="texts">
|
||||
<li>building shared knowledge</li>
|
||||
<li>learning</li>
|
||||
<li>visioning</li>
|
||||
<li>conversing</li>
|
||||
<li>collaborating</li>
|
||||
<li>sensemaking</li>
|
||||
<li>innovating</li>
|
||||
<li>designing</li>
|
||||
<li>playing</li>
|
||||
<li>exploring</li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
|
||||
<p class="contact">
|
||||
<a href="/request" class="request button" data-bypass="true">Request Invite</a>
|
||||
<a href="/explore/featured" class="learnmore button">Explore Featured</a>
|
||||
<div class="featuredMaps">
|
||||
explore featured maps from our community
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<div class="centeredProfile">
|
||||
<div id="homeMap">
|
||||
<figure id="homeFigure">
|
||||
<% @maps.each_with_index do |map, index| %>
|
||||
<% first = index == 0 ? true : false %>
|
||||
<%= render :partial => 'main/homemap', :locals => { :map => map, :first => first } %>
|
||||
<% end %>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
Metamaps.currentSection = "";
|
||||
Metamaps.currentPage = "";
|
||||
|
||||
$(document).ready(function() {
|
||||
// flip through these words on the homepage
|
||||
$('.swapWord').textillate({
|
||||
in: { effect: 'fadeIn', delay: 20 },
|
||||
out: { effect: 'fadeOut', sync: true },
|
||||
loop: true,
|
||||
minDisplayTime: 2000
|
||||
});
|
||||
|
||||
$('#homeMapImage').hover(function() {
|
||||
$(this).attr('src','/assets/metacodes75ms300x300.gif');
|
||||
}, function() {
|
||||
$(this).attr('src','/assets/metamap128x128.png');
|
||||
});
|
||||
|
||||
$('#homeMap .desc').each(function() {
|
||||
$(this).height($(this).height()).mCustomScrollbar({
|
||||
mouseWheelPixels: 200
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<% content_for :title, "Home | Metamaps" %>
|
||||
<div id="yield">
|
||||
<div class="homeWrapper">
|
||||
<div class="homeTitle">EXPERIENCE METAMAPS</div>
|
||||
<div class="homeIntro">
|
||||
<span class="green">metamaps.cc</span> is a free and open source platform. It enables individuals, communities, and organizations to build and visualize their shared knowledge and unlock their collective intelligence...
|
||||
</div>
|
||||
<iframe class="homeVideo" src="//player.vimeo.com/video/100118167" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<div class="callToAction">
|
||||
<a href="/request" class="requestInviteCTA" data-bypass="true">REQUEST INVITE</a>
|
||||
<a href="/explore/featured" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end yield -->
|
||||
<script>
|
||||
Metamaps.currentSection = "";
|
||||
Metamaps.currentPage = "";
|
||||
</script>
|
||||
<% elsif authenticated? %>
|
||||
<% content_for :title, "My Maps | Metamaps" %>
|
||||
|
||||
<script>
|
||||
<% content_for :title, "My Maps | Metamaps" %>
|
||||
<script>
|
||||
Metamaps.Maps.Mine = <%= @maps.to_json.html_safe %>;
|
||||
Metamaps.currentSection = "";
|
||||
Metamaps.currentPage = "";
|
||||
Metamaps.GlobalUI.Search.isOpen = true;
|
||||
Metamaps.GlobalUI.Search.lock();
|
||||
</script>
|
||||
</script>
|
||||
<% end %>
|
||||
|
|
@ -6,11 +6,12 @@
|
|||
|
||||
<% content_for :title, "Request Invite | Metamaps" %>
|
||||
|
||||
<div id="yield">
|
||||
<iframe class="requestInvite" src="https://docs.google.com/forms/d/1lWoKPFHErsDfV5l7-SvcHxwX3vDi9nNNVW0rFMgJwgg/viewform?embedded=true" width="700" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.requestInvite').height( (parseInt($('body').height()) - 40) );
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@ module Metamaps
|
|||
# Enable the asset pipeline
|
||||
config.assets.enabled = true
|
||||
config.assets.initialize_on_precompile = false
|
||||
|
||||
config.assets.paths << "#{Rails.root}/app/assets/javascripts/src"
|
||||
|
||||
# Version of your assets, change this if you want to expire all your assets
|
||||
config.assets.version = '2.0'
|
||||
|
|
|
|||
Loading…
Reference in a new issue