Single Post Frontend

app/frontend/application/comment.less

@@ -0,0 +1,11 @@
+.comment_content {
+  color: #828282;
+  font-size: 12px;
+  line-height: 21px;
+}
+
+.comment_user {
+  color: #4F4F4F;
+  font-size: 14px;
+  line-height: 20px;
+}

app/frontend/application/index.js

@@ -2,7 +2,9 @@ import {render, h} from 'preact';
 import NavBarComponent from 'Common/components/navbar';
 import HomeSearchComponent from './home/home-search';
 import './base.less';
+import './comment.less';
 import './home.less';
+import './post.less';
 import './util.less';
 import 'Common/components/card';
 import 'Common/shadows.less'

app/frontend/application/post.less

@@ -0,0 +1,37 @@
+.post_title {
+  font-size: 20px;
+  color: #4F4F4F;
+  line-height: 35px;
+}
+
+.post_content {
+  color: #828282;
+  font-size: 16px;
+  line-height: 28px;
+}
+
+.post_user {
+  color: #4F4F4F;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.post_stats {
+  color: #828282;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.post_commentbox {
+  color: #828282;
+  font-size: 16px;
+  line-height: 19px;
+  text-decoration: none;
+}
+
+.post_commentbox:link, .post_commentbox:visited {
+  color: inherit;
+}
+
+img { float: left; }
+.follow { line-height: 19px; }

app/frontend/common/components/card/card.less

@@ -32,6 +32,34 @@
   }
 }
 
+.card_no_shadow {
+  background: #fff;
+  border-radius: 2px;
+  position: relative;
+  width: 100%;
+
+  .card-divider {
+    border-bottom-width: 0.5px;
+    border-bottom: solid 0.5px @color-grayLighter;
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  }
+
+  li.two-col {
+    display: inline-block;
+    width: 50%;
+  }
+
+  &-listItem-header {
+    font-size: .9rem;
+    font-weight: 400;
+  }
+
+  &-listItem-text {
+    font-size: .8rem;
+    color: @color-grayLight
+  }
+}
+
 li.columns {
   display: inline-block;
   width: 50%;
@@ -67,6 +95,11 @@ li.columns {
   width: 50px;
 }
 
+.comment-box {
+  height: 20px;
+  width: 20px;
+}
+
 .featured-posts {
   height: 80px;
 }

app/views/comments/_comment.slim

@@ -1,7 +1,8 @@
+section.card_no_shadow.card-2
+  p.card-divider.m0.p2.regular.comment_user #{comment.user.email}
+  p.card-divider.m0.p2.regular.comment_content #{comment.comment}
 div
-  p= comment.comment
-  p= comment.user.email
   - if current_user.present? && (comment.user_id == current_user.id || current_user.admin)
-  	= link_to "Edit", edit_post_comment_path(comment.post, comment)
+  	= button_to "Edit", edit_post_comment_path(comment.post, comment)
   - if current_user.present? && (comment.user_id == current_user.id || current_user.admin)
   	= button_to "Delete Reply", [comment.post, comment], method: :delete

app/views/posts/show.slim

@@ -1,17 +1,26 @@
-h1= @post.title
-p= @post.content
+section.card_no_shadow.card-2
+  p.card-divider.m0.p2.regular.post_user #{@post.user.email}
+  h1.card-divider.m0.p2.regular.post_title #{@post.title}
+  p.card-divider.m0.p2.regular.post_content #{@post.content}
+  p.card-divider.m0.p2.regular.post_stats #{pluralize(@post.comments.count, 'comment')}
+  - if current_user.present?
+    =
+    div.table-cell.align-middle.px1
+      img.square.comment-box src=asset_pack_path('comment-icon.png')
+    div.table-cell.align-middle.pr1
+      p.card-divider.m0.p2.regular.post_commentbox #{link_to 'Comment', '#comment_box', :class=>"post_commentbox"}
 
 // Comments
 div
-  h3= "Number of comments: " + @post.comments.count.to_s
   = render @post.comments
 
-  h3 Reply to thread
-  = render "comments/form"
+- if current_user.present?
+  =
+  <a id="comment_box"></a>
+    h3 Reply to thread
+    = render "comments/form"
 
 - if current_user.present? && (current_user.id == @post.user_id || current_user.admin)
-	= link_to "Edit", edit_post_path(@post)
+	= button_to "Edit", edit_post_path(@post)
 - if current_user.present? && (current_user.id == @post.user_id || current_user.admin)
 	= button_to "Delete", post_path(@post), method: :delete
-
-= link_to "Home", root_path