Skip to content

R
rendezvous
Commit 28f198f7 by tady
Options

comment anchor

parent 152f6638
Showing with 52 additions and 55 deletions
app/assets/stylesheets/modules/flow.css.scss
...@@ -103,52 +103,48 @@ ...@@ -103,52 +103,48 @@
// } // }
// .comment-wrapper { .panel-comment {
// .panel-title { .media-body {
// img { width: 100%;
// height: 25px; }
// margin-right: 10px; textarea {
// position: relative; // border: 1px solid #f6f6f6;
// bottom: 2px; // margin: 10px 0;
// } // padding: 10px 15px;
// } // line-height: 1.428571429;
// textarea { // vertical-align: middle;
// border: 1px solid #f6f6f6; border: 1px solid #dce4ec;
// margin: 10px 0; // -webkit-border-radius: 4px;
// padding: 10px 15px; // -moz-border-radius: 4px;
// line-height: 1.428571429; // -o-border-radius: 4px;
// vertical-align: middle; // border-radius: 4px;
// border: 1px solid #dce4ec; // -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
// -webkit-border-radius: 4px; // box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
// -moz-border-radius: 4px; // -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
// -o-border-radius: 4px; // transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
// border-radius: 4px; &:focus {
// -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); border: 1px solid $theme-color-main;
// box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: 0px 0px 0px $theme-color-main;
// -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; background-color: #f8f8f8;
// transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
// &:focus { }
// border: 1px solid $theme-color-main; .media {
// box-shadow: 0px 0px 0px $theme-color-main; border-bottom: 1px dashed #ccc;
// background-color: #f8f8f8; &:last-child {
// } border-bottom: none;
// } }
// .comment-btn { }
// background-color: transparent; .btn-comment {
// color: $theme-color-main; background-color: transparent;
// border: 1px solid $theme-color-main; color: $theme-color-main;
// &:hover { border: 1px solid $theme-color-main;
// color: #fff; &:hover, &:focus {
// background-color: $theme-color-main; color: #fff;
// @include transition; background-color: $theme-color-main;
// } @include transition;
// &:focus { }
// background-color: #f8f8f8; }
// @include transition; }
// box-shadow: 0px 0px 0px $theme-color-main;
// }
// }
// }
// .panel-default { // .panel-default {
// .panel-heading { // .panel-heading {
......
app/controllers/posts_controller.rb
...@@ -109,7 +109,7 @@ class PostsController < ApplicationController ...@@ -109,7 +109,7 @@ class PostsController < ApplicationController
respond_to do |format| respond_to do |format|
if @comment.save if @comment.save
gflash success: 'Comment was successfully created.' 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 } format.json { render json: { status: 'ok', comment: @comment }, status: :created }
else else
gflash error: 'Comment is not saved.' gflash error: 'Comment is not saved.'
......
app/views/posts/show.html.slim
...@@ -40,7 +40,7 @@ ...@@ -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' = 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 .panel-heading
h3.panel-title h3.panel-title
i.fa.fa-info i.fa.fa-info
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
.row .row
.col-xs-12 .col-xs-12
.panel.comment-wrapper .panel.panel-comment.panel-default
.panel-heading .panel-heading
h3.panel-title h3.panel-title
i.fa.fa-comments i.fa.fa-comments
...@@ -98,19 +98,20 @@ ...@@ -98,19 +98,20 @@
ul.media-list ul.media-list
- @post.comments.each do |comment| - @post.comments.each do |comment|
li.media li.media
a.pull-left href="#" a.media-left href="#"
img.media-object src=comment.author.decorate.image_url / img.media-object src=comment.author.decorate.image_url height="25px" width="25px"
.media-body .media-body
h4.media-heading= comment.author.name h4.media-heading= comment.author.name
= MarkdownRenderer.new(comment.body).render = MarkdownRenderer.new(comment.body).render
= form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do = form_tag(comment_post_path, method: :post, data: { 'form-id' => "comment_#{@post.id}" }) do
li.media li.media
a.pull-left href="#" a.media-left href="#"
img.media-object src=current_user.image_url / img.media-object src=current_user.image_url height="25px" width="25px"
.media-body .media-body
h4.media-heading= current_user.name h4.media-heading= current_user.name
= text_area :comment, :body, class: 'form-control', placeholder: 'コメントする...' = text_area :comment, :body, id: 'comments_anchor', class: 'form-control', placeholder: 'コメントする...'
= submit_tag "Comment", class: 'btn comment-btn', data: { 'disable-with' => '...' } = submit_tag "Comment", class: 'btn btn-comment', data: { 'disable-with' => '...' }
javascript: javascript:
$("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) { $("form[data-form-id='comment_#{@post.id}']").on('ajax:success', function(event, data, xhr) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment