[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 ↓ スクリーンショット 2020-12-17 14.24.37.png

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

Play with the comment sending code

The code in the above image looks like this スクリーンショット 2020-12-17 14.27.26.png 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 ezgif.com-gif-maker.gif

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
Callout layout

It is ok if you rewrite the commented out contents in the above layout スクリーンショット 2020-12-17 15.59.24.png

Like this

ezgif.com-gif-maker (1).gif

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 (ˊ̱˂˃ˋ̱)

Recommended Posts

[Rails] I tried playing with the comment send button
[Rails] I tried deleting the application
I tried to implement the image preview function with Rails / jQuery
I tried playing with BottomNavigationView a little ①
I rewrote the Rails tutorial test with RSpec
[Rails] I tried to raise the Rails version from 5.0 to 5.2
I tried to organize the session in Rails
I tried writing CRUD with Rails + Vue + devise_token_auth
I tried DI with Ruby
I tried Rails beginner [Chapter 1]
I tried the Docker tutorial!
I tried the VueJS tutorial!
I tried the FizzBuzz problem
I tried Rails beginner [Chapter 2]
I tried UPSERT with PostgreSQL.
I tried BIND with Docker
I tried installing Ruby on Rails related plugin with vim-plug
Why can I use the rails command installed with gem? ??
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
[Rails] I tried using the button_to method for the first time
I tried to increase the processing speed with spiritual engineering
[Rails] I tried to create a mini app with FullCalendar
I tried automatic deployment with CircleCI + Capistrano + AWS (EC2) + Rails
[Rails] I tried to implement batch processing with Rake task
I tried using the CameraX library with Android Java Fragment
I tried upgrading from CentOS 6.5 to CentOS 7 with the upgrade tool
I tried to sort the data in descending order, ascending order / Rails
I tried using JOOQ with Gradle
I tried to build the environment of PlantUML Server with Docker
I tried to make the "Select File" button of the sample application created in the Rails tutorial cool
I tried to interact with Java
I tried UDP communication with Java
I tried to explain the method
I got a warning message with the rails _6.0.3_ new hello_myapp command
I tried to understand how the rails method "redirect_to" is defined
I tried the Java framework "Quarkus"
I tried to check the operation of gRPC server with grpcurl
I tried to understand how the rails method "link_to" is defined
I tried GraphQL with Spring Boot
I tried Flyway with Spring Boot
I tried customizing slim with Scaffold
I tried to make a group function (bulletin board) with Rails
I tried running the Angular sample in Auth0 Quick Start with Docker
How to decorate the radio button of rails6 form_with (helper) with CSS
[Ruby] I tried to diet the if statement code with the ternary operator
I tried to solve the tribonacci sequence problem in Ruby, with recursion.
I tried running the route search engine (OSRM) easily with a container
I tried to visualize the access of Lambda → Athena with AWS X-Ray
I want to introduce the committee with Rails without getting too dirty
I tried to measure and compare the speed of GraalVM with JMH
I tried to summarize the methods used
I tried to introduce CircleCI 2.0 to Rails app
I tried using Realm with Swift UI
I tried to get started with WebAssembly
I tried using Scalar DL with Docker
I tried the new era in Java
Prepare the format environment with "Rails" (VScode)
I tried using OnlineConverter with SpringBoot + JODConverter
I tried time-saving management learning with Studyplus.
I tried to implement the Iterator pattern
I tried using OpenCV with Java + Tomcat