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

@@ -699,8 +699,7 @@
 	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);
 	display: inline-block;
   cursor: pointer;
@@ -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,5 +1,5 @@
 <div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
     <%= render 'form' %>
   </div>
 </div>

app/views/metacode_sets/index.html.erb

@@ -1,6 +1,5 @@
 <div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
-  <%= render :partial => 'admin/adminpanel' %>
     <br />
     <table>
       <tr>

app/views/metacode_sets/new.html.erb

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

app/views/metacodes/edit.html.erb

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

app/views/metacodes/index.html.erb

@@ -1,6 +1,5 @@
 <div id="yield">
-  <div class='blackBox'>
+  <div class='centerContent'>
-  <%= render :partial => 'admin/adminpanel' %>
     <br />
     <table>
       <tr>

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