Commit 7141a8dc authored by webchick's avatar webchick

Issue #2398461 by DickJohnson, jp.stacey, idebr, rachel_norfolk, lauriii,...

Issue #2398461 by DickJohnson, jp.stacey, idebr, rachel_norfolk, lauriii, Mukeysh, emma.maria: Clean up the "comments" component in Bartik
parent d9ed0265
......@@ -3,9 +3,6 @@
body {
color: #3b3b3b;
}
.comment .comment-arrow {
border-color: #ffffff;
}
#page,
#main-wrapper,
.region-primary-menu .menu-item a.active,
......
/* ----------------- Comments ----------------- */
/**
* @file
* Visual styles for comments in Bartik.
*/
.comment h2.title {
/* This is required to win over specificity of #content h2 */
#content .comment-wrapper h2 {
margin-bottom: 1em;
}
.comment .field-name-field-user-picture img {
margin-left: 0; /* LTR */
}
[dir="rtl"] .comment .field-name-field-user-picture img {
margin-right: 0;
}
.comment {
margin-bottom: 20px;
display: table;
vertical-align: top;
}
.comment .attribution {
.comment__attribution {
display: table-cell;
padding: 0 30px 0 0; /* LTR */
vertical-align: top;
overflow: hidden;
}
[dir="rtl"] .comment .attribution {
[dir="rtl"] .comment__attribution {
float: right;
padding: 0 0 0 30px;
}
.comment .attribution img {
margin: 0;
.comment__attribution img {
border: 1px solid #d3d7d9;
}
.comment .attribution .username {
/* This is required to win over specificity of .field-type-image img */
.comment .field-name-user-picture img {
margin: 0;
}
.comment__author .username {
white-space: nowrap;
}
.comment .submitted p {
.comment__submitted__data {
margin: 4px 0;
font-size: 1.071em;
line-height: 1.2;
}
.comment .submitted .comment-time {
.comment__time {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.786em;
color: #68696b;
}
.comment .submitted .comment-permalink {
.comment__permalink {
font-size: 0.786em;
}
.comment .content {
.comment__content {
font-size: 0.929em;
line-height: 1.6;
}
.comment .comment-arrow {
background: url(../../images/comment-arrow.gif) no-repeat 0 center transparent; /* LTR */
border-left: 1px solid;
border-right: 1px solid;
height: 40px;
margin-left: -47px; /* LTR */
margin-top: 10px;
position: absolute;
width: 20px;
}
[dir="rtl"] .comment .comment-arrow {
background-image: url(../../images/comment-arrow-rtl.gif);
margin-left: 0;
margin-right: -47px;
}
.comment .comment-text {
.comment__text {
padding: 10px 25px;
border: 1px solid #d3d7d9;
display: table-cell;
......@@ -71,6 +57,39 @@
position: relative;
width: 100%;
}
.comment__text:before {
content: '';
position: absolute;
right: 100%; /* LTR */
top: 20px;
border-top: 20px solid transparent;
border-right: 20px solid #d3d7d9; /* LTR */
border-bottom: 20px solid transparent;
}
[dir="rtl"] .comment__text:before {
right: auto;
left: 100%;
border-right: none;
border-left: 20px solid #d3d7d9;
}
.comment__text:after {
content: '';
position: absolute;
right: 100%; /* LTR */
top: 20px;
border-top: 20px solid transparent;
border-right: 20px solid #fff; /* LTR */
border-bottom: 20px solid transparent;
margin-right: -1px; /* LTR */
}
[dir="rtl"] .comment__text:after {
right: auto;
left: 100%;
border-right: none;
border-left: 20px solid #fff;
margin-right: 0;
margin-left: -1px;
}
.comment .indented {
margin-left: 40px; /* LTR */
}
......@@ -87,12 +106,12 @@
[dir="rtl"] .comment ul.links li {
padding: 0 0 0 0.5em;
}
.comment.unpublished {
.comment--unpublished {
margin-right: 5px; /* LTR */
padding: 5px 2px 5px 5px; /* LTR */
background: #fff4f4;
}
[dir="rtl"] .comment.unpublished {
[dir="rtl"] .comment--unpublished {
margin-left: 5px;
margin-right: 0;
padding: 5px 5px 5px 2px;
......@@ -100,3 +119,11 @@
.comment-footer {
display: table-row;
}
.comment--unpublished .comment__text:after,
.node--unpublished .comment__text:after {
border-right-color: #fff4f4; /* LTR */
}
[dir="rtl"] .comment--unpublished .comment__text:after,
[dir="rtl"] .node--unpublished .comment__text:after {
border-left-color: #fff4f4;
}
......@@ -123,11 +123,6 @@ ul.links {
.unpublished {
padding: 20px 15px 0;
}
.node--unpublished .comment-text .comment-arrow,
.unpublished .comment-text .comment-arrow {
border-left: 1px solid #fff4f4;
border-right: 1px solid #fff4f4;
}
.node-preview-container {
background: #d1e8f5;
background-image: -webkit-linear-gradient(top, #d1e8f5, #d3e8f4);
......
......@@ -67,7 +67,7 @@
{%
set classes = [
'comment',
status != 'published' ? status,
status != 'published' ? 'comment--' ~ status,
comment.owner.anonymous ? 'by-anonymous',
author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
'clearfix',
......@@ -75,25 +75,24 @@
%}
<article role="article"{{ attributes.addClass(classes)|without('role') }}>
<header class="comment-header">
<div class="attribution">
<div class="comment__attribution">
{{ user_picture }}
<div class="submitted">
<p class="commenter-name">{{ author }}</p>
<p class="comment-time">{{ created }}</p>
<p class="comment-permalink">{{ permalink }}</p>
<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="comment-parent visually-hidden">{{ parent }}</p>
<p class="visually-hidden">{{ parent }}</p>
{% endif %}
</div>
</div>
</header>
<div class="comment-text">
<div class="comment-arrow"></div>
<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
......@@ -105,10 +104,10 @@
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
<div{{ content_attributes.addClass('content') }}>
<div{{ content_attributes.addClass('comment__content') }}>
{{ content|without('links') }}
</div>
<footer class="comment-footer">
<footer class="comment__footer">
{% if signature %}
<div class="user-signature clearfix">{{ signature }}</div>
{% endif %}
......
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