home page styling

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

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({

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 {

app/views/layouts/application.html.erb

@@ -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 -->

app/views/main/home.html.erb

@@ -5,100 +5,31 @@
   #%>  
   
 <% if !authenticated? %>
-
+    <% content_for :title, "Home | Metamaps" %> 
-<% content_for :title, "Home | Metamaps" %> 
+    <div id="yield">
-
+        <div class="homeWrapper">
-<div id="preloaded-images">
+            <div class="homeTitle">EXPERIENCE METAMAPS</div>
-   <img src="/assets/metacodes75ms300x300.gif" width="128 height="128" alt="Image 01" />
+            <div class="homeIntro">
-</div>  
+            <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>
-<div class="home_bg">
+            <iframe class="homeVideo" src="//player.vimeo.com/video/100118167" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-
+            <div class="callToAction">
-<div class="home_content">
+                <a href="/request" class="requestInviteCTA" data-bypass="true">REQUEST INVITE</a>
-<div class="home_desc">
+                <a href="/explore/featured" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
-  <div class="welcomeTo">
+            </div>
-      Welcome to Metamaps
+        </div>
-  </div>
+    </div><!-- end yield -->                        
-  <img id="homeMapImage" src="/assets/metamap128x128.png" width="128" height="128" />
+    <script>
-  
+    Metamaps.currentSection = "";
-    <div class="metamapsIs">
+    Metamaps.currentPage = "";
-      a home on the web for <span class="swapWord">
+    </script>
-        <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>
-
 <% elsif authenticated? %>
-  <% content_for :title, "My Maps | Metamaps" %> 
+    <% content_for :title, "My Maps | Metamaps" %> 
-
+    <script>
-  <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 %>

app/views/main/requestinvite.html.erb

@@ -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>

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'