some style

Author: ryanflorence

app/assets/styles.css

@@ -1,8 +1,113 @@
 body {
-  background: pink;
+  font-family: "Helvetica Neue";
+  font-weight: 200;
 }
 
-a.active {
-  color: red;
+h1, h2 {
+  font-weight: normal;
 }
 
+a {
+  text-decoration: none;
+  color: #007adc;
+}
+
+a:active {
+  color: #ff3b30;
+}
+
+.App {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.Master {
+  position: absolute;
+  left: 0;
+  width: 300px;
+  top: 0;
+  bottom: 0;
+}
+
+.Detail {
+  position: absolute;
+  left: 302px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.ContactList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ContactList__Contact {
+  display: block;
+  padding: 4px 8px;
+  font-size: 120%;
+}
+
+.Heading {
+  margin: 0;
+  text-align: center;
+  padding: 10px;
+  background: #007adc;
+  color: #fff;
+  font-size: 100%;
+  box-sizing: border-box;
+  height: 40px;
+}
+
+.Heading--alt {
+  background-color: #4cd964;
+}
+
+.Content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 41px;
+  bottom: 0;
+  overflow: scroll;
+}
+
+.padBox {
+  padding: 20px;
+}
+
+.Avatar {
+  height: 150px;
+  width: 150px;
+  border-radius: 50%;
+  background: #ccc;
+  display: inline-block;
+  margin: 20px;
+}
+
+.KVSet {
+  margin: 20px;
+}
+
+.KV {
+  display: flex;
+  flex-direction: row;
+}
+
+.KV__Key,
+.KV__Value {
+  box-sizing: border-box;
+  margin: 10px;
+  font-size: 150%;
+}
+
+.KV__Key {
+  width: 150px;
+  color: hsl(0, 0%, 75%);
+}
+
+

app/handlers/Contact.js

@@ -22,8 +22,31 @@ var Contact = module.exports = React.createClass({
       return <div/>;
 
     return (
-      <div>
-        <h2>{contact.first} {contact.last}</h2>
+      <div className="Contact">
+        <h1 className="Heading Heading--alt">{contact.first} {contact.last}</h1>
+        <div className="Content padBox">
+          <img className="Avatar" key={contact.id} src={contact.avatar}/>
+          <div className="KVSet">
+            <div className="KV">
+              <div className="KV__Key">First Name</div>
+              <div className="KV__Value">{contact.first}</div>
+            </div>
+            <div className="KV">
+              <div className="KV__Key">Last Name</div>
+              <div className="KV__Value">{contact.last}</div>
+            </div>
+            <div className="KV">
+              <div className="KV__Key">Avatar URL</div>
+              <div className="KV__Value">{contact.avatar}</div>
+            </div>
+            <div className="KV">
+              <div className="KV__Key"> </div>
+              <div className="KV__Value">
+                <a onClick={this.startEditing} href="#">edit</a>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

app/handlers/Root.js

@@ -26,18 +26,6 @@ var Root = module.exports = React.createClass({
     this.setState({contacts: newProps.contacts});
   },
 
-  renderContacts: function() {
-    if (!this.props.contacts)
-      return null;
-
-    var contacts = this.state.contacts.records;
-    return contacts.map(function(contact) {
-      return <li key={contact.id}>
-        <Link to="contact" params={{id: contact.id}}>{contact.first} {contact.last}</Link>
-      </li>;
-    });
-  },
-
   componentDidMount: function() {
     ContactStore.addChangeListener(this.handleContactsChange);
   },
@@ -50,15 +38,41 @@ var Root = module.exports = React.createClass({
     this.setState({contactData: ContactStore.getAll()});
   },
 
+  renderContacts: function() {
+    if (!this.props.contacts)
+      return null;
+
+    var contacts = this.state.contacts.records;
+    return contacts.map(function(contact) {
+      return (
+        <li key={contact.id}>
+          <Link
+            className="ContactList__Contact"
+            to="contact"
+            params={{id: contact.id}}
+          >
+            {contact.first} {contact.last}
+          </Link>
+        </li>
+      );
+    });
+  },
+
   render: function() {
     return (
-      <div>
-        <h1>Address Book</h1>
-        <NewContactForm/>
-        <ul>
-          {this.renderContacts()}
-        </ul>
-        {this.props.activeRouteHandler()}
+      <div className="App">
+        <div className="Master">
+          <h2 className="Heading">Contacts</h2>
+          <div className="Content">
+            <ul className="ContactList">
+              {this.renderContacts()}
+            </ul>
+          </div>
+        </div>
+
+        <div className="Detail">
+          {this.props.activeRouteHandler()}
+        </div>
       </div>
     );
   }

app/server.js

@@ -10,13 +10,13 @@ var mainJS = fs.readFileSync(__dirname+'/../public/js/main.js');
 
 require('mach').serve(function (req, res) {
   switch (req.path) {
-    case '/styles.css':
-      return fs.readFileSync(__dirname+'/assets/styles.css');
     case '/js/main.js':
       return mainJS;
     case '/favicon.ico':
       return 'haha';
     default:
+      if (req.path.match(/^\/styles.css/))
+        return fs.readFileSync(__dirname+'/assets/styles.css');
       return renderApp(req.path);
   }
 }, process.env.PORT || 5000);