Override field comment template to add comments section classes

agaric/templates/field/field--comment.html.twig

@@ -0,0 +1,56 @@
+{#
+/**
+ * @file
+ * Default theme override for comment fields.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional title output populated by modules, intended to
+ *   be displayed after the main title tag that appears in the template.
+ * - comments: List of comments rendered through comment.html.twig.
+ * - content_attributes: HTML attributes for the form title.
+ * - comment_form: The 'Add new comment' form.
+ * - comment_display_mode: Is the comments are threaded.
+ * - comment_type: The comment type bundle ID for the comment field.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ * @see template_preprocess_field()
+ * @see comment_preprocess_field()
+ */
+#}
+{% if comments %}
+<section{{ attributes.addClass('section comment-section') }} data-headerbg="light">
+  <div class="container">
+  {% if not label_hidden %}
+    <div class="titlebar titlebar-bigborder content">
+      <div class="titlebar_title">
+        {{ title_prefix }}
+        <h3 class="subtitle is-mono is-4">{{ label }}</h3>
+        {{ title_suffix }}
+      </div>
+    </div>
+  {% endif %}
+  {% if comment_form %}
+    <div class="titlebar_links">
+      <a href="#comment-form">Add new comment</a>
+    </div>
+  {% endif %}
+
+  {{ comments }}
+
+  {% if comment_form %}
+    <h3 class="subtitle" id="comment-form">{{ 'Add new comment'|t }}</h3>
+    {{ comment_form }}
+  {% endif %}
+  </div>
+
+</section>
+{% endif %}