move admin header to react

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

@@ -694,17 +694,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 +732,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/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/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>

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