Skip to content
Snippets Groups Projects
Commit d4011a54 authored by Alex Pott's avatar Alex Pott
Browse files

Issue #2031883 by mortendk, rachel_norfolk, andypost, zestagio, epari.siva,... 

Issue #2031883 by mortendk, rachel_norfolk, andypost, zestagio, epari.siva, nguerrier, Manjit.Singh, rteijeiro, MathieuSpil, pablo.guerino, HOG, lauriii, LewisNyman, joelpittet, Wim Leers, Cottser, minneapolisdan: Markup for: comment.html.twig
parent b80a4b62
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
core/modules/comment/js/comment-new-indicator.js
+ 1
− 1
View file @ d4011a54
......@@ -65,7 +65,7 @@
var $comment = $(placeholder)
.removeClass('hidden')
.text(newCommentString)
.closest('.comment')
.closest('.js-comment')
// Add 'new' class to the comment, so it can be styled.
.addClass('new');
......
core/modules/comment/templates/comment.html.twig
+ 13
− 21
View file @ d4011a54
......@@ -67,32 +67,22 @@
*/
#}
<article{{ attributes }}>
{% if title %}
{{ title_prefix }}
{% endif %}
<article{{ attributes.addClass('js-comment') }}>
{#
Hide the "new" indicator by default, let a piece of JavaScript ask
the server which comments are new for the user. Rendering the final
"new" indicator here would break the render cache.
Hide the "new" indicator by default, let a piece of JavaScript ask the
server which comments are new for the user. Rendering the final "new"
indicator here would break the render cache.
#}
<mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
{% if title %}
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
<footer>
{{ user_picture }}
<p>{{ submitted }}</p>
{#
Indicate the semantic relationship between parent and child comments
for accessibility. The list is difficult to navigate in a screen
reader without this information.
Indicate the semantic relationship between parent and child comments for
accessibility. The list is difficult to navigate in a screen reader
without this information.
#}
{% if parent %}
<p class="visually-hidden">{{ parent }}</p>
......@@ -102,9 +92,11 @@
</footer>
<div{{ content_attributes }}>
{{ content|without('links') }}
{% if title %}
{{ title_prefix }}
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
{{ content }}
</div>
{% if content.links %}
{{ content.links }}
{% endif %}
</article>
core/themes/bartik/css/components/comments.css
+ 46
− 34
View file @ d4011a54
......@@ -7,19 +7,23 @@
#content .comment-wrapper h2 {
margin-bottom: 1em;
}
#content .comment-wrapper h2.comment-form__title {
margin-bottom: 1em;
}
.comment {
margin-bottom: 20px;
display: table;
margin-bottom: 19px;
vertical-align: top;
display: table;
}
.comment__attribution {
display: table-cell;
[dir="rtl"] .comment {
direction: rtl;
}
.comment__meta {
padding: 0 30px 0 0; /* LTR */
vertical-align: top;
overflow: hidden;
font-size: 1.071em;
}
[dir="rtl"] .comment__attribution {
float: right;
[dir="rtl"] .comment__meta {
padding: 0 0 0 30px;
}
.comment__attribution img {
......@@ -32,32 +36,34 @@
.comment__author .username {
white-space: nowrap;
}
.comment__submitted__data {
.comment__author {
margin: 4px 0;
font-size: 1.071em;
line-height: 1.2;
}
.comment__time {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.786em;
margin-bottom: 4px;
color: #68696b;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.733em;
line-height: 1.2;
}
.comment__permalink {
font-size: 0.786em;
font-size: 0.733em;
line-height: 1.2;
}
.comment__content {
font-size: 0.929em;
line-height: 1.6;
}
.comment__text {
padding: 10px 25px;
border: 1px solid #d3d7d9;
position: relative;
display: table-cell;
padding: 10px 25px 10px 25px;
vertical-align: top;
position: relative;
width: 100%;
border: 1px solid #d3d7d9;
font-size: 0.929em;
line-height: 1.6;
}
.comment__text:before {
.comment__content:before {
content: '';
position: absolute;
right: 100%; /* LTR */
......@@ -66,13 +72,13 @@
border-right: 20px solid #d3d7d9; /* LTR */
border-bottom: 20px solid transparent;
}
[dir="rtl"] .comment__text:before {
[dir="rtl"] .comment__content:before {
right: auto;
left: 100%;
border-right: none;
border-left: 20px solid #d3d7d9;
}
.comment__text:after {
.comment__content:after {
content: '';
position: absolute;
right: 100%; /* LTR */
......@@ -82,7 +88,7 @@
border-bottom: 20px solid transparent;
margin-right: -1px; /* LTR */
}
[dir="rtl"] .comment__text:after {
[dir="rtl"] .comment__content:after {
right: auto;
left: 100%;
border-right: none;
......@@ -90,6 +96,14 @@
margin-right: 0;
margin-left: -1px;
}
.comment__content h3 {
margin-top: 0.94em;
margin-bottom: 0.45em;
font-size: 1.171em;
}
.comment__content nav {
padding-top: 1px;
}
.comment .indented {
margin-left: 40px; /* LTR */
}
......@@ -97,13 +111,14 @@
margin-right: 40px;
margin-left: 0;
}
.comment ul.links {
.comment .links {
padding: 0 0 0.25em 0;
}
.comment ul.links li {
.comment .links li {
padding: 0 0.5em 0 0; /* LTR */
font-size: 1.08em;
}
[dir="rtl"] .comment ul.links li {
[dir="rtl"] .comment .links li {
padding: 0 0 0 0.5em;
}
.comment--unpublished {
......@@ -116,14 +131,11 @@
margin-right: 0;
padding: 5px 5px 5px 2px;
}
.comment-footer {
display: table-row;
}
.comment--unpublished .comment__text:after,
.node--unpublished .comment__text:after {
.comment--unpublished .comment__content:after,
.node--unpublished .comment__content:after {
border-right-color: #fff4f4; /* LTR */
}
[dir="rtl"] .comment--unpublished .comment__text:after,
[dir="rtl"] .node--unpublished .comment__text:after {
[dir="rtl"] .comment--unpublished .comment__content:after,
[dir="rtl"] .node--unpublished .comment__content:after {
border-left-color: #fff4f4;
}
core/themes/bartik/templates/comment.html.twig
+ 27
− 32
View file @ d4011a54
......@@ -70,6 +70,7 @@
{%
set classes = [
'comment',
'js-comment',
status != 'published' ? 'comment--' ~ status,
comment.owner.anonymous ? 'by-anonymous',
author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
......@@ -77,43 +78,37 @@
]
%}
<article role="article"{{ attributes.addClass(classes)|without('role') }}>
<header class="comment-header">
<div class="comment__attribution">
{{ user_picture }}
<div class="comment__submitted">
<p class="comment__author comment__submitted__data">{{ author }}</p>
<p class="comment__time comment__submitted__data">{{ created }}</p>
<p class="comment__permalink comment__submitted__data">{{ permalink }}</p>
{#
// Indicate the semantic relationship between parent and child comments
// for accessibility. The list is difficult to navigate in a screen
// reader without this information.
#}
{% if parent %}
<p class="visually-hidden">{{ parent }}</p>
{% endif %}
</div>
</div>
</header>
<div class="comment__text">
{#
Hide the "new" indicator by default, let a piece of JavaScript ask the
server which comments are new for the user. Rendering the final "new"
indicator here would break the render cache.
#}
<span class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
<footer class="comment__meta">
{{ user_picture }}
<p class="comment__author">{{ author }}</p>
<p class="comment__time">{{ created }}</p>
<p class="comment__permalink">{{ permalink }}</p>
{#
Hide the "new" indicator by default, let a piece of JavaScript ask
the server which comments are new for the user. Rendering the final
"new" indicator here would break the render cache.
Indicate the semantic relationship between parent and child comments
for accessibility. The list is difficult to navigate in a screen
reader without this information.
#}
<span class="hidden new" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
{% if parent %}
<p class="visually-hidden">{{ parent }}</p>
{% endif %}
</footer>
<div{{ content_attributes.addClass('comment__content') }}>
{% if title %}
{{ title_prefix }}
<h3{{ title_attributes }}>{{ title }}</h3>
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
<div{{ content_attributes.addClass('comment__content') }}>
{{ content|without('links') }}
</div>
<footer class="comment__footer">
{% if content.links %}
<nav>{{ content.links }}</nav>
{% endif %}
</footer>
{{ content|without('links') }}
{% if content.links %}
<nav>{{ content.links }}</nav>
{% endif %}
</div>
</article>
core/themes/classy/templates/content/comment.html.twig
+ 15
− 23
View file @ d4011a54
......@@ -70,38 +70,28 @@
{%
set classes = [
'comment',
'js-comment',
status != 'published' ? status,
comment.owner.anonymous ? 'by-anonymous',
author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
'clearfix',
]
%}
<article{{ attributes.addClass(classes) }}>
{% if title %}
{{ title_prefix }}
{% endif %}
{#
Hide the "new" indicator by default, let a piece of JavaScript ask
the server which comments are new for the user. Rendering the final
"new" indicator here would break the render cache.
Hide the "new" indicator by default, let a piece of JavaScript ask the
server which comments are new for the user. Rendering the final "new"
indicator here would break the render cache.
#}
<mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
{% if title %}
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
<footer>
<footer class="comment__meta">
{{ user_picture }}
<p class="submitted">{{ submitted }}</p>
<p class="comment__submitted">{{ submitted }}</p>
{#
Indicate the semantic relationship between parent and child comments
for accessibility. The list is difficult to navigate in a screen
reader without this information.
Indicate the semantic relationship between parent and child comments for
accessibility. The list is difficult to navigate in a screen reader
without this information.
#}
{% if parent %}
<p class="parent visually-hidden">{{ parent }}</p>
......@@ -111,9 +101,11 @@
</footer>
<div{{ content_attributes.addClass('content') }}>
{{ content|without('links') }}
{% if title %}
{{ title_prefix }}
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
{{ content }}
</div>
{% if content.links %}
{{ content.links }}
{% endif %}
</article>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment