new post rendering style

lib/boards-api.js

@@ -110,7 +110,7 @@ BoardsAPI.prototype.resolveIPNS = function(n,handler){
             this.ee.emit(n,url)
             this.backupCache()
           } else {
-            console.log(n,'not a user')
+            console.log(n,'not a valid profile:',err)
             this.ee.emit(n,undefined,'not a valid profile: '+err)
           }
           this.resolving_ipns[n] = false

webapp/app.jsx

@@ -74,6 +74,22 @@ var Navbar = React.createClass({
   }
 })
 
+var Post = React.createClass({
+  render: function(){
+    return <div key={this.props.post.title} className="post">
+      <div className="content">
+        <h5>{this.props.post.title}</h5><hr/>
+        <Markdown source={this.props.post.text} skipHtml={true} /><hr/>
+        <div className="icons">
+          <UserID id={this.props.post.op} />
+          <Icon name="clock-o" class="not-first"/> Date
+          <Icon name="comments" class="not-first" /> Comments
+        </div>
+      </div>
+    </div>
+  }
+})
+
 var PostList = React.createClass({
   getInitialState: function(){
     return { posts: [] }
@@ -90,10 +106,7 @@ var PostList = React.createClass({
     return (
       <div className="postList">
         {this.state.posts.map(post => {
-          return (<div key={post.title} className="post">
+          return <Post key={post.title+post.text} post={post} />
-            <h5>{post.title}</h5>
-            <Markdown source={post.text} skipHtml={true} />
-          </div>)
         })}
       </div>
     )
@@ -120,7 +133,7 @@ var UserID = React.createClass({
     }
   },
   render: function(){
-    return (<div className="board">
+    return (<div className="user-id">
       <Link className="light nounderline" to={'/@'+this.props.id}>
         {this.getContent()}{this.state.name || this.props.id}
       </Link>

webapp/style.css

@@ -41,6 +41,35 @@ a:hover {
   padding-top: 2em
 }
 
+.user-id .fa {
+  margin-right: .25rem;
+}
+
+.post {
+  display: block;
+  max-width: 65rem;
+  border: 1px solid #bbb;
+  border-radius: .5rem;
+  margin: 3rem auto;
+}
+
+.post .content {
+  display: block;
+  margin: 2rem;
+}
+
+.post .icons .fa {
+  color: #707070;
+}
+
+.post .icons .user-id {
+  display: inline-block;
+}
+
+.post .icons .not-first{
+  margin-left: 1rem;
+}
+
 .navbar {
   border-bottom: 1px solid #eee;
   display: block;