diff --git a/app/assets/javascripts/metamaps/Metamaps.Router.js b/app/assets/javascripts/metamaps/Metamaps.Router.js index 30cbe567..d40666c1 100644 --- a/app/assets/javascripts/metamaps/Metamaps.Router.js +++ b/app/assets/javascripts/metamaps/Metamaps.Router.js @@ -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 diff --git a/app/assets/javascripts/src/main.js b/app/assets/javascripts/src/main.js index b3f7c6b8..05f5e160 100644 --- a/app/assets/javascripts/src/main.js +++ b/app/assets/javascripts/src/main.js @@ -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({ diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index d46a1d4e..ea67b21b 100644 --- a/app/assets/stylesheets/clean.css +++ b/app/assets/stylesheets/clean.css @@ -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 { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7099fce3..dda7faf1 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -61,7 +61,7 @@ <%= render :partial => 'layouts/upperelements' %> <%= render :partial => 'layouts/exploremaps' %> -
- Request Invite - Explore Featured -