comment anchor

app/assets/stylesheets/modules/flow.css.scss

@@ -103,52 +103,48 @@
 // }
 
 
-// .comment-wrapper {
-//   .panel-title {
-//     img {
-//       height: 25px;
-//       margin-right: 10px;
-//       position: relative;
-//       bottom: 2px;
-//     }
-//   }
-//   textarea {
-//     border: 1px solid #f6f6f6;
-//     margin: 10px 0;
-//     padding: 10px 15px;
-//     line-height: 1.428571429;
-//     vertical-align: middle;
-//     border: 1px solid #dce4ec;
-//     -webkit-border-radius: 4px;
-//     -moz-border-radius: 4px;
-//     -o-border-radius: 4px;
-//     border-radius: 4px;
-//     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-//     box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-//     -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-//     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-//     &:focus {
-//       border: 1px solid $theme-color-main;
-//       box-shadow: 0px 0px 0px $theme-color-main;
-//       background-color: #f8f8f8;
-//     }
-//   }
-//   .comment-btn {
-//     background-color: transparent;
-//     color: $theme-color-main;
-//     border: 1px solid $theme-color-main;
-//     &:hover {
-//       color: #fff;
-//       background-color: $theme-color-main;
-//       @include transition;
-//     }
-//     &:focus {
-//       background-color: #f8f8f8;
-//       @include transition;
-//       box-shadow: 0px 0px 0px $theme-color-main;
-//     }
-//   }
-// }
+.panel-comment {
+  .media-body {
+    width: 100%;
+  }
+  textarea {
+    // border: 1px solid #f6f6f6;
+    // margin: 10px 0;
+    // padding: 10px 15px;
+    // line-height: 1.428571429;
+    // vertical-align: middle;
+    border: 1px solid #dce4ec;
+    // -webkit-border-radius: 4px;
+    // -moz-border-radius: 4px;
+    // -o-border-radius: 4px;
+    // border-radius: 4px;
+    // -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    // box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    // -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    // transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+    &:focus {
+      border: 1px solid $theme-color-main;
+      box-shadow: 0px 0px 0px $theme-color-main;
+      background-color: #f8f8f8;
+    }
+  }
+  .media {
+    border-bottom: 1px dashed #ccc;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  .btn-comment {
+    background-color: transparent;
+    color: $theme-color-main;
+    border: 1px solid $theme-color-main;
+    &:hover, &:focus {
+      color: #fff;
+      background-color: $theme-color-main;
+      @include transition;
+    }
+  }
+}
 
 // .panel-default {
 //   .panel-heading {

app/controllers/posts_controller.rb

@@ -109,7 +109,7 @@ class PostsController < ApplicationController
     respond_to do |format|
       if @comment.save
         gflash success: 'Comment was successfully created.'
-        format.html { redirect_to post_path(id: @post.id) }
+        format.html { redirect_to post_path(id: @post.id, anchor: 'comments_anchor') }
         format.json { render json: { status: 'ok', comment: @comment }, status: :created }
       else
         gflash error: 'Comment is not saved.'

app/views/posts/show.html.slim

@@ -40,7 +40,7 @@
           = link_to 'Watch <span class="glyphicon glyphicon-eye-open"></span>'.html_safe, watch_post_path, :remote => true, :'data-type' => :html, :class => 'btn btn-default ajax_link watch-btn'
 
 
-    .panel
+    .panel.panel-default
       .panel-heading
         h3.panel-title
           i.fa.fa-info
@@ -89,7 +89,7 @@
 
 .row
   .col-xs-12
-    .panel.comment-wrapper
+    .panel.panel-comment.panel-default
       .panel-heading
         h3.panel-title
           i.fa.fa-comments
@@ -98,19 +98,20 @@
         ul.media-list
           - @post.comments.each do |comment|
             li.media
-              a.pull-left href="#"
-                img.media-object src=comment.author.decorate.image_url /
+              a.media-left href="#"
+                img.media-object src=comment.author.decorate.image_url height="25px" width="25px"
               .media-body
                 h4.media-heading= comment.author.name
                 = MarkdownRenderer.new(comment.body).render
+
           = form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do
             li.media
-              a.pull-left href="#"
-                img.media-object src=current_user.image_url /
+              a.media-left href="#"
+                img.media-object src=current_user.image_url height="25px" width="25px"
               .media-body
                 h4.media-heading= current_user.name
-                = text_area :comment, :body, class: 'form-control', placeholder: 'コメントする...'
-                = submit_tag "Comment", class: 'btn comment-btn', data: { 'disable-with' => '...' }
+                = text_area :comment, :body, id: 'comments_anchor', class: 'form-control', placeholder: 'コメントする...'
+                = submit_tag "Comment", class: 'btn btn-comment', data: { 'disable-with' => '...' }
         javascript:
           $("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) {