Comments

The comments section for a Commentable model.


Example

Display a comment
OBS Instance Superuser

Admin wrote less than a minute ago

My comment is amazing!

  • Reply
  • Delete
Reply to a comment / New comment

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
%h5 Display a comment

.media
  %img.mr-3{ alt: 'OBS Instance Superuser', height: '35', src: 'https://www.gravatar.com/avatar/b1a4b2518dbbdd47dd4a713d5cd1df94?s=35&d=wavatar', width: '35' }
  .media-body
    %p
      %a{ href: '/user/show/Admin' } Admin
      wrote
      %u{ title: '2018-09-24 14:21 UTC' }
        less than a minute ago
    %p My comment is amazing!
    %ul.list-inline
      %li.list-inline-item.togglable_comment{ 'data-toggle': "reply_form_of_1" }
        %span.btn.btn-sm.btn-outline-secondary{ id: 'reply_link_id_1' }
          Reply
      %li.list-inline-item
        .modal.fade{ id: 'delete-comment-modal-1', role: 'dialog', tabindex: '-1', aria: { hidden: 'true', labelledby: 'delete-comment-modal-label' } }
          .modal-dialog.modal-dialog-centered{ role: 'document' }
            .modal-content
              .modal-header
                %h5.modal-title
                  Delete comment?
              .modal-body
                %p Please confirm deletion of comment
                %form{ action: '/comments/1', 'accept-charset': 'UTF-8', 'data-remote': 'true', method: 'post' }
                  .modal-footer
                    %button.btn.btn-sm.btn-outline-secondary.px-4{ 'data-dismiss': 'modal' }
                      Cancel
                    %input.btn.btn-sm.btn-danger.px-4{ name: 'commit', value: 'Delete', 'data-disable-with': 'Delete', type: 'submit' }
        %a.delete_link.btn.btn-sm.btn-outline-danger{ href: '#', title: 'Delete comment', data: { toggle: 'modal', target: '#delete-comment-modal-1' } }
          Delete

%h5.mt-3 Reply to a comment / New comment

.comment_new#reply_form_of_1
  %form.new_comment#new_comment{ action: '/comments', 'accept-charset': 'UTF-8', 'data-remote': 'true', method: 'post' }
    %textarea#reply_body_1.form-control{name: "comment[body]", onclick: "sz(this);", onkeyup: "sz(this);", placeholder: "Comment Text", required: "required", row: "4"}
    %input.btn.btn-outline-primary.my-2{ name: 'commit', value: 'Add reply', id: 'add_reply_1', 'data-disable-with': 'Add reply', type: 'submit' }