begin homepage dev

metamaps · Nov 24, 2016 · acb3775 · acb3775
1 parent 95b8b52
commit acb3775
Show file tree

Hide file tree

Showing 11 changed files with 223 additions and 159 deletions.
diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb
@@ -230,123 +230,6 @@
 /* end upperRightUI */
 
 
-/* yield */
-
-.famousYield {
-    overflow-y:auto;
-}
-
-/* homepage */
-
-.homeWrapper.homeText {
-    margin-top: 5%;
-}
-
-.fullWidthWrapper {
-    width: 100%;
-}
-.fullWidthWrapper.withVideo {
-    height: 315px;
-    background: #757575;
-}
-
-.homeWrapper {
-    width: 800px;
-    margin: 0 auto;
-    color: #424242;
-}
-
-.homeTitle {
-    font-size: 64px;
-    line-height: 48px;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.homeIntro {
-    font-size: 22px;
-    line-height: 26px;
-    text-align: justify;
-    margin: 32px 0 20px;
-    font-family: 'din-regular', helvetica, sans-serif;
-}
-
-.homeWrapper .green {
-    color: #4fc059;
-}
-
-.homeWrapper .din-medium {
-    font-family: 'din-medium', helvetica, sans-serif;
-}
-
-.homeVideo {
-    margin-bottom: 20px;
-    float: left;
-}
-
-.homeWrapper .callToAction {
-    float: left;
-    width: 216px;
-    padding: 8px 0 8px 24px;
-    color: #F5F5F5;
-}
-.callToAction h3 {
-    font-size: 24px;
-}
-.callToAction p {
-    margin: 8px 0 16px;
-    font-size: 13px;
-    line-height: 16px;
-    font-family: 'din-regular', helvetica, sans-serif;
-    text-align: left;
-}
-.callToAction a, .callToAction button {
-    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;
-    box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
-}
-.callToAction .requestInviteCTA {
-    background-color: #4fc059;
-    margin-bottom: 12px;
-}
-.callToAction .requestInviteCTA:hover {
-    background-color: #49ad4e;
-}
-.callToAction .exploreFeaturedCTA {
-    background-color: #a354cd;
-    margin-bottom: 12px;
-}
-.callToAction .exploreFeaturedCTA:hover {
-    background-color: #9150bc;
-}
-.callToAction .learnMoreCTA {
-    background-color: #4fb5c0;
-    margin-bottom: 12px;
-}
-.callToAction .learnMoreCTA:hover {
-    background-color: #419599;
-}
-
-.fullWidthWrapper.withPartners {
-    background: url(<%= asset_path('homepage_bg_fade.png') %>) no-repeat center -300px;
-}
-.homeWrapper.homePartners {
-    padding: 64px 0 280px;
-    height: 96px;
-}
-
-/* end home page */
-
 /* infoAndHelp */
 
 .mapPage .infoAndHelp, .topicPage .infoAndHelp {

diff --git a/app/assets/stylesheets/home.scss.erb b/app/assets/stylesheets/home.scss.erb
@@ -0,0 +1,34 @@
+@font-face {
+    font-family: 'din-medium';
+    src: url(<%= asset_path 'Fonts/din.eot' %>);
+    src: url(<%= asset_path 'Fonts/din.eot?#iefix' %>) format('embedded-opentype'),
+         url(<%= asset_path 'Fonts/din.woff' %>) format('woff'),
+         url(<%= asset_path 'Fonts/din.ttf' %>) format('truetype'),
+         url(<%= asset_path 'Fonts/din.svg#din-medium' %>) format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'din-regular';
+    src: url(<%= asset_path 'Fonts/din-reg.eot' %>);
+    src: url(<%= asset_path 'Fonts/din-reg.eot?#iefix' %>) format('embedded-opentype'),
+         url(<%= asset_path 'Fonts/din-reg.woff' %>) format('woff'),
+         url(<%= asset_path 'Fonts/din-reg.ttf' %>) format('truetype'),
+         url(<%= asset_path 'Fonts/din-reg.svg#din-reg' %>) format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+  margin: 0;
+  background-color: #F7F8F9;
+}
+
+#homepage {
+  .particles {
+    position: fixed;
+    opacity: 0.7;
+    width: 100vw;
+    height: 100vh;
+  }
+}
diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb
@@ -12,7 +12,7 @@ def home
                                    .order(updated_at: :desc).page(1).per(20)
           render 'explore/active'
         else
-          render 'main/home'
+          render 'main/home', layout: "pages"
         end
       end
     end

diff --git a/app/views/layouts/pages.html.erb b/app/views/layouts/pages.html.erb
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Metamaps</title>
+</head>
+<body>
+<%= yield %>
+</body>
+</html>
diff --git a/app/views/main/home.html.erb b/app/views/main/home.html.erb
@@ -1,40 +1,7 @@
-<%#
-  # @file
-  # Located at /
-  # Shows 3 most recently created topics, synapses, and maps.
-  #
-%>  
- 
-<% content_for :title, "Home | Metamaps" %> 
-<% content_for :mobile_title, "Home" %> 
-<div id="yield">
-  <div class="homeWrapper homeText">
-    <div class="homeTitle">Make Sense with Metamaps</div>
-    <div class="homeIntro">
-    <span class="green din-medium">METAMAPS.CC</span> is a free and open source platform that supports real-time sense-making, distributed collaboration, and the creative intelligence of individuals, organizations and communities. We are currently in an <span class="din-medium">invite-only beta.</span>
-    </div>
-  </div>
-  <div class="fullWidthWrapper withVideo">
-    <div class="homeWrapper">
-      <iframe class="homeVideo" src="https://player.vimeo.com/video/113154814" width="560" height="315" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-      <div class="callToAction">
-        <h3>Who finds it useful?</h3>
-        <p>Designers, inventors, artists, educators, strategists, consultants, facilitators, entrepreneurs, systems thinkers, changemakers, analysts, students, researchers... maybe you!</p>
-        <button type="button" class="button learnMoreCTA" onclick="Metamaps.GlobalUI.openLightbox('about');">LEARN MORE</button>
-        <a href="/explore/featured" data-router="true" class="exploreFeaturedCTA">EXPLORE FEATURED MAPS</a>
-        <a href="/request" class="requestInviteCTA">REQUEST INVITE</a>
-      </div>
-      <div class="clearfloat"></div>
-    </div>
-  </div>
-  <div class="fullWidthWrapper withPartners">
-    <div class="homeWrapper homePartners">
-      <% # our partners %>
-    </div>
-  </div>
-</div><!-- end yield -->
-
-<script>
-  Metamaps.currentSection = ''
-  Metamaps.currentPage = ''
-</script>
+<div id='homepage'>
+  <div id='particles-1' class='particles'></div>
+  <div id='particles-2' class='particles'></div>
+  <div id='particles-3' class='particles'></div>
+</div>
+<%= javascript_include_tag 'webpacked/homepage' %>
+<%= stylesheet_link_tag "home" %>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -10,4 +10,6 @@
   # Precompile additional assets.
   # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
   config.assets.precompile += %w(webpacked/metamaps.bundle.js)
+  config.assets.precompile += %w(webpacked/homepage.js)
+  config.assets.precompile += %w(home.css)
 end
diff --git a/frontend/src/home/metacodes.json b/frontend/src/home/metacodes.json
@@ -0,0 +1,50 @@
+[
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_location.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_experience.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_question.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_action.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_reference.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_process.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_problem.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_openissue.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_catalyst.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_group.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_feedback.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_futuredev.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_role.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_need.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_intention.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_insight.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_platform.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_task.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_trajectory.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_knowledge.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_idea.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_resource.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_tool.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_activity.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_person.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_implication.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_closedissue.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/blueprint/96px/bp_opportunity.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_argument.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_con.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_decision.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_example.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_aim.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_goodpractice.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_list.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_story.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_note.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_pro.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_research.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_wildcard.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_subject.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_event.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_media.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_metamap.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_model.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_perspective.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_project.png",
+"https://s3.amazonaws.com/metamaps-assets/metacodes/generics/96px/gen_status.png"
+]
diff --git a/frontend/src/home/particles.json b/frontend/src/home/particles.json
@@ -0,0 +1,101 @@
+{
+  "particles": {
+    "number": {
+      "value": 20,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#000"
+    },
+    "shape": {
+      "type": "image",
+      "image": {
+        "src": "",
+        "width": 30,
+        "height": 30
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 20,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 10,
+        "size_min": 15,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 300,
+      "color": "#999",
+      "opacity": 0.5,
+      "width": 3
+    },
+    "move": {
+      "enable": true,
+      "speed": 4,
+      "direction": "none",
+      "random": true,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": true,
+        "rotateX": 2000,
+        "rotateY": 2000
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 800,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 800,
+        "size": 80,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}