#11 Creatures

src/components/portal/Base.js

@@ -55,7 +55,7 @@ function Header(props) {
     <div className="navbar">
       <ul>
         <li><Link to="/portal/">Home</Link></li>
-        <li><Search /></li>
+        <li><Link to="javascript:void(0)"><Search /></Link></li>
         {types}
         {tribes}
       </ul>

src/components/portal/Category/Creatures.js

@@ -13,18 +13,15 @@ export default class Creatures extends React.Component {
   // /portal/{Tribe}/Creatures/
   // The first / gets counted
   render() {
-    if (this.props.children) {
-      return (<div>{this.props.children}</div>);
-    }
     const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
     let tribe = (() => {
-      if (path.length !== 4) return "None";
       if (path[2] === "Creatures") return path[3];
-      if (path[3] === "Creatures") return path[2];
+      else if (path[3] === "Creatures") return path[2];
+      else return "None";
     })();
 
     if (store.urls === null ||
@@ -82,7 +79,15 @@ export default class Creatures extends React.Component {
       );
     });
 
-    return (<div>{output}</div>);
+    return (<div className="entry creatures">
+      <div className="left">
+        <div className="title">{tribe}<hr /></div>
+        {output}
+      </div>
+      <div className="right">
+        {this.props.children}
+      </div>
+    </div>);
   }
 
 }

src/components/portal/Category/Mugic.js

@@ -80,7 +80,7 @@ export default class Mugic extends React.Component {
             to={'/portal/'+tribe+'/Mugic/'+single_mugic.gsx$name}
           >
             <span>{single_mugic.gsx$name}</span><br />
-            {/* TODO <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img> */}
+            <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
           </Interactive>
         </div>
       );

src/components/portal/Category/Tribes.js

@@ -24,7 +24,8 @@ export default class Tribes extends React.Component {
 
     return (
       <div>
-        <div><i>Tribe Summary Here</i></div><br />
+        <h1>{tribe}</h1>
+        <br />
         <Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Creatures"}>Creatures</Interactive><br />
         <Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Mugic"}>Mugic</Interactive>
       </div>

src/components/portal/Search.js

@@ -8,6 +8,9 @@ import loki from 'lokijs';
 export default class SearchPortal extends React.Component {
 
   render() {
-    return (<div>Search</div>)
+  return (<div className="search">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="magnifying-glass"><g fillRule="evenodd"><path d="M21.747 20.524l-4.872-4.871a.864.864 0 1 0-1.222 1.222l4.871 4.872a.864.864 0 1 0 1.223-1.223z"></path><path d="M3.848 10.763a6.915 6.915 0 0 1 6.915-6.915 6.915 6.915 0 0 1 6.915 6.915 6.915 6.915 0 0 1-6.915 6.915 6.915 6.915 0 0 1-6.915-6.915zm-1.729 0a8.643 8.643 0 0 0 8.644 8.644 8.643 8.643 0 0 0 8.644-8.644 8.643 8.643 0 0 0-8.644-8.644 8.643 8.643 0 0 0-8.644 8.644z"></path></g>
+    </svg>Search
+  </div>);
   }
 }

src/components/portal/Single/Creature.js

@@ -73,8 +73,9 @@ export default class SingleCreature extends React.Component {
 
     return (
       <div className={"creature " + tribe.toLowerCase()}>
-        <h1>{creature.gsx$name}</h1>
         <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
+        <br />
+        <div className="title">{creature.gsx$name}</div>
         <hr />
         <div>
           <strong>Appearance:</strong><br />

src/css/portal.css

@@ -80,3 +80,42 @@
 .navbar .dropdown:hover .dropdown-content {
     display: block;
 }
+
+.search {
+
+}
+
+.magnifying-glass {
+    cursor: pointer;
+    transition: color .2s;
+    z-index: 1;
+    vertical-align: middle;
+    fill: currentColor;
+    height: 18px;
+    min-width: 18px;
+    width: 18px;
+}
+
+.entry {
+    padding: 10px;
+}
+
+.entry .title {
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.entry .left {
+    float: left;
+    width: 100px;
+}
+
+.entry .right {
+    float: right;
+    width: 86%;
+}
+
+.entry .left .title {
+    text-align: left;
+    padding-bottom: 10px;
+}