move admin header to react
This commit is contained in:
Connor Turland
parent
9b52d0e081
commit
b9fb4a2829
13 changed files with 115 additions and 229 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div id="yield">
|
||||
<div class='blackBox'>
|
||||
<%= render 'form' %>
|
||||
<div class='centerContent'>
|
||||
<%= render 'form' %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div id="yield">
|
||||
<div class='blackBox'>
|
||||
<div class='centerContent'>
|
||||
<%= render 'form' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div id="yield">
|
||||
<div class='blackBox'>
|
||||
<div class='centerContent'>
|
||||
<%= render 'form' %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
18
frontend/src/routes/Admin.js
Normal file
18
frontend/src/routes/Admin.js
Normal 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
|
||||
|
|
@ -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} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue