summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-07-30 11:33:32 (GMT)
committerAlex Pott2015-07-30 11:33:32 (GMT)
commitd4011a542322a82a9bbf7dd0412e01a0736ca49b (patch)
treea2c558b9aeee613b750a68c388e188a80fff62e1
parentb80a4b62937d5c18150ae00a6171a8e6a8015123 (diff)
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
-rw-r--r--core/modules/comment/js/comment-new-indicator.js2
-rw-r--r--core/modules/comment/templates/comment.html.twig34
-rw-r--r--core/themes/bartik/css/components/comments.css80
-rw-r--r--core/themes/bartik/templates/comment.html.twig59
-rw-r--r--core/themes/classy/templates/content/comment.html.twig38
5 files changed, 102 insertions, 111 deletions
diff --git a/core/modules/comment/js/comment-new-indicator.js b/core/modules/comment/js/comment-new-indicator.js
index 8a2bf07..7567963 100644
--- a/core/modules/comment/js/comment-new-indicator.js
+++ b/core/modules/comment/js/comment-new-indicator.js
@@ -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');
diff --git a/core/modules/comment/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 31b82e2..14c52eb 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -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>
diff --git a/core/themes/bartik/css/components/comments.css b/core/themes/bartik/css/components/comments.css
index 9f22c51..8515cd9 100644
--- a/core/themes/bartik/css/components/comments.css
+++ b/core/themes/bartik/css/components/comments.css
@@ -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;
}
diff --git a/core/themes/bartik/templates/comment.html.twig b/core/themes/bartik/templates/comment.html.twig
index 2dac831..8927db4 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -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>
diff --git a/core/themes/classy/templates/content/comment.html.twig b/core/themes/classy/templates/content/comment.html.twig
index bb06364..25e7d37 100644
--- a/core/themes/classy/templates/content/comment.html.twig
+++ b/core/themes/classy/templates/content/comment.html.twig
@@ -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>