glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

begin homepage dev

Browse source
This commit is contained in:
Connor Turland 2016-11-06 01:12:00 +00:00
parent 95b8b52224
commit acb3775f28
11 changed files with 223 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
app/assets/stylesheets/clean.css.erb
View file

@ -230,123 +230,6 @@
/* end upperRightUI */ /* 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 */ /* infoAndHelp */
.mapPage .infoAndHelp, .topicPage .infoAndHelp { .mapPage .infoAndHelp, .topicPage .infoAndHelp {

34
app/assets/stylesheets/home.scss.erb Normal file
View file

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

2
app/controllers/main_controller.rb
View file

@ -12,7 +12,7 @@ class MainController < ApplicationController
.order(updated_at: :desc).page(1).per(20) .order(updated_at: :desc).page(1).per(20)
render 'explore/active' render 'explore/active'
else else
render 'main/home' render 'main/home', layout: "pages"
end end
end end
end end

9
app/views/layouts/pages.html.erb Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>Metamaps</title>
</head>
<body>
<%= yield %>
</body>
</html>

45
app/views/main/home.html.erb
View file

@ -1,40 +1,7 @@
<%# <div id='homepage'>
# @file <div id='particles-1' class='particles'></div>
# Located at / <div id='particles-2' class='particles'></div>
# Shows 3 most recently created topics, synapses, and maps. <div id='particles-3' class='particles'></div>
#
%>
<% 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> <%= javascript_include_tag 'webpacked/homepage' %>
<div class="fullWidthWrapper withVideo"> <%= stylesheet_link_tag "home" %>
<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>

2
config/initializers/assets.rb
View file

@ -10,4 +10,6 @@ Rails.application.configure do
# Precompile additional assets. # Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added. # 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/metamaps.bundle.js)
config.assets.precompile += %w(webpacked/homepage.js)
config.assets.precompile += %w(home.css)
end end

50
frontend/src/home/metacodes.json Normal file
View file

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

101
frontend/src/home/particles.json Normal file
View file

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

16
frontend/src/homepage.js Normal file
View file

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

1
package.json
View file

@ -37,6 +37,7 @@
"lodash": "4.16.1", "lodash": "4.16.1",
"node-uuid": "1.4.7", "node-uuid": "1.4.7",
"outdent": "0.2.1", "outdent": "0.2.1",
"particles.js": "2.0.0",
"react": "15.3.2", "react": "15.3.2",
"react-dom": "15.3.2", "react-dom": "15.3.2",
"react-dropzone": "3.6.0", "react-dropzone": "3.6.0",

3
webpack.config.js
View file

@ -40,7 +40,8 @@ const config = module.exports = {
] ]
}, },
entry: { entry: {
'metamaps.bundle': './frontend/src/index.js' 'metamaps.bundle': './frontend/src/index.js',
'homepage': './frontend/src/homepage.js',
}, },
output: { output: {
path: './app/assets/javascripts/webpacked', path: './app/assets/javascripts/webpacked',