Unverified Commit bb592590 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3173007 by mherchel, kishor_kolekar, komalk, raman.b, kostyashupenko,... 

Issue #3173007 by mherchel, kishor_kolekar, komalk, raman.b, kostyashupenko, paulocs, proeung, bnjmnm: [Code Review] Provide a BEM methodology to comments.pcss.css partial
parent 2c460e73

core/themes/olivero/css/components/comments.css

+40 −73
Changes for core/themes/olivero/css/components/comments.css: 40 added lines, 73 removed lines.
Original line number Diff line number Diff line
@@ -10,11 +10,11 @@ 
 * Comment section and individual comments.

 */



.comments > .comment {

.comment--level-1 {

  border-top: 2px solid #e7edf1

}



.comments > .comment ~ .comment {

.comment--level-1 ~ .comment--level-1 {

    margin-top: 2.25rem;

  }
@@ -133,104 +133,67 @@ 
  padding-top: 2.25rem

}



.comment .text-content {

    padding-bottom: 0;

    font-size: 1rem

  }



.comment .text-content blockquote {

      font-size: 1.3125rem;

      line-height: 2.25rem;

    }

@media (min-width: 43.75rem) {



[dir="ltr"] .comment .links {

    margin-left: 0

[dir="ltr"] .comment {

    padding-left: 0

  }



[dir="rtl"] .comment .links {

    margin-right: 0

[dir="rtl"] .comment {

    padding-right: 0

  }



[dir="ltr"] .comment .links {

    margin-right: 0

  }



[dir="rtl"] .comment .links {

    margin-left: 0

.comment__text-content {

  font-size: 1rem

}



[dir="ltr"] .comment .links {

    padding-left: 0

.comment__text-content blockquote {

    font-size: 1.3125rem;

    line-height: 2.25rem;

  }



[dir="rtl"] .comment .links {

    padding-right: 0

}

.comment__text-content {



[dir="ltr"] .comment .links {

    padding-right: 0

  /* Override for .field:not(:last-child) */

}



[dir="rtl"] .comment .links {

    padding-left: 0

.comment__text-content:not(:last-child) {

    margin-bottom: 0;

  }



.comment .links {

.comment__links {

  margin-top: 1.125rem;

  margin-bottom: 0;

    padding-top: 0;

    padding-bottom: 0

}



.comment .links a {

.comment__links-link {

  text-decoration: none;

      color: #0d77b5;

  font-size: 0.875rem;

  font-weight: bold;

  line-height: 1.125rem

}



.comment .links a:hover,

      .comment .links a:focus {

.comment__links-link:hover {

    text-decoration: underline;

  }



[dir="ltr"] .comment .links li {

      margin-right: 1.125rem

}



[dir="rtl"] .comment .links li {

      margin-left: 1.125rem

}



.comment .links li {

      display: inline-block;

    }



@media (min-width: 43.75rem) {



[dir="ltr"] .comment {

    padding-left: 0

    }



[dir="rtl"] .comment {

    padding-right: 0

    }

  }



.add-comment__picture-wrapper.comment-picture {

.add-comment__picture-wrapper {

  top: 2.25rem;

}



[dir="ltr"] .comment-picture__image {

[dir="ltr"] .add-comment__picture,[dir="ltr"] 

.comment__picture {

  left: 0

}



[dir="rtl"] .comment-picture__image {

[dir="rtl"] .add-comment__picture,[dir="rtl"] 

.comment__picture {

  right: 0

}



.comment-picture__image {

.add-comment__picture,

.comment__picture {

  position: absolute;

  overflow: hidden;

  width: 2.25rem;
@@ -239,13 +202,13 @@ 
  background-color: #e7edf1

}



.comment-picture__image *:not(img) {

.add-comment__picture *:not(img), .comment__picture *:not(img) {

    display: inherit;

    width: inherit;

    height: inherit;

  }



.comment-picture__image img {

.add-comment__picture img, .comment__picture img {

    width: 100%;

    height: 100%;

    -o-object-fit: cover;
@@ -256,7 +219,7 @@ 


@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {



.comment-picture__image img {

.add-comment__picture img, .comment__picture img {

      position: absolute;

      /* stylelint-disable csstools/use-logical */

      top: 50%;
@@ -270,15 +233,18 @@ 


@media (min-width: 43.75rem) {



[dir="ltr"] .comment-picture__image {

[dir="ltr"] .add-comment__picture,[dir="ltr"] 

.comment__picture {

    left: -5.625rem

  }



[dir="rtl"] .comment-picture__image {

[dir="rtl"] .add-comment__picture,[dir="rtl"] 

.comment__picture {

    right: -5.625rem

  }



.comment-picture__image {

.add-comment__picture,

.comment__picture {

    width: 3.375rem;

    height: 3.375rem

}
@@ -286,22 +252,23 @@ 


@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {



.comment-picture__image {

.add-comment__picture,

.comment__picture {

    position: relative

}

  }



@media (min-width: 43.75rem) {



[dir="ltr"] .indented .comment-picture__image {

[dir="ltr"] .indented .comment__picture {

    left: -4.5rem

  }



[dir="rtl"] .indented .comment-picture__image {

[dir="rtl"] .indented .comment__picture {

    right: -4.5rem

  }



.indented .comment-picture__image {

.indented .comment__picture {

    width: 2.25rem;

    height: 2.25rem

}

core/themes/olivero/css/components/comments.pcss.css

+21 −30
Changes for core/themes/olivero/css/components/comments.pcss.css: 21 added lines, 30 removed lines.
Original line number Diff line number Diff line
@@ -10,15 +10,13 @@ 
  --comment-indentation--md: var(--sp4);

}



.comments {

  & > .comment {

.comment--level-1 {

  border-block-start: 2px solid var(--color--gray-80);



    & ~ .comment {

  & ~ .comment--level-1 {

    margin-block-start: var(--sp2);

  }

}

}



.comments__title {

  display: flex;
@@ -73,53 +71,46 @@ 
  padding-block-start: var(--sp2);

  padding-inline-start: var(--sp3);



  & .text-content {

    padding-block-end: 0;

  @media (--grid-md) {

    padding-inline-start: 0;

  }

}



.comment__text-content {

  font-size: 16px;



  & blockquote {

    font-size: 21px;

    line-height: var(--sp2);

  }



  /* Override for .field:not(:last-child) */

  &:not(:last-child) {

    margin-block-end: 0;

  }

}



  & .links {

.comment__links {

  margin-block: var(--sp) 0;

    margin-inline-start: 0;

    margin-inline-end: 0;

    padding-block: 0;

    padding-inline-start: 0;

    padding-inline-end: 0;

}



    & a {

.comment__links-link {

  text-decoration: none;

      color: var(--color--blue-20);

  font-size: 14px;

  font-weight: bold;

  line-height: var(--sp);



      &:hover,

      &:focus {

  &:hover {

    text-decoration: underline;

  }

}



    & li {

      display: inline-block;

      margin-inline-end: var(--sp);

    }

  }



  @media (--grid-md) {

    padding-inline-start: 0;

  }

}



.add-comment__picture-wrapper.comment-picture {

.add-comment__picture-wrapper {

  inset-block-start: calc(var(--line-height-base) + var(--sp0-5));

}



.comment-picture__image {

.add-comment__picture,

.comment__picture {

  position: absolute;

  inset-inline-start: 0;

  overflow: hidden;
@@ -163,7 +154,7 @@ 
  }

}



.indented .comment-picture__image {

.indented .comment__picture {

  @media (--grid-md) {

    inset-inline-start: calc(-1 * var(--sp4));

    width: var(--sp2);

core/themes/olivero/olivero.theme

+9 −0
Changes for core/themes/olivero/olivero.theme: 9 added lines, 0 removed lines.
Original line number Diff line number Diff line
@@ -584,3 +584,12 @@ function olivero_preprocess_search_result(&$variables) { 
    $variables['info_date'] = \Drupal::service('date.formatter')->format($variables['result']['node']->getCreatedTime(), 'olivero_medium');

  }

}



/**

 * Implements hook_preprocess_links__comment().

 */

function olivero_preprocess_links__comment(&$variables) {

  foreach ($variables['links'] as &$link) {

    $link['link']['#options']['attributes']['class'][] = 'comment__links-link';

  }

}

core/themes/olivero/templates/content/comment.html.twig

+4 −3
Changes for core/themes/olivero/templates/content/comment.html.twig: 4 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -68,6 +68,7 @@ 
  set classes = [

    'comment',

    'js-comment',

    not parent_comment ? 'comment--level-1',

    status != 'published' ? 'comment--' ~ status,

    comment.owner.anonymous ? 'by-anonymous',

    author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
@@ -75,12 +76,12 @@ 
%}

{{ attach_library('olivero/comments') }}

<article {{ attributes.addClass(classes).setAttribute('role', 'article') }}>

  <div class="comment__picture-wrapper comment-picture">

    <div class="comment__picture comment-picture__image">

  <div class="comment__picture-wrapper">

    <div class="comment__picture">

      {{ user_picture }}

    </div>

  </div>

  <div class="comment__text-content">

  <div class="comment__text-wrapper">

    <footer class="comment__meta">

      <p class="comment__author">{{ author }}</p>

      <p class="comment__time">{{ created }}</p>

core/themes/olivero/templates/field/field--comment-body.html.twig

0 → 100644
+70 −0
Changes for core/themes/olivero/templates/field/field--comment-body.html.twig: 70 added lines, 0 removed lines.
Original line number Diff line number Diff line 
{#

/**

 * @file

 * Olivero's theme override for comment body field.

 *

 * 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.

 * - multiple: TRUE if a field can contain multiple items.

 * - items: List of all the field items. Each item contains:

 *   - attributes: List of HTML attributes for each item.

 *   - content: The field item's content.

 * - 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()

 */

#}

{%

  set classes = [

    'field',

    'field--name-' ~ field_name|clean_class,

    'field--type-' ~ field_type|clean_class,

    'field--label-' ~ label_display,

    label_display == 'inline' ? 'clearfix',

  ]

%}

{%

  set title_classes = [

    'field__label',

    label_display == 'visually_hidden' ? 'visually-hidden',

  ]

%}

{%

  set item_classes = [

    'field__item',

    'comment__text-content',

  ]

%}



{% if label_hidden %}

  {% if multiple %}

    <div{{ attributes.addClass(classes, 'field__items') }}>

      {% for item in items %}

        <div{{ item.attributes.addClass(item_classes) }}>{{ item.content }}</div>

      {% endfor %}

    </div>

  {% else %}

    {% for item in items %}

      <div{{ attributes.addClass(classes, item_classes) }}>{{ item.content }}</div>

    {% endfor %}

  {% endif %}

{% else %}

  <div{{ attributes.addClass(classes) }}>

    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>

    {% if multiple %}

      <div class="field__items">

    {% endif %}

    {% for item in items %}

      <div{{ item.attributes.addClass(item_classes) }}>{{ item.content }}</div>

    {% endfor %}

    {% if multiple %}

      </div>

    {% endif %}

  </div>

{% endif %}