Commit e1c57032 authored by Emma's avatar Emma 🦉

show comment context/refactor comments to use BEM

parent 32b6f4c2
......@@ -6,15 +6,13 @@ import Translator from 'bazinga-translator';
// load comment forms via ajax
$(function () {
$('.comment-nav-reply').show();
// hide open forms (they're initially visible for non-js users)
$('.comment .comment-form').hide();
$('.comment-nav-reply a[data-form-url]').click(function (event) {
$('.comment__reply-link').click(function (event) {
event.preventDefault();
const $parent = $(this).closest('.comment-inner');
const $parent = $(this).closest('.comment__main');
const $existingForm = $parent.find('> .comment-form');
// remove existing error messages
......
@import (reference) 'mixins';
@import (reference) 'settings';
.comment {
border: solid 1px @comment-border-color;
margin-bottom: 1rem;
padding-top: 0.5rem;
&:target > .comment-row {
background: @comment-highlight-background;
border: dotted 1px;
}
.comment-replies & {
// let inner replies have a smaller margin
margin: 0 0.5rem 0.5rem;
}
.comment-body {
padding-right: 0.5rem;
word-wrap: break-word;
}
}
.comment-info {
.meta;
font-weight: normal;
}
.comment-row {
.vote-flex;
}
.comment-nav {
.meta-nav;
ul {
margin-bottom: 0.5rem;
}
}
/*
* 1. Hide label in comment form.
*/
......
@import (reference) '../mixins';
@import (reference) '../settings';
/*
* <article class="comment">
* <div class="comment__context">optional context thing</p>
*
* <div class="comment__row">
* <div class="comment__vote">...</div>
*
* <div class="comment__main">
* <h1 class="comment__info">...</h1>
* <div class="comment__body">...</div>
* <nav class="comment__nav">...</nav>
* </div>
* </div>
*
* <!-- exists only with replies -->
* <div class="comment__replies">
* <article class="comment">...</article>
* <article class="comment">...</article>
* </div>
* </article>
*/
.comment {
background: @page-background-color;
border: solid 1px @comment-border-color;
display: flex;
flex-direction: column;
margin-bottom: 1rem;
// new approach to borders - may or may not deprecate the old approach
&--with-context {
border-width: 0 0 1px;
& > .comment {
&__row {
border: solid @comment-border-color;
border-width: 1px 1px 0;
}
&__replies {
border: solid @comment-border-color;
border-width: 0 1px 0px 1px;
}
}
}
&__context {
p {
.meta;
margin-bottom: 0;
}
}
&__row {
.vote-flex;
padding-top: 0.5rem;
}
&__replies {
display: flex;
flex-direction: column;
padding: 0 0.5rem;
}
&__info {
.meta;
font-weight: normal;
}
&__body {
padding-right: 0.5rem;
word-wrap: break-word;
}
&__nav {
.meta-nav;
ul {
margin-bottom: 0.5rem;
}
}
&--nested {
margin-bottom: 0.5rem;
}
&:target {
border-bottom: dotted 1px;
& > .comment__row {
background: @comment-highlight-background;
border: dotted 1px;
border-width: 1px 1px 0;
}
& > .comment__replies {
background: @comment-highlight-background;
border: dotted 1px;
border-width: 0 1px;
}
}
}
......@@ -9,6 +9,7 @@
@import 'components/alert';
@import 'components/button';
@import 'components/clear-notification-button';
@import 'components/comment';
@import 'components/diff-table';
@import 'components/form';
@import 'components/icon';
......
Deprecated CSS classes
===
From time to time, Postmill's HTML is cleaned up and things are renamed or
otherwise changed around. In order to maintain backward compatibility with
themes, we may deprecate classes/IDs/particular HTML elements, but still keep
them in the code for some time longer while we wait for authors to update their
themes. This document describes the CSS classes that are on the chopping block.
## To be removed in September 2018
Comment classes have finally being updated to follow BEM conventions:
* `.comment-top-level` -- use `.comment--top-level` instead
* `.comment-level-*` classes were deprecated in favour of the `data-level`
attribute -- access it via the `attr()` CSS function. The `.comment--nested`
class was added for matching nested comments.
* `.comment-soft-deleted` -- use `.comment--soft-deleted` instead
* `.comment-row` -- use `.comment__row` instead. Note: due to an error, there
was always a duplicate `.comment-row` class that wraps an input row in the
comment form. As this isn't part of the 'comment' component, it remains
unaffected.
* `.comment-inner` -- use `.comment__main` instead
* `.comment-info` -- use `.comment__info` instead
* `.comment-timestamp` -- use `.comment__timestamp` instead
* `.comment-user` -- use `.comment__author` instead
* `.comment-info-edited-at` -- use `.comment__edited-at` instead
* `.comment-info-moderated` -- use `.comment__moderated` instead
* `.comment-body` -- use `.comment__body` instead
* `.comment-nav` -- use `.comment__nav` instead
* `.comment-replies` -- use `.comment__replies` instead
* `.comment-nav-reply` -- use the nested `.comment__reply-link` instead
## Removed in May 2018
The following classes have been **removed** with no deprecation period:
* `.comment-nav-permalink` -- use the nested `.comment__permalink` instead
* `.comment-nav-parent` -- use the nested `.comment__parent-link` instead
* `.comment-nav-softdelete` -- use the nested `.comment__soft-delete-button`
instead
* `.comment-nav-delete-thread` -- use the nested
`.comment__thread-delete-button` instead
* `.comment-nav-edit` -- use the nested `.comment__edit-link` instead. By a
mistake, this class also applied to the `<li>` element of the IP ban link.
That link now has its own `.comment__ip-ban-link` class.
## Removed in April 2018
* `.submission-meta` replaces the following class names:
* `.sidebar__section--submission-meta`
* `.sidebar-submission-meta`
* `.submission-meta__vote-stats` replaces `.vote-stats`.
* `.submission-meta__vote-total` replaces `.vote-total`.
## Removed in January 2018
* `.active`, which is applied to the active list element in `.submission-sort`
and `.forum-list-view-selector`, will be removed. These navs now have the
`.tabs` class, and active elements are indicated with `.tabs__tab--active`
(for list elements) and `.tabs__link--active` (for links). Use these classes
to target active elements instead.
......@@ -4,6 +4,7 @@
* **Reference**
* [Deprecated CSS classes](deprecated-css-classes.md)
* [Webhooks](webhooks.md)
* **Configuration & administration**
......
{#
# Options:
#
# - recurse (bool): true
# - show_form (bool): false
#}
{% macro comment(comment, options) %}
{{- block('comment') -}}
{%- with {
comment: comment,
level: 1,
recurse: options.recurse ?? false,
show_context: options.show_context ?? false,
show_form: options.show_form ?? false,
} only -%}
{{- block('comment') -}}
{%- endwith -%}
{% endmacro %}
{% macro comment_form(submission, parent) %}
......@@ -37,21 +39,31 @@
{%- block comment -%}
{%- from 'vote/_macros.html.twig' import vote -%}
<article class="comment comment-{{ level|default(0) ? 'level-'~level : 'top-level' }} {{ comment.softDeleted ? 'comment-soft-deleted' }}" id="comment_{{ comment.id }}">
<div class="comment-row">
<div class="comment-vote">
<article class="comment
comment--{{ level > 1 ? 'nested' : 'top-level' }}
comment-{{ level > 1 ? 'level-'~(level - 1) : 'top-level' }}
{{ show_context ? 'comment--with-context' }}
{{ comment.softDeleted ? 'comment--soft-deleted comment-soft-deleted' }}"
id="comment_{{ comment.id }}"
data-level="{{ level }}">
{% if show_context %}
{{- block('comment_context') -}}
{% endif %}
<div class="comment__row comment-row">
<div class="comment__vote comment-vote">
{{ vote(comment, 'comment_vote') }}
</div>
<div class="comment-inner">
<h1 class="comment-info">
<div class="comment__main comment-inner">
<h1 class="comment__info comment-info">
{{ 'comments.info'|trans({
'%user%': block('comment_info_user'),
'%timestamp%': block('comment_info_timestamp'),
})|raw }}
{% if comment.editedAt %}
<span class="comment-info-edited-at {{ comment.moderated ? 'comment-info-moderated' }}">
<span class="comment__edited-at comment-info-edited-at {{ comment.moderated ? 'comment__moderated comment-info-moderated' }}">
{{ (comment.moderated ? 'comments.moderator_info' : 'comments.edit_info')|trans({
'%edited_at%': block('comment_info_edited_at')
})|raw }}
......@@ -59,25 +71,25 @@
{% endif %}
</h1>
<div class="comment-body">
<div class="comment__body comment-body">
{{ comment.body|cached_markdown(markdown_context())|raw }}
</div>
<nav class="comment-nav">
<nav class="comment__nav comment-nav">
<ul>{{ block('comment_nav') }}</ul>
</nav>
{% if options.show_form ?? false and is_granted('ROLE_USER') %}
{% if show_form and is_granted('ROLE_USER') %}
{% from _self import comment_form %}
{{ comment_form(comment.submission, comment) }}
{% endif %}
</div>
</div>
{% if options.recurse ?? true and comment.children|length > 0 %}
<div class="comment-replies">
{% if recurse and comment.children|length > 0 %}
<div class="comment__replies comment-replies">
{%- for reply in comment.children -%}
{%- with { comment: reply, level: level|default(0) + 1} only -%}
{%- with { comment: reply, level: level + 1 } -%}
{{- block('comment') -}}
{%- endwith -%}
{%- endfor -%}
......@@ -86,12 +98,38 @@
</article>
{%- endblock -%}
{% block comment_context %}
{% from 'user/_macros.html.twig' import user_link %}
{% with { submission: comment.submission, forum: comment.submission.forum } %}
<div class="comment__context">
{% if comment.parent %}
<p>{{ 'comments.context.comment_reply'|trans({
'%comment_author%': user_link(comment.parent.user, {prefix: true}),
'%submission_title%': '<a href="%s">%s</a>'|format(
path('submission', {forum_name: forum.name, submission_id: submission.id})|e,
submission.title|e
),
'%submission_author%': user_link(submission.user, {prefix: true}),
})|raw }}</p>
{% else %}
<p>{{ 'comments.context.top_level_reply'|trans({
'%submission_title%': '<a href="%s">%s</a>'|format(
path('submission', {forum_name: forum.name, submission_id: submission.id})|e,
submission.title|e
),
'%submission_author%': user_link(submission.user, {prefix: true}),
})|raw }}</p>
{% endif %}
</div>
{% endwith %}
{% endblock %}
{%- block comment_info_user -%}
{%- from 'user/_macros.html.twig' import user_link -%}
{%- if not comment.softDeleted -%}
{{- user_link(comment.user, {
class: 'comment-user',
class: 'comment__author comment-user',
flag: comment.userFlag,
submitter: comment.user is same as(comment.submission.user),
}) -}}
......@@ -102,14 +140,19 @@
{%- block comment_info_timestamp -%}
{%- set date = comment.timestamp|localizeddate('long', 'short') -%}
<time datetime="{{ comment.timestamp|date('c') }}" title="{{ date }}" class="comment-timestamp relative-time">
<time datetime="{{ comment.timestamp|date('c') }}"
title="{{ date }}"
class="comment__timestamp comment-timestamp relative-time">
{{- 'comments.info_at_timestamp'|trans({'%timestamp%': date}) -}}
</time>
{%- endblock -%}
{%- block comment_info_edited_at -%}
{%- set date = comment.editedAt|localizeddate('long', 'short') -%}
<time datetime="{{ comment.editedAt|date('c') }}" title="{{ date }}" class="relative-time-diff" data-compare-to="{{ comment.timestamp|date('c') }}">
<time datetime="{{ comment.editedAt|date('c') }}"
title="{{ date }}"
class="comment__edit-timestamp relative-time-diff"
data-compare-to="{{ comment.timestamp|date('c') }}">
{{- 'comments.info_at_timestamp'|trans({'%timestamp%': date}) -}}
</time>
{%- endblock -%}
......@@ -134,7 +177,7 @@
forumName: comment.submission.forum.name,
submissionId: comment.submission.id,
commentId: comment.id
}) }}">
}) }}" class="comment__reply-link">
{{- 'comments.reply'|trans -}}
</a>
</li>
......@@ -142,12 +185,12 @@
{%- block comment_nav_permalink -%}
{%- spaceless -%}
<li class="comment-nav-permalink">
<li>
<a href="{{ path('comment', {
forum_name: comment.submission.forum.name,
submission_id: comment.submission.id,
comment_id: comment.id
}) }}">{{ 'comments.permalink'|trans }}</a>
}) }}" class="comment__permalink">{{ 'comments.permalink'|trans }}</a>
</li>
{%- endspaceless -%}
{%- endblock -%}
......@@ -155,12 +198,12 @@
{%- block comment_nav_parent -%}
{%- spaceless -%}
{%- if comment.parent -%}
<li class="comment-nav-parent">
<li>
<a href="{{ path('comment', {
forum_name: comment.submission.forum.name,
submission_id: comment.submission.id,
comment_id: comment.parent.id
}) }}">{{ 'comments.parent'|trans }}</a>
}) }}" class="comment__parent-link">{{ 'comments.parent'|trans }}</a>
</li>
{%- endif -%}
{%- endspaceless -%}
......@@ -181,14 +224,14 @@
{%- block comment_nav_delete_softdelete -%}
{%- spaceless -%}
<li class="comment-nav-softdelete">
<li>
<form action="{{ path('softdelete_comment', {
forum_name: comment.submission.forum.name,
submission_id: comment.submission.id,
comment_id: comment.id,
}) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token('softdelete_comment') }}">
<button type="submit" class="confirm-comment-delete">{{ 'comments.delete'|trans }}</button>
<button type="submit" class="comment__soft-delete-button confirm-comment-delete">{{ 'comments.delete'|trans }}</button>
</form>
</li>
{%- endspaceless -%}
......@@ -196,14 +239,17 @@
{%- block comment_nav_delete_thread -%}
{%- spaceless -%}
<li class="comment-nav-delete-thread">
<li>
<form action="{{ path('delete_comment', {
forum_name: comment.submission.forum.name,
submission_id: comment.submission.id,
comment_id: comment.id,
}) }}" method="POST">
<input type="hidden" name="token" value="{{ csrf_token('delete_comment') }}">
<button type="submit" class="confirm-comment-delete">{{ delete_thread_label|trans }}</button>
<button type="submit"
class="comment__thread-delete-button confirm-comment-delete">
{{- delete_thread_label|trans -}}
</button>
</form>
</li>
{%- endspaceless -%}
......@@ -212,12 +258,14 @@
{%- block comment_nav_edit -%}
{%- spaceless -%}
{%- if is_granted('edit', comment) -%}
<li class="comment-nav-edit">
<li>
<a href="{{ path('edit_comment', {
forum_name: comment.submission.forum.name,
submission_id: comment.submission.id,
comment_id: comment.id,
}) }}">{{ 'comments.edit'|trans }}</a>
}) }}" class="comment__edit-link">
{{- 'comments.edit'|trans -}}
</a>
</li>
{%- endif -%}
{%- endspaceless -%}
......@@ -227,7 +275,8 @@
{%- if is_granted('moderator', comment.submission.forum) -%}
{%- spaceless -%}
<li>
<a href="{{ path('forum_ban', {forum_name: comment.submission.forum.name, username: comment.user.username}) }}">
<a href="{{ path('forum_ban', {forum_name: comment.submission.forum.name, username: comment.user.username}) }}"
class="comment__ban-link">
{{- 'action.ban'|trans -}}
</a>
</li>
......@@ -238,8 +287,9 @@
{%- block comment_nav_ip_ban -%}
{%- if is_granted('ROLE_ADMIN') %}
{%- spaceless -%}
<li class="comment-nav-edit">
<a href="{{ path('ban_user', {'username': comment.user.username}) }}">
<li>
<a href="{{ path('ban_user', {'username': comment.user.username}) }}"
class="comment__ip-ban-link">
{{- 'action.global_ban'|trans -}}
</a>
</li>
......
......@@ -20,7 +20,7 @@
<h1 class="page-heading">{{ block('title') }}</h1>
{% if parent %}
{{ comment(parent, {recurse: false}) }}
{{ comment(parent) }}
{% endif %}
{% include 'comment/_form.html.twig' with { form: form } only %}
......
......@@ -12,7 +12,7 @@
<h1 class="page-heading">{{ block('title') }}</h1>
{% for comment in comments %}
{{ comment(comment, {recurse: false}) }}
{{ comment(comment, {show_context: true}) }}
{% endfor %}
{{ include('_includes/pagination.html.twig', {pager: comments}, with_context=false) }}
......
......@@ -21,5 +21,5 @@
</p>
</div>
{{ comment(comment, {show_form: true}) }}
{{ comment(comment, {recurse: true, show_form: true}) }}
{% endblock %}
......@@ -28,7 +28,7 @@
<div class="submission-comments">
{% for comment in submission.topLevelComments %}
{{ comment(comment) }}
{{ comment(comment, {recurse: true}) }}
{% endfor %}
</div>
{% endblock %}
......@@ -16,7 +16,7 @@
<h1 class="page-heading">{{ block('title') }}</h1>
{% for comment in comments %}
{{ comment(comment, {recurse: false}) }}
{{ comment(comment, {show_context: true}) }}
{% endfor %}
{{ include('_includes/pagination.html.twig', {pager: comments}, with_context=false) }}
......
......@@ -37,7 +37,7 @@
{% block notification_comment %}
{% from 'comment/_macros.html.twig' import comment %}
{{ comment(notification.comment, {recurse: false}) }}
{{ comment(notification.comment, {show_context: true}) }}
{% endblock %}
{% block notification_message_thread %}
......
......@@ -17,7 +17,7 @@
{% if contribution.type == 'submission' %}
{{ submission(contribution.submission) }}
{% elseif contribution.type == 'comment' %}
{{ comment(contribution.comment, {recurse: false}) }}
{{ comment(contribution.comment, {show_context: true}) }}
{% endif %}
{% endfor %}
{% endblock %}
......
......@@ -71,6 +71,8 @@ comments:
return_to_forum: ← Return to %forum%
edit_info: (edited %edited_at%)
moderator_info: (edited by a moderator %edited_at%)
context.top_level_reply: Reply to %submission_title% by %submission_author%
context.comment_reply: Reply to comment by %comment_author% in %submission_title% by %submission_author%
comment_form:
comment: Comment
......
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