move admin header to react

This commit is contained in:
Connor Turland 2017-10-14 15:55:50 -04:00
parent 9b52d0e081
commit b9fb4a2829
13 changed files with 115 additions and 229 deletions

View file

@ -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);
color: white;
background: rgba(125, 125, 125, 0.4);
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 {

View file

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

View file

@ -694,17 +694,16 @@
}
.navBarButton {
color: #757575;
color: #757575;
cursor: default;
font-weight: normal;
font-family: 'din-medium';
font-size: 14px;
height: 14px;
padding: 14px 8px 12px 40px;
border-bottom: 2px solid rgba(0,0,0,0);
padding: 0 8px;
border-bottom: 2px solid rgba(0,0,0,0);
display: inline-block;
cursor: pointer;
position:relative;
cursor: pointer;
position:relative;
}
.navBarButton:hover, .navBarButton.active {
text-decoration: none;
@ -733,9 +732,16 @@
background-repeat: no-repeat;
width:32px;
height:32px;
position:absolute;
top:5px;
left:5px;
margin-top:5px;
margin-left:5px;
margin-right: 5px;
display: inline-block;
vertical-align: top;
}
.navBarLinkText {
padding: 11px 0 12px 0;
display: inline-block;
}
.navBarCenter .authedApps .navBarIcon {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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} />
<Route path="new" component={nullComponent} />
<Route path=":id/edit" component={nullComponent} />
<IndexRoute component={Admin} />
<Route path="new" component={Admin} />
<Route path=":id/edit" component={Admin} />
</Route>
<Route path="metacode_sets">
<IndexRoute component={nullComponent} />
<Route path="new" component={nullComponent} />
<Route path=":id/edit" component={nullComponent} />
<IndexRoute component={Admin} />
<Route path="new" component={Admin} />
<Route path=":id/edit" component={Admin} />
</Route>
<Route path="oauth">
<Route path="token/info" component={Apps} />