#11 attacks, battlegear, locations

src/components/portal/Base.js

@@ -32,8 +32,8 @@ function Header(props) {
           <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>
+          <Link to="/portal/Mugic">Mugic</Link>
         </div>
       </li>
     );

src/components/portal/Category/Attacks.js

@@ -9,10 +9,6 @@ import {observer, inject} from 'mobx-react';
 export default class Attacks extends React.Component {
 
   render() {
-    if (this.props.children) {
-      return (<div>{this.props.children}</div>);
-    }
-
     const store = API;
 
     let path = this.props.location.pathname.split("/");
@@ -50,6 +46,14 @@ export default class Attacks extends React.Component {
       );
     });
 
-    return (<div>{output}</div>);
+    return (<div className="entry attacks">
+      <div className="left">
+        <div className="title">Attacks<hr /></div>
+        {output}
+      </div>
+      <div className="right">
+        {this.props.children}
+      </div>
+    </div>);
   }
 }

src/components/portal/Category/Battlegear.js

@@ -9,10 +9,6 @@ import {observer, inject} from 'mobx-react';
 export default class Battlegear extends React.Component {
 
     render() {
-      if (this.props.children) {
-        return (<div>{this.props.children}</div>);
-      }
-
       const store = API;
 
       let path = this.props.location.pathname.split("/");
@@ -50,6 +46,14 @@ export default class Battlegear extends React.Component {
         );
       });
 
-      return (<div>{output}</div>);
+      return (<div className="entry battlegear">
+        <div className="left">
+          <div className="title">Battlegear<hr /></div>
+          {output}
+        </div>
+        <div className="right">
+          {this.props.children}
+        </div>
+      </div>);
     }
 }

src/components/portal/Category/Locations.js

@@ -9,10 +9,6 @@ import {observer, inject} from 'mobx-react';
 export default class Locations extends React.Component {
 
   render() {
-    if (this.props.children) {
-      return (<div>{this.props.children}</div>);
-    }
-
     const store = API;
 
     let path = this.props.location.pathname.split("/");
@@ -50,6 +46,14 @@ export default class Locations extends React.Component {
       );
     });
 
-    return (<div>{output}</div>);
+    return (<div className="entry locations">
+      <div className="left">
+        <div className="title">Locations<hr /></div>
+        {output}
+      </div>
+      <div className="right">
+        {this.props.children}
+      </div>
+    </div>);
   }
 }

src/components/portal/Home.js

@@ -20,13 +20,13 @@ export default function PortalHome() {
           to="/portal/Creatures"
         >Creatures</Interactive>
         <br /><br />
-        <Interactive as={Link} {...s.link}
-          to="/portal/Mugic"
-        >Mugic</Interactive>
-        <br /><br />
         <Interactive as={Link} {...s.link}
           to="/portal/Locations"
         >Locations</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/Mugic"
+        >Mugic</Interactive>
       </div>
       <div style={s.tribes}>
         <p>Pick a Tribe</p><br />

src/components/portal/Single/Attack.js

@@ -46,9 +46,10 @@ export default class SingleAttack extends React.Component {
     const card_data = store.cards.attacks.findOne({'gsx$name': name});
 
     return (
-      <div className={"attack"}>
-        <h1>{attack.gsx$name}</h1>
+      <div>
         <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
+        <br />
+        <div className="title">{attack.gsx$name}</div>
         <hr />
         <div>
           <strong>Attributes:</strong><br />

src/components/portal/Single/Battlegear.js

@@ -46,9 +46,10 @@ export default class SingleBattlegear extends React.Component {
     const card_data = store.cards.battlegear.findOne({'gsx$name': name});
 
     return (
-      <div className={"battlegear"}>
-        <h1>{battlegear.gsx$name}</h1>
+      <div>
         <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
+        <br />
+        <div className="title">{battlegear.gsx$name}</div>
         <hr />
         <div>
           <strong>Attributes:</strong><br />

src/components/portal/Single/Location.js

@@ -46,13 +46,14 @@ export default class SingleLocation extends React.Component {
     const card_data = store.cards.locations.findOne({'gsx$name': name});
 
     return (
-      <div className={"location"}>
-        <h1>{location.gsx$name}</h1>
+      <div>
         <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
+        <br />
+        <div className="title">{location.gsx$name}</div>
         <hr />
         <div>
           <strong>Local Features:</strong><br />
-          {location.gsx$appearance}
+          {location.gsx$localfeatures}
         </div>
         <hr />
         <div>