diff --git a/src/scripts/tutti/2_comments.js b/src/scripts/tutti/2_comments.js
index f5c24550..5791e482 100644
--- a/src/scripts/tutti/2_comments.js
+++ b/src/scripts/tutti/2_comments.js
@@ -27,17 +27,14 @@ $(document).on('click','body .comment-action-reply',function(e){
commentField.dataset.parentId = parentNodeId;
// Start the comment field with @authorname:
- var replyAuthor = parentDiv.find('.comment-author:first span').html();
- $(commentField).val("**@" + replyAuthor.slice(1, -1) + ":** ");
+ var replyAuthor = parentDiv.find('.comment-author:first').html();
+
+ $(commentField).val("**@" + replyAuthor + ":** ");
// Add class for styling
$('.comment-container').removeClass('is-replying');
parentDiv.addClass('is-replying');
- // Rename Post Comment button to Reply
- var commentSubmitButton = document.getElementById('comment_submit');
- $(commentSubmitButton).text('Post Reply');
-
// Move comment-reply container field after the parent container
var commentForm = $('.comment-reply-container').detach();
parentDiv.after(commentForm);
@@ -46,9 +43,9 @@ $(document).on('click','body .comment-action-reply',function(e){
// Convert Markdown
var convert = new Markdown.getSanitizingConverter().makeHtml;
- var preview = $('.comment-reply-preview');
+ var preview = $('.comment-reply-preview-md');
preview.html(convert($(commentField).val()));
- $('.comment-reply-form').addClass('filled');
+ $('.comment-reply-field').addClass('filled');
});
@@ -64,13 +61,10 @@ $(document).on('click','body .comment-action-cancel',function(e){
$(commentField).val('');
// Convert Markdown
var convert = new Markdown.getSanitizingConverter().makeHtml;
- var preview = $('.comment-reply-preview');
+ var preview = $('.comment-reply-preview-md');
preview.html(convert($(commentField).val()));
- var commentSubmitButton = document.getElementById('comment_submit');
- $(commentSubmitButton).text('Post Comment');
-
- $('.comment-reply-form').removeClass('filled');
+ $('.comment-reply-field').removeClass('filled');
$('.comment-container').removeClass('is-replying');
});
@@ -169,14 +163,14 @@ function show_comment_button_error(msg) {
var $button = $('.comment-action-submit');
var $textarea = $('#comment_field');
- $button.addClass('button-field-error');
- $textarea.addClass('field-error');
+ $button.addClass('error');
+ $textarea.addClass('error');
$button.html(msg);
setTimeout(function(){
- $button.html('Post Comment');
- $button.removeClass('button-field-error');
- $textarea.removeClass('field-error');
+ $button.html(' Send');
+ $button.removeClass('error');
+ $textarea.removeClass('error');
}, 2500);
}
@@ -218,8 +212,7 @@ function comment_mode(clicked_item, mode)
$edit_buttons.find('.edit_cancel').hide();
$edit_buttons.find('.edit_save').hide();
- $container.find('.comment-content').removeClass('editing');
- $container.find('.comment-content-preview').html('').hide();
+ $container.find('.comment-body').removeClass('editing');
}
}
@@ -241,7 +234,7 @@ function commentEditCancel(clicked_item, reload_comment) {
return loadComment(comment_id, {'properties.content': 1})
.done(function(data) {
var comment_html = data['properties']['content_html'];
- comment_container.find('.comment-content').html(comment_html);
+ comment_container.find('.comment-body').html(comment_html);
})
.fail(function(xhr) {
if (console) console.log('Error fetching comment: ', xhr);
@@ -311,22 +304,22 @@ function post_comment($submit_button){
.progress(function() {
$submit_button
.addClass('submitting')
- .html(' Posting...');
+ .html(' Sending...');
})
.fail(function(xhr){
if (typeof xhr === 'string') {
show_comment_button_error(xhr);
} else {
// If it's not a string, we assume it's a jQuery XHR object.
- if (console) console.log('Error saving comment:', xhr.responseText);
+ if (console) console.log('Error posting comment: ', xhr.responseText);
show_comment_button_error("Houston! Try again?");
}
- toastr.error(xhr.responseText, 'Error saving comment');
+ toastr.error(xhr.responseText, 'Error posting comment');
})
.done(function(comment_node_id) {
$submit_button
.removeClass('submitting')
- .html('Post Comment');
+ .html(' Send');
$('#comment_field').val('');
$('body').trigger('pillar:comment-posted', [comment_node_id]);
diff --git a/src/styles/_comments.sass b/src/styles/_comments.sass
index 472bd2a2..1c9ab39c 100644
--- a/src/styles/_comments.sass
+++ b/src/styles/_comments.sass
@@ -3,9 +3,6 @@ $comments-width-max: 710px
.comments-container
position: relative
- &.texture
- border-top: none
-
#comments-reload
text-align: center
cursor: pointer
@@ -16,7 +13,7 @@ $comments-width-max: 710px
padding: 15px 0 10px 0
font-size: 1.3em
font-weight: 300
- color: $color-text-dark-primary
+ color: $color-text-dark-hint
#comments-list-items-loading
font-size: 2em
@@ -43,7 +40,6 @@ $comments-width-max: 710px
.comment-container,
.comment-reply-container
display: flex
- flex-direction: column
position: relative
padding: 15px 0 20px 0
@@ -67,52 +63,43 @@ $comments-width-max: 710px
&.is-replying
margin-bottom: 15px !important
- .comment-header .comment-avatar
+ .comment-avatar
padding-right: 5px
padding-left: 5px
&.comment-linked+.comment-container.is-first
border-top: none
- /* Header containing author, time, and badges if any*/
- .comment-header
- display: flex
- align-items: center
+ .comment-avatar
+ padding-right: 10px
- .comment-avatar
- padding-right: 10px
+ img
+ border-radius: 50%
+ height: 24px
+ margin-top: 5px
+ width: 24px
- img
- border-radius: 50%
- height: 24px
- margin-top: 5px
- width: 24px
+ p.comment-author
+ color: $color-text-dark
+ display: inline-block
+ float: left
+ font-weight: bold
+ margin-right: 10px
+ white-space: nowrap
- .comment-author
+ &.op
+ color: $color-primary-dark
+
+ .comment-time
+ padding-left: 10px
+ margin-left: 10px
+ color: $color-text-dark-hint
+
+ &:before
+ content: '·'
position: relative
- color: $color-background-nav
- font:
- weight: 500
-
- &.own
- color: $color-success
- &.op
- color: $color-primary-dark
-
- .username
- padding-left: 5px
- color: $color-text-dark-secondary
-
- .comment-time
- padding-left: 10px
- margin-left: 10px
- color: $color-text-dark-hint
-
- &:before
- content: '·'
- position: relative
- left: -10px
- font-weight: 600
+ left: -10px
+ font-weight: 600
/* The actual comment body. */
/* Here we style both the preview comment and posted comments */
@@ -128,7 +115,6 @@ $comments-width-max: 710px
+media-lg
max-width: $comments-width-max
- padding: 0 0 0 34px
color: darken($color-text-dark, 10%)
font:
size: 1em
@@ -148,43 +134,34 @@ $comments-width-max: 710px
left: 0
right: 0
- line-height: 1.5em
+ line-height: 1.4em
margin-top: 5px
&:last-child
margin-bottom: 10px
+ &.comment-author
+ margin-bottom: 0
strong, b
font-weight: 500
color: $color-info
- textarea
- +node-details-description
- background-color: white
- padding: 0 0 0 5px
- margin-left: 15px
- width: 100%
- color: $color-text-dark-primary
- border: none
- border-radius: 3px
- font:
- size: 1em
- weight: normal
-
- &:focus
- outline: none
- border: none
- color: $color-text-dark
-
- &.editing
+ .editing
background-color: $color-background-light
- margin: 10px 0
+ margin-bottom: 10px
border-color: $color-background-dark
border-radius: 3px
- &.empty
- border-color: $color-danger
+ textarea
+ box-shadow: none
+ width: 100%
+
+ .comment-content
+ display: flex
+ flex-direction: column
+ padding-bottom: 0
+ width: 100%
.comment-content-preview
display: none
@@ -233,17 +210,16 @@ $comments-width-max: 710px
left: 0
right: 0
- display: flex
align-items: center
- padding-left: 35px
color: $color-text-dark-secondary
+ display: flex
+ font-size: .9em
/* Small container for rating buttons and value */
.comment-rating
display: flex
align-items: center
-
&.rated
color: $color-text-dark-secondary
.down
@@ -327,10 +303,10 @@ $comments-width-max: 710px
&.is-reply
padding:
- top: 20px
- left: 15px
- margin-left: 30px
- border-left: 3px solid $color-background-dark
+ left: 20px
+ top: 5px
+ margin-left: 35px
+ box-shadow: inset 3px 0 0 $color-background-dark
+media-xs
padding-left: 15px
@@ -340,6 +316,10 @@ $comments-width-max: 710px
border-top: thin solid $color-background-dark !important
border-bottom: thin solid $color-background-dark !important
+ &.is-replying+.comment-reply-container
+ margin-left: 35px
+ padding-left: 25px
+
&.is-first
border-top: 1px solid lighten($color-text-dark-hint, 15%)
@@ -348,14 +328,12 @@ $comments-width-max: 710px
color: $color-success
&.is-replying
- border-left: 3px solid $color-primary
- padding-left: 10px
+ box-shadow: inset 5px 0 0 $color-primary
- // &.is-replying.is-first+.comment-reply-container
&.is-replying+.comment-reply-container
- border-left: 3px solid $color-primary
+ box-shadow: inset 5px 0 0 $color-primary
margin-left: 0
- padding-left: 30px
+ padding-left: 55px
.comment-badge
display: inline-block
@@ -382,9 +360,6 @@ $comments-width-max: 710px
.comment-reply-container
background-color: $color-background
- // It's flex, like the others, but different direction
- flex-direction: row
-
/* Little gravatar icon on the left */
.comment-reply-avatar
img
@@ -395,33 +370,66 @@ $comments-width-max: 710px
/* textarea field, submit button and reply details */
.comment-reply-form
- width: 100%
padding:
top: 0
left: 10px
+ width: 100%
.comment-reply-field
+ background-color: white
+ border-radius: 3px
+ box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
+ display: flex
position: relative
+ transition: border-color 300ms ease-in-out
textarea
- width: 100%
- height: 45px
-
- line-height: 1.5em
- border: 1px solid $color-background-dark
- border-radius: 3px
- margin: 0 auto 5px auto
- padding: 10px 0 10px 10px
+ +node-details-description
color: $color-text-dark
+ border: none
+ border-bottom-right-radius: 0
+ border-top-right-radius: 0
+ box-shadow: none
+ flex: 1
+ font:
+ size: 1em
+ weight: normal
+ line-height: 1.5em
+ margin: 0
+ min-height: 45px
+ padding: 10px 0 10px 10px
resize: vertical
- transition: border-color 300ms ease-in-out
+ width: 100%
+ transition: box-shadow 250ms ease-in-out
&:focus
- border: 1px solid $color-success
+ box-shadow: inset 2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
+ border: none
+ color: $color-text-dark
outline: none
- &.field-error
- border-color: $color-danger
+ &+.comment-reply-meta button.comment-action-submit
+ box-shadow: inset -2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
+
+ &.error
+ box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger
+
+ &.filled
+ textarea:focus
+ border-bottom-left-radius: 0
+
+ &+.comment-reply-preview
+ display: flex
+
+ .comment-reply-meta
+ background-color: $color-success
+
+ .comment-action-submit
+ color: white
+ border-bottom-right-radius: 0
+
+ span.hotkey
+ display: block
&.sign-in
display: block
@@ -433,31 +441,23 @@ $comments-width-max: 710px
margin-right: 4px
- .comment-reply-preview
- position: relative
- margin: 10px auto 5px auto
- padding: 10px
- color: $color-text-dark-primary
- border-top: thin solid $color-background-dark
- border-bottom: thin solid $color-background
- transition: all 150ms ease-in-out
+ .comment-reply-preview
+ background-color: $color-background-light
+ border-bottom-left-radius: 3px
+ border-bottom-right-radius: 3px
+ box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
+ color: $color-text-dark-primary
+ display: none // flex when comment-reply-field has .filled class
+ position: relative
+ transition: all 150ms ease-in-out
- &:before
- content: 'Live Preview'
- position: absolute
- top: -20px
- font-size: .9em
- color: $color-text-dark-hint
- transition: color 150ms ease-in-out
+ p
+ padding-left: 0
+ padding-right: 0
- +media-md
- visibility: visible
- +media-sm
- visibility: hidden
-
- p
- padding-left: 0
- padding-right: 0
+ &-md
+ flex: 1
+ padding: 5px 10px
.comment-reply-preview:empty
color: transparent
@@ -469,120 +469,65 @@ $comments-width-max: 710px
content: ''
color: transparent
+ .comment-reply-info
+ background-color: $color-background-dark
+ display: flex
+ flex-direction: column
+ font-size: .8em
+ padding-bottom: 10px
+ text-align: center
+ width: 100px
+
+ .comment-action-cancel
+ cursor: pointer
+ padding: 10px
+ text-decoration: underline
+
+ &:hover
+ color: $color-primary
+
.comment-reply-meta
display: flex
align-items: center
-
- .comment-details
- opacity: 0
- font-size: .9em
-
- display: flex
- align-items: center
- justify-content: flex-end
- width: 100%
-
- transition: opacity 300ms ease-in-out
-
- .comment-author
- padding:
- right: 15px
- color: $color-text-dark
- font:
- weight: 300
-
- .author-name
- padding-left: 3px
- font:
- weight: 500
-
- .comment-rules
- padding-right: 8px
- margin-right: 8px
-
- a
- color: $color-text-dark-hint
-
- &:hover
- color: $color-primary
-
- i
- font-size: 1.5em
- position: relative
- top: 2px
-
+ border-bottom-right-radius: 3px
+ border-top-right-radius: 3px
+ transition: background-color 150ms ease-in-out, color 150ms ease-in-out
+ width: 100px
button.comment-action-submit
- margin-left: auto
- min-width: 180px
- transition: all 200ms ease-in-out
-
- +button($color-success, 3px)
+ border: none
+ border-top-left-radius: 0
+ border-bottom-left-radius: 0
+ color: $color-success
+ flex-direction: column
+ height: 100%
position: relative
+ transition: all 200ms ease-in-out
+ white-space: nowrap
+ width: 100%
+
+ &:focus
+ background-color: white
- span.hint
- position: absolute
- top: 35px
- left: 50%
- transform: translateX(-50%)
- font-size: .7em
- text-transform: initial
- display: block
- color: $color-text-dark-hint
&.submitting
- background: linear-gradient(to left, transparent 50%, #7AC29A 50%)
- background-size: 200% 100%
+ color: $color-info
+
+ &.error
+ background-color: $color-danger
color: white
- animation:
- name: background-fill-left-right
- duration: .5s
- delay: 0
- fill-mode: forwards
- iteration-count: 1
- timing-function: ease-out
- i
- +spin
-
-
- &.button-field-error
- +button($color-danger, 3px)
- background: transparent
-
- pointer-events: none
-
- i
- position: relative
- right: 2px
-
- button.comment-action-cancel
- display: none
- margin-left: auto
- margin-right: 5px
- padding:
- left: 15px
- right: 15px
-
- +button($color-text-dark-secondary, 3px)
- border-color: transparent
-
- i
- margin-right: 0
-
- &.filled
- .comment-reply-field
- textarea
- height: 120px
- .comment-reply-meta
- .comment-details
- opacity: 1
+ span.hotkey
+ color: white
+ display: none
+ font-weight: normal
+ font-size: .9em
/* Style the comment container when we're replying */
.comment-container + .comment-reply-container
margin-left: 30px
- padding-top: 0
+ padding-top: 10px
.comment-reply-form
.comment-reply-meta
diff --git a/src/templates/nodes/custom/comment/_macros.pug b/src/templates/nodes/custom/comment/_macros.pug
index 8648c0c0..4baca702 100644
--- a/src/templates/nodes/custom/comment/_macros.pug
+++ b/src/templates/nodes/custom/comment/_macros.pug
@@ -4,41 +4,45 @@
data-node-id="{{ comment._id }}",
class="{% if is_reply %}is-reply{% else %}is-first{% endif %}")
- .comment-header
- .comment-avatar
- img(src="{{ comment._user.email | gravatar }}")
+ .comment-avatar
+ img(src="{{ comment._user.email | gravatar }}")
- .comment-author(class="{% if comment._is_own %}own{% endif %}")
- | {{ comment._user.full_name }}
- span.username ({{ comment._user.username }})
+ .comment-content
+ .comment-body
+ p.comment-author {{ comment._user.full_name }}
- .comment-time {{ comment._created | pretty_date_time }} {% if comment._created != comment._updated %} (edited {{ comment._updated | pretty_date_time }}){% endif %}
+ | {{comment.properties.content_html | safe }}
- .comment-content {{comment.properties.content_html | safe }}
- | {% if comment._is_own %}
- .comment-content-preview
- | {% endif %}
+ // TODO: Markdown preview when editing
- .comment-meta
- .comment-rating(
- class="{% if comment._current_user_rating is not none %}rated{% if comment._current_user_rating %} positive{% endif %}{% endif %}")
- .comment-rating-value(title="Number of likes") {{ comment._rating }}
- | {% if not comment._is_own %}
- .comment-action-rating.up(title="Like comment")
+ .comment-meta
+ .comment-rating(
+ class="{% if comment._current_user_rating is not none %}rated{% if comment._current_user_rating %} positive{% endif %}{% endif %}")
+ .comment-rating-value(title="Number of likes") {{ comment._rating }}
+
+ | {% if not comment._is_own %}
+ .comment-action-rating.up(title="Like comment")
+ | {% endif %}
+
+ .comment-action-reply(title="Reply to this comment")
+ span reply
+
+ | {% if comment._is_own %}
+ .comment-action-edit
+ span.edit_mode(title="Edit comment") edit
+ span.edit_save(title="Save comment")
+ i.pi-check
+ | save changes
+ span.edit_cancel(title="Cancel changes")
+ i.pi-cancel
+ | cancel
| {% endif %}
- .comment-action-reply(title="Reply to this comment")
- span reply
- | {% if comment._is_own %}
- .comment-action-edit
- span.edit_mode(title="Edit comment") edit
- span.edit_save(title="Save comment")
- i.pi-check
- | save changes
- span.edit_cancel(title="Cancel changes")
- i.pi-cancel
- | cancel
- | {% endif %}
+ .comment-time
+ | {{ comment._created | pretty_date_time }}
+ | {% if comment._created != comment._updated %}
+ span(title="edited {{ comment._updated | pretty_date_time }})") *
+ | {% endif %}
| {% for reply in comment['_replies']['_items'] %}
| {{ render_comment(reply, True) }}
diff --git a/src/templates/nodes/custom/comment/list_embed.pug b/src/templates/nodes/custom/comment/list_embed.pug
index 54fd8dee..c9ff0f48 100644
--- a/src/templates/nodes/custom/comment/list_embed.pug
+++ b/src/templates/nodes/custom/comment/list_embed.pug
@@ -17,25 +17,29 @@
placeholder="Join the conversation...")
.comment-reply-meta
- .comment-details
- .comment-rules
- a(
- title="Markdown Supported",
- target="_blank",
- href="https://guides.github.com/features/mastering-markdown/")
- i.pi-markdown
- button.comment-action-cancel.btn.btn-outline(
- type="button",
- title="Cancel")
- i.pi-cancel
- button.comment-action-submit.btn.btn-outline(
+ button.comment-action-submit(
id="comment_submit",
type="button",
title="Post Comment (Ctrl+Enter)")
- | Post Comment
+ span
+ i.pi-paper-plane
+ | Send
+ span.hotkey Ctrl + Enter
- .comment-reply-preview
+ .comment-reply-preview
+ .comment-reply-preview-md
+ .comment-reply-info
+ .comment-action-cancel(
+ type="button",
+ title="Cancel")
+ span cancel
+
+ a(
+ title="Handy guide of Markdown syntax",
+ target="_blank",
+ href="https://guides.github.com/features/mastering-markdown/")
+ span markdown cheatsheet
| {% elif current_user.is_authenticated %}
@@ -119,7 +123,7 @@ script.
.on( 'keyup','body .comment-reply-field textarea',function(e){
var $textarea = $(this);
var $container = $(this).parent();
- var $preview = $textarea.next().next();
+ var $preview = $container.parent().find('.comment-reply-preview-md');
// TODO: communicate with back-end to do the conversion,
// rather than relying on our JS-converted Markdown.
@@ -149,13 +153,14 @@ script.
comment_mode(this, 'edit');
- var parent_div = $(this).closest('.comment-container');
- var comment_id = parent_div.data('node-id');
+ var $parent_div = $(this).closest('.comment-container');
+ var comment_id = $parent_div.data('node-id');
- var comment_content = parent_div.find('.comment-content');
+ var comment_content = $parent_div.find('.comment-body');
var height = comment_content.height();
loadComment(comment_id, {'properties.content': 1})
+
.done(function(data) {
var comment_raw = data['properties']['content'];
comment_content.html($('