[Rails] I tried playing with the comment send button

The first step of a fledgling engineer! Advent Calendar 2020 17th day article

Introduction

When creating a PF for a programming school ... I wanted to change the comment post button Common atmosphere ↓

Anyway, I want to bring the user's icon to the submit button and make it feel like the user is commenting ... So I tried it

Prerequisites

--rails new application created --Comment function added --boostrap4 installed --refile installed

Development environment

• IDE : Cloud9
• Ruby : 2.6.3
• Ruby on Rails : 5.2.4.4

Play with the comment sending code

The code in the above image looks like this I'll play with it a little bit <% = f.submit class:'m-3'%>

ruby:hoge.html.erb

<%= button_tag type: :submit, class:"btn_comment_img" do %>
  <%= attachment_image_tag current_user, :user_image, size: "100x100",class:"rounded-circle img-fluid border border-dark", fallback: "no-image-icon.jpg " %>
<% end %>

I will change it to As an image, I want to replace the image with a button, so I enclose it in button_tag. <%= button_tag 〜 do %> <% = attachment_image_tag Currently logged in user,: User column name, ~%> <% end %>

Arrange the layout with bootstrap or css/scss (scss this time), Finished like this

Codes

Post a comment

ruby:hoge.html.erb

<%= form_with(model:[circle, comment], url: circle_circle_comments_path(circle.id), method: :post, remote: true) do |f| %>
  <div class="row justify-content-center">
    <div class="comment_area col-7">
      <%= f.text_area :comment, rows:'5', class: "form-control comment_p" ,placeholder: "Comment here" %>
    </div>
    <div class="faceicon pl-3">
      <% if user_signed_in? %>
        <%= button_tag type: :submit, class:"btn_comment_img" do %>
          <%= attachment_image_tag current_user, :user_image, size: "100x100",class:"rounded-circle img-fluid border border-dark", fallback: "no-image-icon.jpg " %>
        <% end %>
      <% end %>
    </div>
  </div>
<% end %>

Callout layout

hoge.scss

.comment_area {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}

.comment_area::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.comment_area::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #555;
  z-index: 1;
}
.comment_p {
  margin: 0;
  padding: 0;
  border: none;
}

If you want to flip left and right

Post a comment

• Col-2 is added because it will be covered if the button and text box are exchanged by flipping left and right.

Callout layout

It is ok if you rewrite the commented out contents in the above layout

Like this

At the end

I made something close to the image, but it's a bit disappointing that a blue frame appears when I press it & a frame also appears in the comment area (Let's make it the next task ...)

Thank you for staying with us until the end (ˊ̱˂˃ˋ̱)