Commit d4011a54 authored by alexpott's avatar alexpott

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
......@@ -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');
......
......@@ -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>
......@@ -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;
}
......@@ -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>
......@@ -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>
Markdown is supported
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