[Rails] 댓글 보내기 버튼을 만지작거렸어요.

달려라 엔지니어의 첫걸음!Advent Calendar 2020의 17일째 보도

입문

어떤 프로그래밍 학교 PF 제작 때...
댓글 투고 버튼을 바꾸고 싶어요.
흔한 분위기↓

어쨌든 사용자의 아이콘을 발송 버튼에 가져가서 댓글을 달아주는 느낌을 주고 싶은데...
그래서 해봤어요.

전제 조건

rails new 응용 프로그램 생성

주석 기능 추가

boostrap4

가져오기

refile 가져오기

개발 환경

IDE : Cloud9

Ruby : 2.6.3

Ruby on Rails : 5.2.4.4

댓글 코드를 가지고 놀아요.

위의 코드는 이렇습니다.

그거 살짝 해드릴게요.
<%=f.submit class:'m-3'%> 섹션
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 %>

상호 렌더링 재시작
그림으로서, 단추로 그림을 바꾸고 싶어서button_태그로 둘러싸인 곳인가요?
<%= button_tag 〜 do %>
<%=attachment_image_tag 현재 로그인한 사용자: 사용자 이름, ~%>
<% end %>
boostrap와 css/scss(이번은scss)로 레이아웃을 정리합니다.
이런 느낌을 완성했습니다.

코드

문장을 평론하다
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: "コメントをここに" %>
    </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 %>

범례 레이아웃
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;
}

좌우로 뒤집고 싶을 때.

문장을 평론하다
＊좌우로 뒤집고 버튼과 텍스트 상자를 바꾸면 끼울 수 있기 때문에col-2를 추가했다

범례 레이아웃
위의 섹션 디자인에서 주석 출력의 내용을 바꾸면 OK입니다.

이런 느낌.

끝날 때

인상에 가까운 것이 나왔지만 눌렀을 때 파란색 테두리가 나오고 댓글도 테두리가 나오는 게 아쉬웠어요.
(다음 과제는...)
끝까지 함께해줘서 고마워요.ˊ̱˂˃ˋ̱ )