| 1 | <div class="col-12 mb-2 mt-2"> |
| 2 | <div class="row"> |
| 3 | <div class="col-1 text-center"> |
| 4 | <%= link_to( |
| 5 | gravatar_for(comment.user), |
| 6 | profile_path(comment.user.username_or_id), |
| 7 | title: "Author: @#{comment.user.username_or_id}" |
| 8 | ) %> |
| 9 | </div> |
| 10 | <div class="col-11"> |
| 11 | <%= link_to( |
| 12 | comment.user.username_or_name, |
| 13 | profile_path(comment.user.username_or_id), |
| 14 | title: "@#{comment.user.username_or_id}" |
| 15 | ) %> |
| 16 | <span class="fst-italic fw-light"> |
| 17 | , <%= time_ago_in_words(comment.created_at) %> <%= t('ago') %> |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="row"> |
| 22 | <div class="col-1 text-center"> |
| 23 | <div class="border-start border-primary" style="width: 1px;height: 100%;margin-left: auto;margin-right: auto;"> |
| 24 | </div> |
| 25 | </div> |
| 26 | <div class="col-11"> |
| 27 | <%= comment.body %> |
| 28 | <div class="row mt-1 mb-3"> |
| 29 | <div class="col-1"> |
| 30 | <a href="javascript:void(0)" onclick="toggleForm('reply-form-<%= comment.id %>')"> |
| 31 | <i class="bi bi-reply-fill"></i> |
| 32 | </a> |
| 33 | </div> |
| 34 | </div> |
| 35 | <%= form_for [comment, Comment.new], html:{style: 'display:none;width:100%;', class: "reply-form-#{comment.id}"} do |f| %> |
| 36 | <%= f.text_area :body, placeholder: t('add_a_reply'), rows: "4" , cols: "50%"%><br/> |
| 37 | <%= f.hidden_field :user_id, value: current_user.id if user_signed_in? %> |
| 38 | <%= f.submit t('reply'), class: "btn btn-primary" %> |
| 39 | <% end %> |
| 40 | <div class="col-12"> |
| 41 | <%= render partial: 'comments/comment', collection: comment.comments %> |
| 42 | </div> |
| 43 | </div> |
| 44 | </div> |
| 45 | </div> |
| 46 | <script> |
| 47 | function toggleForm(id) { |
| 48 | var x = document.getElementsByClassName(id)[0]; |
| 49 | if (x.style.display === "none") { |
| 50 | x.style.display = "block"; |
| 51 | } else { |
| 52 | x.style.display = "none"; |
| 53 | } |
| 54 | } |
| 55 | </script> |