Merge branch 'homepage.good' into instance/uts

app/assets/stylesheets/admin.scss.erb

@@ -56,16 +56,15 @@
   }
 
   li.toggledOff {
-    opacity: 0.4;
+    opacity: 0.6;
   }
 }
 
-.blackBox {
+.centerContent {
   width: 760px;
   margin: 0 auto;
   padding: 80px 0 60px 20px;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(125, 125, 125, 0.4);
-  color: white;
   overflow: hidden;
   position: relative;
 
@@ -85,10 +84,10 @@
     display: table-row;
   }
   tr:nth-child(odd) {
-    background: rgba(0, 0, 0, 0.2);
+    background: rgba(125, 125, 125, 0.2);
   }
   tr:nth-child(even) {
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(125, 125, 125, 0.3);
   }
   th,
   td {

app/assets/stylesheets/application.scss.erb

@@ -2930,136 +2930,6 @@ and it won't be important on password protected instances */
     color: #424242;
 }
 
-/* Admin Pages */
-
-.blackBox {
-    width: 760px;
-    margin: 0 auto;
-    padding: 20px 0 60px 20px;
-    background: rgba(0, 0, 0, 0.4);
-    color: white;
-    overflow: hidden;
-    position: relative;
-}
-.blackBox .metacodeSetsDescription {
-    width: 314px;
-}
-.blackBox td.metacodeSetDesc {
-    width: 314px;
-    word-wrap: break-word;
-}
-.blackBox .metacodeSetImage {
-    width: 36px;
-    height: 36px;
-    float: left;
-}
-.blackBox tr {
-    display: table-row;
-}
-.blackBox tr:nth-child(odd) {
-    background: rgba(0, 0, 0, 0.2);
-}
-.blackBox tr:nth-child(even) {
-    background: rgba(0, 0, 0, 0.3);
-}
-.blackBox th,
-.blackBox td {
-    padding: 10px;
-}
-.blackBox td.iconURL {
-    max-width: 415px;
-    word-wrap: break-word;
-}
-.blackBox td.iconColor {
-
-}
-.blackBox .field {
-    margin: 15px 0 5px;
-}
-.blackBox label {
-    float: left;
-    width: 100px;
-    margin-right: 15px;
-}
-.blackBox input[type="text"] {
-    width: 336px;
-    height: 32px;
-    font-size: 15px;
-    direction: ltr;
-    -webkit-appearance: none;
-    appearance: none;
-    display: inline-block;
-    margin: 0;
-    padding: 0 8px;
-    background: #fff;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-border-radius: 1px;
-    -moz-border-radius: 1px;
-    border-radius: 1px;
-    font: -webkit-small-control;
-    color: initial;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    display: inline-block;
-    text-align: start;
-    font-family: arial;
-}
-.blackBox input[type="text"]:hover,
-.blackBox textarea:hover {
-    border: 1px solid #b9b9b9;
-    border-top: 1px solid #a0a0a0;
-    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.blackBox textarea {
-    padding: 8px;
-    border: 1px solid #d9d9d9;
-    border-top: 1px solid #c0c0c0;
-    resize: none;
-    font: -webkit-small-control;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-transform: none;
-    text-indent: 0px;
-    text-shadow: none;
-    text-align: start;
-    font-family: arial;
-    font-size: 15px;
-    line-height: 17px;
-    width: 318px;
-}
-.blackBox .allMetacodes {
-    padding: 5px 0;
-}
-.blackBox a.button {
-    margin-right: 20px;
-    line-height: 40px;
-}
-.blackBox a.button,
-.blackBox input.add {
-    float: left;
-    margin-top: 5px;
-    height: 40px;
-    font-size: 17px;
-    width: auto;
-    padding: 0 30px;
-    cursor: pointer;
-    font-weight: normal;
-}
-.blackBox a.button:hover,
-.blackBox input.add:hover {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
 /* request */
 
 .requestInvite {

app/assets/stylesheets/clean.css.erb

@@ -18,10 +18,26 @@
     font-weight: normal;
     font-style: normal;
 }
-
+@font-face {
-.backface-visible {
+    font-family: 'noto-sans-regular';
-	-webkit-backface-visibility: visible !important;
+    src: url(<%= asset_path 'Fonts/notosansui-regular-webfont.woff2' %>) format('woff2'),
-    backface-visibility: visible !important;
+         url(<%= asset_path 'Fonts/notosansui-regular-webfont.woff' %>) format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'noto-sans-bold';
+    src: url(<%= asset_path 'Fonts/notosansui-bold-webfont.woff2' %>) format('woff2'),
+         url(<%= asset_path 'Fonts/notosansui-bold-webfont.woff' %>) format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'noto-sans-bold-italic';
+    src: url(<%= asset_path 'Fonts/notosansui-bolditalic-webfont.woff2' %>) format('woff2'),
+         url(<%= asset_path 'Fonts/notosansui-bolditalic-webfont.woff' %>) format('woff');
+    font-weight: normal;
+    font-style: normal;
 }
 
 #yield {
@@ -227,119 +243,106 @@
 
 /* end map wrapper */
 
-/* yield */
+/* homepage */
 
-.famousYield {
+body.unauthenticated.action-home {
-    overflow-y:auto;
+  background: white;
+  font-family: 'noto-sans', sans-serif;
+  font-weight: 200;
 }
 
-/* homepage */
+.home {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.homeLogo {
+  position: fixed;
+  top: 10px;
+  left: 20px;
+  font-family: 'noto-sans-bold-italic', sans-serif;
+  font-size: 22px;
+  color: #6D6D6D;
+  z-index: 1;
+}
+
+#particles-bg {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 
 .homeWrapper.homeText {
     margin-top: 5%;
 }
 
-.fullWidthWrapper {
-    width: 100%;
-}
-.fullWidthWrapper.withVideo {
-    height: 315px;
-    background: #757575;
-}
-
 .homeWrapper {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 1;
+    border-radius: 3px;
+    color: #6D6D6D;
+    text-align: center;
+    padding: 30px;
+    background: white;
+    opacity: 0.8;
+}
+@media only screen and (max-width : 800px) {
+  .homeWrapper {
+    width: 90%;
+    margin: 0 5%;
+  }
+}
+@media only screen and (min-width : 801px) {
+  .homeWrapper {
     width: 800px;
     margin: 0 auto;
-    color: #424242;
+  }
 }
 
 .homeTitle {
     font-size: 64px;
-    line-height: 48px;
+    line-height: 70px;
-    text-align: center;
     margin-bottom: 20px;
+    font-family: 'noto-sans-bold', sans-serif;
 }
 
 .homeIntro {
     font-size: 22px;
     line-height: 26px;
-    text-align: justify;
     margin: 32px 0 20px;
-    font-family: 'din-regular', helvetica, sans-serif;
+}
+
+.homeIntro div {
+  margin: 20px 0;
 }
 
 .homeWrapper .green {
     color: #4fc059;
 }
-
+.homeWrapper .purple {
-.homeWrapper .din-medium {
+    color: #a354cd;
-    font-family: 'din-medium', helvetica, sans-serif;
+}
+.homeWrapper .yellow {
+    color: #dab539;
 }
 
-.homeVideo {
+.requestInviteCTA {
-    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;
+    font-size: 20px;
     padding: 16px 0;
     text-align: center;
-    border-radius: 2px;
+    border-radius: 3px;
-    font-size: 12px;
+    border: 2px solid #a354cd;
-    box-shadow: 0px 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
+    margin: 12px auto;
-    margin: 0 auto;
+    color: #a354cd;
-    color: #FFFFFF;
+    font-family: 'noto-sans-bold', sans-serif;
-    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;
 }
+.requestInviteCTA:hover {
 
-.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 */
@@ -694,17 +697,16 @@
 }
 
 .navBarButton {
-    color: #757575;
+  color: #757575;
 	cursor: default;
 	font-weight: normal;
 	font-family: 'din-medium';
 	font-size: 14px;
-	height: 14px;
+	padding: 0 8px;
-	padding: 14px 8px 12px 40px;
+  border-bottom: 2px solid rgba(0,0,0,0);
-    border-bottom: 2px solid rgba(0,0,0,0);
 	display: inline-block;
-    cursor: pointer;
+  cursor: pointer;
-    position:relative;
+  position:relative;
 }
 .navBarButton:hover, .navBarButton.active {
   text-decoration: none;
@@ -733,9 +735,16 @@
     background-repeat: no-repeat;
     width:32px;
     height:32px;
-    position:absolute;
+    margin-top:5px;
-    top:5px;
+    margin-left:5px;
-    left:5px;
+    margin-right: 5px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.navBarLinkText {
+  padding: 11px 0 12px 0;
+  display: inline-block;
 }
 
 .navBarCenter .authedApps .navBarIcon {

app/assets/stylesheets/mobile.scss.erb

@@ -60,19 +60,6 @@
   .homeIntro {
     text-align: left;
   }
-  .fullWidthWrapper.withVideo {
-    height: auto;
-  }
-  .homeVideo {
-    width: 100% !important;
-    height: auto;
-  }
-  .fullWidthWrapper.withPartners {
-    display: none;
-  }
-  .learnMoreCTA {
-    display: none !important;
-  }
 
   #yield {
     padding-top: 50px;

app/models/user_preference.rb

@@ -23,7 +23,7 @@ class UserPreference
   def initialize_follow_settings
     @follow_topic_on_created = false
     @follow_topic_on_contributed = false
-    @follow_map_on_created = false
+    @follow_map_on_created = true
     @follow_map_on_contributed = false
   end
 end

app/views/admin/_adminpanel.html.erb

@@ -1,6 +0,0 @@
-<%= link_to 'Metacode Sets', metacode_sets_path, { :class => 'button' }%>
-<%= link_to 'New Set', new_metacode_set_path, { :class => 'button' }%>
-<%= link_to 'Metacodes', metacodes_path, { :class => 'button' }%>
-<%= link_to 'New Metacode', new_metacode_path, { :class => 'button' }%>
-<div class='clearfloat'></div>
-<br />

app/views/main/home.html.erb

@@ -3,37 +3,28 @@
   # Located at /
   # Shows 3 most recently created topics, synapses, and maps.
   #
-%>  
+%>
- 
+
-<% content_for :title, "Home | Metamaps" %> 
+<% content_for :title, "Home | Metamaps" %>
-<% content_for :mobile_title, "Home" %> 
+<% content_for :mobile_title, "Home" %>
-<div id="yield">
+<div class="home">
+  <div class="homeLogo">METAMAPS</div>
+  <div id="particles-bg"></div>
   <div class="homeWrapper homeText">
-    <div class="homeTitle">Make Sense with Metamaps</div>
+    <div class="homeTitle">Make sense, together.</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>Untangle complex conversations, expand perspectives, and gain insights
-    </div>
+      about what matter to you and your communities.
-  </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>Metamaps enables individual and collaborative sensemaking through
-    </div>
+        <span class="purple">concept mapping</span>, <span class="green">live video + text chat</span>, and a <span class="yellow">shared knowledge graph</span>.
-  </div>
+      </div>
-  <div class="fullWidthWrapper withPartners">
+      <a href="/request" class="requestInviteCTA">REQUEST INVITE</a>
-    <div class="homeWrapper homePartners">
-      <% # our partners %>
     </div>
   </div>
 </div><!-- end yield -->
 
+<%= javascript_include_tag "particles-bg" %>
 <script>
   Metamaps.currentSection = ''
   Metamaps.currentPage = ''

app/views/metacode_sets/edit.html.erb

@@ -1,6 +1,6 @@
 <div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
-  <%= render 'form' %>
+    <%= render 'form' %>
   </div>
 </div>
 

app/views/metacode_sets/index.html.erb

@@ -1,37 +1,36 @@
-<div id="yield">  
+<div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
-  <%= render :partial => 'admin/adminpanel' %>
+    <br />
-  <br />
+    <table>
-  <table>
+      <tr>
-    <tr>
+        <th>Name</th>
-      <th>Name</th>
+        <th class='metacodeSetsDescription'>Description</th>
-      <th class='metacodeSetsDescription'>Description</th>
+        <th>Metacodes</th>
-      <th>Metacodes</th>
+      </tr>
-    </tr>
 
-  <% @metacode_sets.each do |metacode_set| %>
+    <% @metacode_sets.each do |metacode_set| %>
-    <tr>
+      <tr>
-      <td>
+        <td>
-        <%= metacode_set.name %><br />
+          <%= metacode_set.name %><br />
-        <%= link_to 'Edit', 
+          <%= link_to 'Edit',
-            edit_metacode_set_path(metacode_set) %>
+              edit_metacode_set_path(metacode_set) %>
-        <br />
+          <br />
-        <%= link_to 'Delete', 
+          <%= link_to 'Delete',
-            metacode_set, method: :delete,
+              metacode_set, method: :delete,
-            data: { confirm: 'Are you sure?' } %>
+              data: { confirm: 'Are you sure?' } %>
-      </td>
+        </td>
-      <td class='metacodeSetDesc'><%= metacode_set.desc %></td>
+        <td class='metacodeSetDesc'><%= metacode_set.desc %></td>
-      <td>
+        <td>
-        <% metacode_set.metacodes.each_with_index do |metacode, index| %>
+          <% metacode_set.metacodes.each_with_index do |metacode, index| %>
-          <img class='metacodeSetImage' src='<%= asset_path metacode.icon %>' />
+            <img class='metacodeSetImage' src='<%= asset_path metacode.icon %>' />
-          <% if (index+1)%4 == 0 %>
+            <% if (index+1)%4 == 0 %>
-          <div class='clearfloat'></div>
+            <div class='clearfloat'></div>
+            <% end %>
           <% end %>
-        <% end %>
+          <div class='clearfloat'></div>
-        <div class='clearfloat'></div>
+        </td>
-      </td>
+      </tr>
-    </tr>
+    <% end %>
-  <% end %>
+    </table>
-  </table>
   </div>
 </div>

app/views/metacode_sets/new.html.erb

@@ -1,6 +1,6 @@
 <div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
-  <%= render 'form' %>
+    <%= render 'form' %>
   </div>
 </div>
 
@@ -11,4 +11,4 @@
   <% end %>
   Metamaps.Admin.allMetacodes.push("<%= m.id %>");
 <% end %>
-</script>
+</script>

app/views/metacodes/edit.html.erb

@@ -1,5 +1,5 @@
 <div id="yield">
-	<div class='blackBox'>
+	<div class='centerContent'>
 	<%= render 'form' %>
 	</div>
-</div>
+</div>

app/views/metacodes/index.html.erb

@@ -1,31 +1,30 @@
 <div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
-  <%= render :partial => 'admin/adminpanel' %>
+    <br />
-  <br />
+    <table>
-  <table>
+      <tr>
-    <tr>
+        <th>Name</th>
-      <th>Name</th>
+        <th>Icon</th>
-      <th>Icon</th>
+        <th>Color</th>
-      <th>Color</th>
+        <th></th>
-      <th></th>
+        <th></th>
-      <th></th>
+      </tr>
-    </tr>
 
-  <% @metacodes.each do |metacode| %>
+    <% @metacodes.each do |metacode| %>
-    <tr>
+      <tr>
-      <td><%= metacode.name %></td>
+        <td><%= metacode.name %></td>
-      <td class="iconURL"><%= metacode.icon %></td>
+        <td class="iconURL"><%= metacode.icon %></td>
-      <% if metacode.color %>
+        <% if metacode.color %>
-        <td class="iconColor" style="background-color: <%= metacode.color %>">
+          <td class="iconColor" style="background-color: <%= metacode.color %>">
-          <%= metacode.color %>
+            <%= metacode.color %>
-        </td>
+          </td>
-      <% else %>
+        <% else %>
-        <td></td>
+          <td></td>
-      <% end %>
+        <% end %>
-      <td><%= image_tag metacode.icon, width: 40 %></td>
+        <td><%= image_tag metacode.icon, width: 40 %></td>
-      <td><%= link_to 'Edit', edit_metacode_path(metacode) %></td>
+        <td><%= link_to 'Edit', edit_metacode_path(metacode) %></td>
-    </tr>
+      </tr>
-  <% end %>
+    <% end %>
-  </table>
+    </table>
   </div>
 </div>

app/views/metacodes/new.html.erb

@@ -1,5 +1,5 @@
 <div id="yield">
-	<div class='blackBox'>
+	<div class='centerContent'>
 		<%= render 'form' %>
 	</div>
 </div>

config/initializers/assets.rb

@@ -9,5 +9,5 @@ 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( application-secret.css application-secret.js webpacked/metamaps.bundle.js )
+  config.assets.precompile += %w( application-secret.css application-secret.js particles-bg.js webpacked/metamaps.bundle.js )
 end

frontend/src/components/NavBarLink.js

@@ -48,15 +48,15 @@ class NavBarLink extends Component {
     if (hardReload) {
       return (
         <a { ...otherProps } href={href} className={classes.join(' ')}>
-          <div className="navBarIcon"></div>
+          {linkClass && <div className="navBarIcon"></div>}
-          {text}
+          <div className="navBarLinkText">{text}</div>
         </a>
       )
     }
     return (
       <Link { ...otherProps } to={href} className={classes.join(' ')}>
-        <div className="navBarIcon"></div>
+        {linkClass && <div className="navBarIcon"></div>}
-        {text}
+        <div className="navBarLinkText">{text}</div>
       </Link>
     )
   }

frontend/src/routes/Admin.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import NavBar from '../components/NavBar'
+import NavBarLink from '../components/NavBarLink'
+
+class Admin extends Component {
+  render = () => {
+    return (
+      <NavBar>
+        <NavBarLink show hardReload href="/metacode_sets" text="Metacode Sets" />
+        <NavBarLink show hardReload href="/metacode_sets/new" text="New Set" />
+        <NavBarLink show hardReload href="/metacodes" text="Metacodes" />
+        <NavBarLink show hardReload href="/metacodes/new" text="New Metacode" />
+      </NavBar>
+    )
+  }
+}
+
+export default Admin

frontend/src/routes/makeRoutes.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Route, IndexRoute } from 'react-router'
+import Admin from './Admin'
 import App from './App'
 import Apps from './Apps'
 import Maps from './Maps'
@@ -42,14 +43,14 @@ export default function makeRoutes (currentUser) {
       <Route path="password/edit" component={nullComponent} />
     </Route>
     <Route path="metacodes">
-      <IndexRoute component={nullComponent} />
+      <IndexRoute component={Admin} />
-      <Route path="new" component={nullComponent} />
+      <Route path="new" component={Admin} />
-      <Route path=":id/edit" component={nullComponent} />
+      <Route path=":id/edit" component={Admin} />
     </Route>
     <Route path="metacode_sets">
-      <IndexRoute component={nullComponent} />
+      <IndexRoute component={Admin} />
-      <Route path="new" component={nullComponent} />
+      <Route path="new" component={Admin} />
-      <Route path=":id/edit" component={nullComponent} />
+      <Route path=":id/edit" component={Admin} />
     </Route>
     <Route path="oauth">
       <Route path="token/info" component={Apps} />