Use the Media component for comments

I ended up using panels for styling comments in a project that uses 3.x-dev, thought it turned out pretty well. Maybe a panels based solution?

May it not be wise to make use of variables for anything within this overrides file which is bespoke?

Looking at the current overrides file, it really isn't doing things "the bootstrap way" - hardcoded values - padding, z-index, margins, borders, colours.
There's stuff like 'float: right', instead of, perhaps, .pull-right ?
It's a mish-mash of styles all dumped into a single file that makes it difficult to easily modify.

'modular' sections, such as comments, could be in their own comments.less file ?

Sorry for what looks like a minor rant - really loving this theme and hope to be able to assist in it's development.

@matthewtrow, to give a little history the "overrides" file has been a mixmash of different css styles over the years and the various bootstrap projects. Yes, it does need to be cleaned up. At this moment though, I'm honestly not too concerned with it.

@tr33m4n, this indeed looks awesome, but also very site specific. I'm not sure if we want to go this route for a base theme. Also using panels is not really an option for this base theme, we simply need to provide styling for core comments/templates. Many sites implement comments in a variety of ways: panels, display suite, disqus, facebook. We cannot simply choose one of these over the other and must remain as neutral as possible.

@valkum, here's a review

1. +++ b/bootstrap_subtheme/less/overrides.less
   @@ -536,3 +536,33 @@ th.radio,
   +  div.indented {
   ...
   +  div.comment {
   

   I'm pretty sure you probably wouldn't put div. in unless it's absolutely needed. Is it?

2. +++ b/bootstrap_subtheme/less/overrides.less
   @@ -536,3 +536,33 @@ th.radio,
   +
   ...
   +    ¶
   ...
   +
   

   Unnecessary whitespace

3. +++ b/bootstrap_subtheme/less/overrides.less
   @@ -536,3 +536,33 @@ th.radio,
   +    position:relative;
   ...
   +      display:table-cell;
   ...
   +    width:100%;
   

   space after :

4. +++ b/bootstrap_subtheme/less/overrides.less
   @@ -536,3 +536,33 @@ th.radio,
   +    h4 {
   +    margin-top:0;
   +    }
   

   style needs indention

@Mark Carver, yeah I totally agree actually however think you may have got the wrong end of the stick, panels as in Bootstrap 3 panels, not the module panels

@tr33m4n: ah, yep that gets confusing sometimes lol I still like using the .media styles for comments though, since .panel is used for fieldset. Don't want to confuse the two.

Marking this as a feature request, since we never had comment style/support before.

Valkum thanks for this patch - i've applied and it is a good first step. I"m trying to decide if this is the most sustainable approach right now. Do you have any other idears?

I'm going to postpone this issue for now (since it's a feature request). We can introduce this after we make a release and since I'd prefer to do this properly.

seems that users can style in panels or display suite for the time being - though a basic setup for handling replies and some very basic styling or presentation would be nice out of the box, since there's a lot of commenting on a lot of drupal sites and bootstrap is gaining serious popularity....(honestly, what about just putting comments into something like a well by default? or a lightly styled container of some kind?

update: just saw that comment about bootstrap panel above, that also makes sense (though still wondering about support for replies to comments and indentation as discussed in other threads...

.

Hi just as a suggestion

Can we have option to get a style that looks like Bartik's theme Comment' .. (with arrow ) it look's smooth and fine.

thanks

I agree with delacosta456 that even the Bartik's theme comment layout would be a lot better than the Bootstrap comments.

For now I am just using Display suite to format the way that the comment content looks.

Then provide a patch instead of complaining about it.

Hello,

Here is an attempt to provide a patch for this issue as I would also like really cool comments themed the Bootstrap way.

The main problem I have is that in addition to the template in the patch, it requires to alter the CommentViewBuilder, I don't know why in hook_preprocess_comment or in preprocess plugins (of the Bootstrap D8 theme) I can't alter the #prefix and #suffix...

So here is the code of core/modules/comment/src/CommentViewBuilder.php::alterBuild:

  /**
   * {@inheritdoc}
   */
  protected function alterBuild(array &$build, EntityInterface $comment, EntityViewDisplayInterface $display, $view_mode) {
    parent::alterBuild($build, $comment, $display, $view_mode);
    if (empty($comment->in_preview)) {
      if (\Drupal::theme()->getActiveTheme()->getName() == 'bootstrap') {
        $prefix = '';

        // Add indentation div or close open divs as needed. Except for the
        // first comment.
        if ($build['#comment_threaded'] && $build['#weight'] != 0) {
          $prefix .= $build['#comment_indent'] <= 0 ? str_repeat('</div></article>', abs($build['#comment_indent']) + 1) : '';
        }

        // Add anchor for each comment.
        $prefix .= "<a id=\"comment-{$comment->id()}\"></a>\n";
        $build['#prefix'] = $prefix;

        // Close all open divs.
        if (!empty($build['#comment_indent_final']) && $build['#weight'] != 0) {
          $build['#suffix'] = str_repeat('</div></article>', $build['#comment_indent_final'] + 1);
        }
        // Case one comment.
        elseif (!empty($build['#comment_indent_final']) && $build['#weight'] == 0) {
          $build['#suffix'] = '</div></article>';
        }
      }
      else {
        $prefix = '';

        // Add indentation div or close open divs as needed.
        if ($build['#comment_threaded']) {
          $prefix .= $build['#comment_indent'] <= 0 ? str_repeat('</div>', abs($build['#comment_indent'])) : "\n" . '<div class="indented">';
        }

        // Add anchor for each comment.
        $prefix .= "<a id=\"comment-{$comment->id()}\"></a>\n";
        $build['#prefix'] = $prefix;

        // Close all open divs.
        if (!empty($build['#comment_indent_final'])) {
          $build['#suffix'] = str_repeat('</div>', $build['#comment_indent_final']);
        }
      }
    }
  }

The other thing I am not very ok with, is that the comment template has not closing markup. It was needed because of the nested structure of the Bootstrap media list. Core adds indentation div but it wraps comments.

Thanks for the review and feedbacks.

This feature is and has been the lowest on the list. Furthermore, it's a radical change that will need some thorough attention from myself, time I simply do not have at the moment.

One day.

Let's see if we can get this in 8.x-4.x.

So, no more updates here? Still moved to low priority?

Styled comments could be really great to improve engagement in our sites.

This theme will not be supported for Bootstrap 4. See alternative themes for this support.