Issue #2398461 by DickJohnson, jp.stacey, idebr, rachel_norfolk, lauriii, Mukeysh, emma.maria: Clean up the "comments" component in Bartik
webchick
parent
d9ed02656e
commit
7141a8dcd1
|
|
@ -3,9 +3,6 @@
|
|||
body {
|
||||
color: #3b3b3b;
|
||||
}
|
||||
.comment .comment-arrow {
|
||||
border-color: #ffffff;
|
||||
}
|
||||
#page,
|
||||
#main-wrapper,
|
||||
.region-primary-menu .menu-item a.active,
|
||||
|
|
|
|||
|
|
@ -1,69 +1,55 @@
|
|||
/* ----------------- 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);
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 97 B |
Binary file not shown.
|
Before Width: | Height: | Size: 97 B |
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue