From acb3775f28814f95123a9f5ded1db1eb492eb29c Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 6 Nov 2016 01:12:00 +0000 Subject: [PATCH] begin homepage dev --- app/assets/stylesheets/clean.css.erb | 117 --------------------------- app/assets/stylesheets/home.scss.erb | 34 ++++++++ app/controllers/main_controller.rb | 2 +- app/views/layouts/pages.html.erb | 9 +++ app/views/main/home.html.erb | 47 ++--------- config/initializers/assets.rb | 2 + frontend/src/home/metacodes.json | 50 ++++++++++++ frontend/src/home/particles.json | 101 +++++++++++++++++++++++ frontend/src/homepage.js | 16 ++++ package.json | 1 + webpack.config.js | 3 +- 11 files changed, 223 insertions(+), 159 deletions(-) create mode 100644 app/assets/stylesheets/home.scss.erb create mode 100644 app/views/layouts/pages.html.erb create mode 100644 frontend/src/home/metacodes.json create mode 100644 frontend/src/home/particles.json create mode 100644 frontend/src/homepage.js diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index e4da394b..6d23e90a 100644 --- 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 new file mode 100644 index 00000000..699a7969 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb index 38d9458c..93da9f65 100644 --- a/app/controllers/main_controller.rb +++ b/app/controllers/main_controller.rb @@ -12,7 +12,7 @@ class MainController < ApplicationController .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 new file mode 100644 index 00000000..b3ca4110 --- /dev/null +++ b/app/views/layouts/pages.html.erb @@ -0,0 +1,9 @@ + + + +Metamaps + + +<%= yield %> + + \ No newline at end of file diff --git a/app/views/main/home.html.erb b/app/views/main/home.html.erb index 16870f13..7df8d78e 100644 --- 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" %> -
-
-
Make Sense with Metamaps
-
- METAMAPS.CC 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 invite-only beta. -
-
-
-
- -
-

Who finds it useful?

-

Designers, inventors, artists, educators, strategists, consultants, facilitators, entrepreneurs, systems thinkers, changemakers, analysts, students, researchers... maybe you!

- - EXPLORE FEATURED MAPS - REQUEST INVITE -
-
-
-
-
-
- <% # our partners %> -
-
-
- - +
+
+
+
+
+<%= javascript_include_tag 'webpacked/homepage' %> +<%= stylesheet_link_tag "home" %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index 11f6601e..83005f89 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -10,4 +10,6 @@ Rails.application.configure do # 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 new file mode 100644 index 00000000..088e906e --- /dev/null +++ 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" +] \ No newline at end of file diff --git a/frontend/src/home/particles.json b/frontend/src/home/particles.json new file mode 100644 index 00000000..f980ebb3 --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/frontend/src/homepage.js b/frontend/src/homepage.js new file mode 100644 index 00000000..38f9e4f8 --- /dev/null +++ b/frontend/src/homepage.js @@ -0,0 +1,16 @@ +require('particles.js') +import config from './home/particles.json' +import metacodes from './home/metacodes.json' +const max = metacodes.length - 1 + +let rand = Math.floor(Math.random()*max) +config.particles.shape.image.src = metacodes[rand] +window.particlesJS('particles-1', config) + +rand = Math.floor(Math.random()*max) +config.particles.shape.image.src = metacodes[rand] +window.particlesJS('particles-2', config) + +rand = Math.floor(Math.random()*max) +config.particles.shape.image.src = metacodes[rand] +window.particlesJS('particles-3', config) \ No newline at end of file diff --git a/package.json b/package.json index e33a6e0a..2bb89fb0 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "lodash": "4.16.1", "node-uuid": "1.4.7", "outdent": "0.2.1", + "particles.js": "2.0.0", "react": "15.3.2", "react-dom": "15.3.2", "react-dropzone": "3.6.0", diff --git a/webpack.config.js b/webpack.config.js index 423616f9..903a4ba1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -40,7 +40,8 @@ const config = module.exports = { ] }, entry: { - 'metamaps.bundle': './frontend/src/index.js' + 'metamaps.bundle': './frontend/src/index.js', + 'homepage': './frontend/src/homepage.js', }, output: { path: './app/assets/javascripts/webpacked',