fixed navbar #11

src/components/PageNotFound.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import s from '../styles/pageNotFound.style';
-
-const propTypes = {
-  location: PropTypes.object.isRequired,
-};
-
-function PageNotFound({ location }) {
-  return (
-    <p style={s.p}>
-      Page not found - the path, {s.code(location.pathname)},
-      did not match any React Router routes.
-    </p>
-  );
-}
-
-PageNotFound.propTypes = propTypes;
-
-export default PageNotFound;

src/components/Snippets.js

@@ -1,8 +1,24 @@
 import React from 'react';
+import API from './SpreadsheetData';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import processString from 'react-process-string';
-import API from '../SpreadsheetData';
+import s from '../styles/pageNotFound.style';
+
+export function UnderConstruction(props) {
+  return (
+    <p style={s.p}>This page is currently under construction</p>
+  );
+}
+
+export function PageNotFound(props) {
+  return (
+    <p style={s.p}>
+      Page not found - the path, {s.code(props.location.pathname)},
+      did not match any React Router routes.
+    </p>
+  );
+}
 
 export function Rarity(props) {
   return (
@@ -98,3 +114,10 @@ export function Ability(props) {
 
   return <div className={props.type||"ability"}>{processString(filters)(props.ability)}</div>
 }
+
+export function Splash(props) {
+  let image = props.image;
+  return (
+    <div style={{position: 'absolute', top: '0', left: '0', right: '0', bottom: '0', backgroundImage: 'url(\''+image+'\') no-repeat center', backgroundSize: 'cover'}} />
+  );
+}

src/components/UnderConstruction.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import s from '../styles/pageNotFound.style';
-
-const propTypes = {
-  location: PropTypes.object.isRequired,
-};
-
-function UnderConstruction({ location }) {
-  return (
-    <p style={s.p}>This page is currently under construction</p>
-  );
-}
-
-UnderConstruction.propTypes = propTypes;
-
-export default UnderConstruction;

src/components/collection/types/Attack.js

@@ -4,7 +4,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Element, Ability} from '../Snippets';
+import {Rarity, Unique, Name, Element, Ability} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {

src/components/collection/types/Battlegear.js

@@ -4,7 +4,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Ability} from '../Snippets';
+import {Rarity, Unique, Name, Ability} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {

src/components/collection/types/Creature.js

@@ -4,7 +4,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../Snippets';
+import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Creature extends React.Component {

src/components/collection/types/Location.js

@@ -4,7 +4,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Ability} from '../Snippets';
+import {Rarity, Unique, Name, Ability} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Location extends React.Component {

src/components/collection/types/Mugic.js

@@ -4,7 +4,7 @@ import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Mugic, Ability} from '../Snippets';
+import {Rarity, Unique, Name, Mugic, Ability} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class Attack extends React.Component {

src/components/index.js

@@ -4,8 +4,7 @@ import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
 /* Common Components */
 import App from './Base';
-import PageNotFound from './PageNotFound';
-import UnderConstruction from './UnderConstruction';
+import {PageNotFound, UnderConstruction} from './Snippets';
 
 /* Home Component */
 import Home from './Home';

src/components/portal/Base.js

@@ -5,6 +5,7 @@ import Interactive from 'react-interactive';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import { Link } from 'react-router';
+import Search from './Search';
 
 @inject((stores, props, context) => props) @observer
 export default class PortalBase extends React.Component {
@@ -22,6 +23,22 @@ export default class PortalBase extends React.Component {
 }
 
 function Header(props) {
+
+  const types = (() => {
+    return (
+      <li className="dropdown">
+        <Link to="javascript:void(0)" className="dropbtn">Types</Link>
+        <div className="dropdown-content">
+          <Link to="/portal/Attacks">Attacks</Link>
+          <Link to="/portal/Battlegear">Battlegear</Link>
+          <Link to="/portal/Creatures">Creatures</Link>
+          <Link to="/portal/Mugic">Mugic</Link>
+          <Link to="/portal/Locations">Locations</Link>
+        </div>
+      </li>
+    );
+  })();
+
   const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => {
     return (
       <li key={i} className="dropdown">
@@ -38,16 +55,8 @@ function Header(props) {
     <div className="navbar">
       <ul>
         <li><Link to="/portal/">Home</Link></li>
-        <li className="dropdown">
-          <Link to="javascript:void(0)" className="dropbtn">Types</Link>
-          <div className="dropdown-content">
-            <Link to="/portal/Attacks">Attacks</Link>
-            <Link to="/portal/Battlegear">Battlegear</Link>
-            <Link to="/portal/Creatures">Creatures</Link>
-            <Link to="/portal/Mugic">Mugic</Link>
-            <Link to="/portal/Locations">Locations</Link>
-          </div>
-        </li>
+        <li><Search /></li>
+        {types}
         {tribes}
       </ul>
     </div>

src/components/portal/Category/Attacks.js

@@ -4,8 +4,6 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
 
 @inject((stores, props, context) => props) @observer
 export default class Attacks extends React.Component {

src/components/portal/Category/Battlegear.js

@@ -4,8 +4,6 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {

src/components/portal/Category/Creatures.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import PageNotFound from '../../PageNotFound';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Category/Locations.js

@@ -4,8 +4,6 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
 
 @inject((stores, props, context) => props) @observer
 export default class Locations extends React.Component {

src/components/portal/Category/Mugic.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import PageNotFound from '../../PageNotFound';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Category/Tribes.js

@@ -4,8 +4,6 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
 
 @inject((stores, props, context) => props) @observer
 export default class Tribes extends React.Component {

src/components/portal/Search.js

@@ -8,6 +8,6 @@ import loki from 'lokijs';
 export default class SearchPortal extends React.Component {
 
   render() {
-
+    return (<div>Search</div>)
   }
 }

src/components/portal/Single/Attack.js

@@ -4,8 +4,7 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
+import {PageNotFound} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleAttack extends React.Component {

src/components/portal/Single/Battlegear.js

@@ -4,8 +4,7 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
-import UnderConstruction from '../../UnderConstruction';
+import {PageNotFound} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleBattlegear extends React.Component {

src/components/portal/Single/Creature.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import PageNotFound from '../../PageNotFound';
+import {PageNotFound} from '../../Snippets';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';

src/components/portal/Single/Location.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import PageNotFound from '../../PageNotFound';
+import {PageNotFound} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleLocation extends React.Component {

src/components/portal/Single/Mugic.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import PageNotFound from '../../PageNotFound';
+import {PageNotFound} from '../../Snippets';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import UnderConstruction from '../../UnderConstruction';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleMugic extends React.Component {

src/components/portal/Splash.js

@@ -1,8 +0,0 @@
-import React from 'react';
-
-export function Splash(props) {
-  let image = props.image;
-  return (
-    <div style={{position: 'absolute', top: '0', left: '0', right: '0', bottom: '0', backgroundImage: 'url(\''+image+'\') no-repeat center', backgroundSize: 'cover'}} />
-  );
-}

src/css/portal.css

@@ -39,7 +39,7 @@
     float: left;
 }
 
-.navbar li a, .dropbtn {
+.navbar li a, .navbar .dropbtn {
     display: inline-block;
     color: white;
     text-align: center;
@@ -47,7 +47,7 @@
     text-decoration: none;
 }
 
-.navbar li a:hover, .dropdown:hover .dropbtn {
+.navbar li a:hover, .navbar .dropdown:hover .dropbtn {
     background-color: red;
 }
 
@@ -55,28 +55,28 @@
     display: inline-block;
 }
 
-.dropdown-content {
+.navbar .dropdown-content {
     display: none;
     position: absolute;
     /*background-color: #f9f9f9;*/
-    background-color: inherit;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
+    background-color: #333;
+    min-width: 140px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
 }
 
-.dropdown-content a {
-    color: black;
+.navbar .dropdown-content a {
+    color: white;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
 }
 
-.dropdown-content a:hover {
+/*.navbar .dropdown-content a:hover {
     background-color: #f1f1f1
-}
+}*/
 
-.dropdown:hover .dropdown-content {
+.navbar .dropdown:hover .dropdown-content {
     display: block;
 }