diff --git a/core/themes/olivero/css/components/comments.css b/core/themes/olivero/css/components/comments.css index 7336becda4a60f07069867aa2439eac0cf0e4adf..06c41a9fcba933b60cc252226f0573d96a523403 100644 --- a/core/themes/olivero/css/components/comments.css +++ b/core/themes/olivero/css/components/comments.css @@ -10,13 +10,13 @@ * Comment section and individual comments. */ -.comments > .comment { - border-top: 2px solid #e7edf1 - } +.comment--level-1 { + border-top: 2px solid #e7edf1 +} -.comments > .comment ~ .comment { - margin-top: 2.25rem; - } +.comment--level-1 ~ .comment--level-1 { + margin-top: 2.25rem; + } .comments__title { display: flex; @@ -113,11 +113,11 @@ [dir="ltr"] .add-comment__form { padding-left: 0 - } + } [dir="rtl"] .add-comment__form { padding-right: 0 - } + } } [dir="ltr"] .comment { @@ -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; - } - -[dir="ltr"] .comment .links { - margin-left: 0 -} - -[dir="rtl"] .comment .links { - margin-right: 0 -} - -[dir="ltr"] .comment .links { - margin-right: 0 -} - -[dir="rtl"] .comment .links { - margin-left: 0 -} +@media (min-width: 43.75rem) { -[dir="ltr"] .comment .links { +[dir="ltr"] .comment { padding-left: 0 -} + } -[dir="rtl"] .comment .links { +[dir="rtl"] .comment { padding-right: 0 -} + } + } -[dir="ltr"] .comment .links { - padding-right: 0 +.comment__text-content { + font-size: 1rem } -[dir="rtl"] .comment .links { - padding-left: 0 +.comment__text-content blockquote { + font-size: 1.3125rem; + line-height: 2.25rem; + } + +.comment__text-content { + + /* Override for .field:not(:last-child) */ } -.comment .links { - margin-top: 1.125rem; +.comment__text-content:not(:last-child) { margin-bottom: 0; - padding-top: 0; - padding-bottom: 0 } -.comment .links a { - text-decoration: none; - color: #0d77b5; - font-size: 0.875rem; - font-weight: bold; - line-height: 1.125rem - } - -.comment .links a:hover, - .comment .links a:focus { - text-decoration: underline; - } - -[dir="ltr"] .comment .links li { - margin-right: 1.125rem +.comment__links { + margin-top: 1.125rem; + margin-bottom: 0; } -[dir="rtl"] .comment .links li { - margin-left: 1.125rem +.comment__links-link { + text-decoration: none; + font-size: 0.875rem; + font-weight: bold; + line-height: 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 - } +.comment__links-link:hover { + text-decoration: underline; } -.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 } @@ -374,22 +341,22 @@ [dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { left: -3.375rem - } + } [dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { right: -3.375rem - } + } } @media (min-width: 43.75rem) { [dir="ltr"] .indented { margin-left: 4.5rem - } + } [dir="rtl"] .indented { margin-right: 4.5rem - } + } } [dir="ltr"] .show-hide-btn { @@ -453,9 +420,9 @@ [dir="ltr"] .show-hide-btn { margin-left: 0 - } + } [dir="rtl"] .show-hide-btn { margin-right: 0 - } + } } diff --git a/core/themes/olivero/css/components/comments.pcss.css b/core/themes/olivero/css/components/comments.pcss.css index cb095913ae143ba0ec3b052fc5cd04f767262a86..823e5eed2be5f9d3bcc60307a6cc006ce0542866 100644 --- a/core/themes/olivero/css/components/comments.pcss.css +++ b/core/themes/olivero/css/components/comments.pcss.css @@ -10,13 +10,11 @@ --comment-indentation--md: var(--sp4); } -.comments { - & > .comment { - border-block-start: 2px solid var(--color--gray-80); +.comment--level-1 { + border-block-start: 2px solid var(--color--gray-80); - & ~ .comment { - margin-block-start: var(--sp2); - } + & ~ .comment--level-1 { + margin-block-start: var(--sp2); } } @@ -73,53 +71,46 @@ padding-block-start: var(--sp2); padding-inline-start: var(--sp3); - & .text-content { - padding-block-end: 0; - font-size: 16px; - - & blockquote { - font-size: 21px; - line-height: var(--sp2); - } + @media (--grid-md) { + padding-inline-start: 0; } +} - & .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 { - text-decoration: none; - color: var(--color--blue-20); - font-size: 14px; - font-weight: bold; - line-height: var(--sp); - - &:hover, - &:focus { - text-decoration: underline; - } - } +.comment__text-content { + font-size: 16px; - & li { - display: inline-block; - margin-inline-end: var(--sp); - } + & blockquote { + font-size: 21px; + line-height: var(--sp2); } - @media (--grid-md) { - padding-inline-start: 0; + /* Override for .field:not(:last-child) */ + &:not(:last-child) { + margin-block-end: 0; + } +} + +.comment__links { + margin-block: var(--sp) 0; +} + +.comment__links-link { + text-decoration: none; + font-size: 14px; + font-weight: bold; + line-height: var(--sp); + + &:hover { + text-decoration: underline; } } -.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); diff --git a/core/themes/olivero/olivero.theme b/core/themes/olivero/olivero.theme index 38ae150e7afdf72059e50751266b2fefbdf27e82..4da309a1d641479f3a6bbbd456bdc44e48a06fbe 100644 --- a/core/themes/olivero/olivero.theme +++ b/core/themes/olivero/olivero.theme @@ -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'; + } +} diff --git a/core/themes/olivero/templates/content/comment.html.twig b/core/themes/olivero/templates/content/comment.html.twig index 1c66547215016a78f044933f3ce81ca462c43e16..01dacdefd382dff34fbd28f96177e13624b796d9 100644 --- a/core/themes/olivero/templates/content/comment.html.twig +++ b/core/themes/olivero/templates/content/comment.html.twig @@ -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> diff --git a/core/themes/olivero/templates/field/field--comment-body.html.twig b/core/themes/olivero/templates/field/field--comment-body.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..f36894176f12891351ce54dff194495888a8e92f --- /dev/null +++ b/core/themes/olivero/templates/field/field--comment-body.html.twig @@ -0,0 +1,70 @@ +{# +/** + * @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 %} diff --git a/core/themes/olivero/templates/field/field--comment.html.twig b/core/themes/olivero/templates/field/field--comment.html.twig index 648f77cf4dadcff7cb4d80f51a9bc406ea973efc..b0ffc250d1d0874132cdb9640164e23eb7411c9d 100644 --- a/core/themes/olivero/templates/field/field--comment.html.twig +++ b/core/themes/olivero/templates/field/field--comment.html.twig @@ -40,8 +40,8 @@ {% if comment_form %} <div class="add-comment"> {% if user_picture %} - <div class="add-comment__picture-wrapper comment-picture"> - <div class="add-comment__picture comment-picture__image"> + <div class="add-comment__picture-wrapper"> + <div class="add-comment__picture"> {{ user_picture }} </div> </div> diff --git a/core/themes/olivero/templates/navigation/links--comment.html.twig b/core/themes/olivero/templates/navigation/links--comment.html.twig new file mode 100644 index 0000000000000000000000000000000000000000..83262ce6da1d14964b9d6d48c538c44df838b0cc --- /dev/null +++ b/core/themes/olivero/templates/navigation/links--comment.html.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * Olivero's theme override for comment links. + * + * Available variables: + * - attributes: Attributes for the UL containing the list of links. + * - links: Links to be output. + * Each link will have the following elements: + * - title: The link text. + * - href: The link URL. If omitted, the 'title' is shown as a plain text + * item in the links list. If 'href' is supplied, the entire link is passed + * to l() as its $options parameter. + * - attributes: (optional) HTML attributes for the anchor, or for the <span> + * tag if no 'href' is supplied. + * - heading: (optional) A heading to precede the links. + * - text: The heading text. + * - level: The heading level (e.g. 'h2', 'h3'). + * - attributes: (optional) A keyed list of attributes for the heading. + * If the heading is a string, it will be used as the text of the heading and + * the level will default to 'h2'. + * + * Headings should be used on navigation menus and any list of links that + * consistently appears on multiple pages. To make the heading invisible use + * the 'visually-hidden' CSS class. Do not use 'display:none', which + * removes it from screen readers and assistive technology. Headings allow + * screen reader and keyboard only users to navigate to or skip the links. + * See http://juicystudio.com/article/screen-readers-display-none.php and + * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. + * + * @see template_preprocess_links() + */ +#} +{% + set classes = [ + 'comment__links', + ] +%} +{% if links -%} + {%- if heading -%} + {%- if heading.level -%} + <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}> + {%- else -%} + <h2{{ heading.attributes }}>{{ heading.text }}</h2> + {%- endif -%} + {%- endif -%} + <ul{{ attributes.addClass(classes) }}> + {% for item in links %} + <li{{ item.attributes.addClass('comment__links-item') }}> + {%- if item.link -%} + {{ item.link }} + {%- elseif item.text_attributes -%} + <span{{ item.text_attributes }}>{{ item.text }}</span> + {%- else -%} + {{ item.text }} + {%- endif -%} + </li> + {% endfor %} + </ul> +{%- endif %}