From 341f9b9bdd3a70f8584a9860ac6ac4deb87b542b Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 10 Aug 2014 19:13:25 -0400 Subject: [PATCH] home page styling --- .../javascripts/metamaps/Metamaps.Router.js | 16 ++- app/assets/javascripts/src/main.js | 50 ++++++++ app/assets/stylesheets/clean.css | 61 +++++++++- app/views/layouts/application.html.erb | 2 +- app/views/main/home.html.erb | 111 ++++-------------- app/views/main/requestinvite.html.erb | 3 +- config/application.rb | 2 + 7 files changed, 146 insertions(+), 99 deletions(-) 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' %> -
<%= yield %>
+ <%= yield %>
diff --git a/app/views/main/home.html.erb b/app/views/main/home.html.erb index 95b0a7d2..993edbc2 100644 --- a/app/views/main/home.html.erb +++ b/app/views/main/home.html.erb @@ -5,100 +5,31 @@ #%> <% if !authenticated? %> - -<% content_for :title, "Home | Metamaps" %> - -
- Image 01 -
- -
- -
-
-
- Welcome to Metamaps -
- - -
- a home on the web for -
    -
  • building shared knowledge
    • -
  • learning
    • -
  • visioning
    • -
  • conversing
    • -
  • collaborating
    • -
  • sensemaking
    • -
  • innovating
    • -
  • designing
    • -
  • playing
    • -
  • exploring
    • -
- -
-
-
- -

- Request Invite - Explore Featured -

- explore featured maps from our community -
-

- -
-
-
- <% @maps.each_with_index do |map, index| %> - <% first = index == 0 ? true : false %> - <%= render :partial => 'main/homemap', :locals => { :map => map, :first => first } %> - <% end %> -
-
-
-
-
-
- - - + <% content_for :title, "Home | Metamaps" %> +
+
+
EXPERIENCE METAMAPS
+
+ metamaps.cc 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... +
+ +
+ REQUEST INVITE + EXPLORE FEATURED MAPS +
+
+
+ <% elsif authenticated? %> - <% content_for :title, "My Maps | Metamaps" %> - - + <% end %> \ No newline at end of file diff --git a/app/views/main/requestinvite.html.erb b/app/views/main/requestinvite.html.erb index b7f0841a..4f0f2b18 100644 --- a/app/views/main/requestinvite.html.erb +++ b/app/views/main/requestinvite.html.erb @@ -6,11 +6,12 @@ <% content_for :title, "Request Invite | Metamaps" %> +
+
diff --git a/config/application.rb b/config/application.rb index c87ef5b7..d84d0c62 100644 --- a/config/application.rb +++ b/config/application.rb @@ -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'