employer list. style tweaks

Author: raedatoui

dist/content/employers.json

@@ -1,25 +1,36 @@
 [
   {
     "name": "The Orchard",
-    "link": "http://www.theorchard.com/"
+    "link": "http://www.theorchard.com/",
+    "dates": "Sept 2017 - present"
   },
+  {
+    "name": "Typedef",
+    "link": "http://www.theorchard.com/",
+    "dates": "Mar 2014 - present"
+  },  
   {
     "name": "Huge",
-    "link": "http://www.hugeinc.com/"
+    "link": "http://www.hugeinc.com/",
+    "dates": "May 2014 - Sept 2017"
   },
   {
     "name": "Stink",
-    "link": "https://www.stinkstudios.com/"
+    "link": "https://www.stinkstudios.com/",
+    "dates": "Sep 2013 - Mar 2014"
   },
   {
     "name": "Your Majesty",
-    "link": "https://yourmajesty.co/"
+    "link": "https://yourmajesty.co/",
+    "dates": "Aug 2011 - Mar 2013"
   },
   {
     "name": "Pentagram",
-    "link": "https://www.pentagram.com/"
+    "link": "https://www.pentagram.com/",
+    "dates": "Aug 2010 - Mar 2011"
   },
   {
-    "name": "The Map Office"
+    "name": "The Map Office",
+    "dates": "Aug 2010 - Mar 2011"
   }
 ]

src/components/StuffList/index.js

@@ -32,23 +32,23 @@ class StuffListInner extends React.Component<WithDispatch<OwnProps>> {
     );
   }
 
-  renderItem(item: { name: string, link?: string }) {
-    if (item.link)
-      return (
-        <a href={item.link} target="_blank">
-          {item.name}
-        </a>
-      );
-    return item.name;
-  }
-
   render() {
+    const dir =
+      this.props.list && this.props.list[0].dates !== undefined
+        ? "column"
+        : "row";
     return (
-      <ListWrapper>
+      <ListWrapper style={{ flexDirection: dir }}>
         {this.props.list &&
           this.props.list.map((item, i) => (
             <ListItem key={`${item.name}-${i}`}>
-              {this.renderItem(item)}
+              {item.link && (
+                <a href={item.link} target="_blank">
+                  {item.name}
+                </a>
+              )}
+              {!item.link && item.name}
+              {item.dates && <span>&nbsp;&ndash;&nbsp;{item.dates}</span>}
             </ListItem>
           ))}
       </ListWrapper>
@@ -61,7 +61,6 @@ export default connect(mapStateToProps)(StuffListInner);
 const ListWrapper = styled.ul`
   list-style: none;
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
   justify-content: stretch;
   padding: 0 2rem;
@@ -74,4 +73,7 @@ const ListItem = styled.li`
   &:hover {
     color: ${colors.red};
   }
+  span {
+    font-size: 0.85rem;
+  }
 `;

src/components/Work/Project.js

@@ -7,7 +7,7 @@ import type { WithDispatch } from "@src/store";
 import * as Types from "@src/types";
 import * as ProjectActions from "./actions";
 import Nervous, { type NervousPoint } from "./Nervous";
-import { breakLg, colors } from "@src/styles";
+import { breakLg } from "@src/styles";
 import { withRouter, type WithRouter } from "react-router-dom";
 
 type Props = {|
@@ -233,7 +233,7 @@ const Project = styled.div`
     margin: 0.61rem 0;
   }
   &:focus {
-    outline: 1px dotted ${colors.red};
+    outline: none;
   }
   &.dis-true {
     opacity: 0.1;

src/types.js

@@ -45,7 +45,8 @@ export type Project = {
 
 export type List = Array<{|
   name: string,
-  link?: string
+  link?: string,
+  dates?: string
 |}>;
 
 export type Bio = {|