From b9fb4a282994613ab25a280557885ddc11505d5c Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sat, 14 Oct 2017 15:55:50 -0400 Subject: [PATCH] move admin header to react --- app/assets/stylesheets/admin.scss.erb | 11 +- app/assets/stylesheets/application.scss.erb | 130 -------------------- app/assets/stylesheets/clean.css.erb | 24 ++-- app/views/admin/_adminpanel.html.erb | 6 - app/views/metacode_sets/edit.html.erb | 4 +- app/views/metacode_sets/index.html.erb | 65 +++++----- app/views/metacode_sets/new.html.erb | 6 +- app/views/metacodes/edit.html.erb | 4 +- app/views/metacodes/index.html.erb | 53 ++++---- app/views/metacodes/new.html.erb | 2 +- frontend/src/components/NavBarLink.js | 8 +- frontend/src/routes/Admin.js | 18 +++ frontend/src/routes/makeRoutes.js | 13 +- 13 files changed, 115 insertions(+), 229 deletions(-) delete mode 100644 app/views/admin/_adminpanel.html.erb create mode 100644 frontend/src/routes/Admin.js diff --git a/app/assets/stylesheets/admin.scss.erb b/app/assets/stylesheets/admin.scss.erb index 8859457c..16b4ead5 100644 --- a/app/assets/stylesheets/admin.scss.erb +++ b/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); - 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 { diff --git a/app/assets/stylesheets/application.scss.erb b/app/assets/stylesheets/application.scss.erb index 11330ef9..753124d2 100644 --- a/app/assets/stylesheets/application.scss.erb +++ b/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 { diff --git a/app/assets/stylesheets/clean.css.erb b/app/assets/stylesheets/clean.css.erb index 0790437e..445a4950 100644 --- a/app/assets/stylesheets/clean.css.erb +++ b/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: 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 { diff --git a/app/views/admin/_adminpanel.html.erb b/app/views/admin/_adminpanel.html.erb deleted file mode 100644 index c34c6cc6..00000000 --- a/app/views/admin/_adminpanel.html.erb +++ /dev/null @@ -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' }%> -
-
diff --git a/app/views/metacode_sets/edit.html.erb b/app/views/metacode_sets/edit.html.erb index 5377cba8..06f2cb06 100644 --- a/app/views/metacode_sets/edit.html.erb +++ b/app/views/metacode_sets/edit.html.erb @@ -1,6 +1,6 @@
-
- <%= render 'form' %> +
+ <%= render 'form' %>
diff --git a/app/views/metacode_sets/index.html.erb b/app/views/metacode_sets/index.html.erb index e5015afa..68986895 100644 --- a/app/views/metacode_sets/index.html.erb +++ b/app/views/metacode_sets/index.html.erb @@ -1,37 +1,36 @@ -
-
- <%= render :partial => 'admin/adminpanel' %> -
- - - - - - +
+
+
+
NameDescriptionMetacodes
+ + + + + - <% @metacode_sets.each do |metacode_set| %> - - - - + + + - - <% end %> -
NameDescriptionMetacodes
- <%= metacode_set.name %>
- <%= link_to 'Edit', - edit_metacode_set_path(metacode_set) %> -
- <%= link_to 'Delete', - metacode_set, method: :delete, - data: { confirm: 'Are you sure?' } %> - 		<%= metacode_set.desc %> - <% metacode_set.metacodes.each_with_index do |metacode, index| %> - - <% if (index+1)%4 == 0 %> -
+ <% @metacode_sets.each do |metacode_set| %> +
+ <%= metacode_set.name %>
+ <%= link_to 'Edit', + edit_metacode_set_path(metacode_set) %> +
+ <%= link_to 'Delete', + metacode_set, method: :delete, + data: { confirm: 'Are you sure?' } %> + 		<%= metacode_set.desc %> + <% metacode_set.metacodes.each_with_index do |metacode, index| %> + + <% if (index+1)%4 == 0 %> +
+ <% end %> <% end %> - <% end %> -
-
+
+ + + <% end %> +
diff --git a/app/views/metacode_sets/new.html.erb b/app/views/metacode_sets/new.html.erb index 1ff5e852..06f2cb06 100644 --- a/app/views/metacode_sets/new.html.erb +++ b/app/views/metacode_sets/new.html.erb @@ -1,6 +1,6 @@
-
- <%= render 'form' %> +
+ <%= render 'form' %>
@@ -11,4 +11,4 @@ <% end %> Metamaps.Admin.allMetacodes.push("<%= m.id %>"); <% end %> - \ No newline at end of file + diff --git a/app/views/metacodes/edit.html.erb b/app/views/metacodes/edit.html.erb index de8c85c1..4eb40656 100644 --- a/app/views/metacodes/edit.html.erb +++ b/app/views/metacodes/edit.html.erb @@ -1,5 +1,5 @@
-
+
<%= render 'form' %>
-
\ No newline at end of file +
diff --git a/app/views/metacodes/index.html.erb b/app/views/metacodes/index.html.erb index afe20706..f7f86e53 100644 --- a/app/views/metacodes/index.html.erb +++ b/app/views/metacodes/index.html.erb @@ -1,31 +1,30 @@
-
- <%= render :partial => 'admin/adminpanel' %> -
- - - - - - - - +
+
+
NameIconColor
+ + + + + + + - <% @metacodes.each do |metacode| %> - - - - <% if metacode.color %> - - <% else %> - - <% end %> - - - - <% end %> -
NameIconColor
<%= metacode.name %><%= metacode.icon %> - <%= metacode.color %> - <%= image_tag metacode.icon, width: 40 %><%= link_to 'Edit', edit_metacode_path(metacode) %>
+ <% @metacodes.each do |metacode| %> + + <%= metacode.name %> + <%= metacode.icon %> + <% if metacode.color %> + + <%= metacode.color %> + + <% else %> + + <% end %> + <%= image_tag metacode.icon, width: 40 %> + <%= link_to 'Edit', edit_metacode_path(metacode) %> + + <% end %> +
diff --git a/app/views/metacodes/new.html.erb b/app/views/metacodes/new.html.erb index e10f28d1..81819734 100644 --- a/app/views/metacodes/new.html.erb +++ b/app/views/metacodes/new.html.erb @@ -1,5 +1,5 @@
-
+
<%= render 'form' %>
diff --git a/frontend/src/components/NavBarLink.js b/frontend/src/components/NavBarLink.js index 033de2e9..67feec88 100644 --- a/frontend/src/components/NavBarLink.js +++ b/frontend/src/components/NavBarLink.js @@ -48,15 +48,15 @@ class NavBarLink extends Component { if (hardReload) { return ( -
- {text} + {linkClass &&
} +
{text}
 ) } return ( -
- {text} + {linkClass &&
} +
{text}
) } diff --git a/frontend/src/routes/Admin.js b/frontend/src/routes/Admin.js new file mode 100644 index 00000000..d48664ef --- /dev/null +++ b/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 ( + + + + + + + ) + } +} + +export default Admin diff --git a/frontend/src/routes/makeRoutes.js b/frontend/src/routes/makeRoutes.js index 90146627..3ce9c509 100644 --- a/frontend/src/routes/makeRoutes.js +++ b/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) { - - - + + + - - - + + +