archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Comments: More compact layout

Browse Source
This commit is contained in:
Pablo Vazquez
2017-09-25 00:39:34 +02:00
parent 6688ae66fa
commit 4eeccb6107
4 changed files with 234 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/scripts/tutti/2_comments.js
View File

@@ -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('<i class="pi-paper-plane"></i> 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('<i class="pi-spin spin"></i> Posting...');
.html('<i class="pi-spin spin"></i> 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('<i class="pi-paper-plane"></i> Send');
$('#comment_field').val('');
$('body').trigger('pillar:comment-posted', [comment_node_id]);

323
src/styles/_comments.sass
View File

@@ -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,18 +63,13 @@ $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
@@ -88,21 +79,17 @@ $comments-width-max: 710px
margin-top: 5px
width: 24px
.comment-author
position: relative
color: $color-background-nav
font:
weight: 500
p.comment-author
color: $color-text-dark
display: inline-block
float: left
font-weight: bold
margin-right: 10px
white-space: nowrap
&.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
@@ -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
position: relative
textarea
width: 100%
height: 45px
line-height: 1.5em
border: 1px solid $color-background-dark
background-color: white
border-radius: 3px
margin: 0 auto 5px auto
padding: 10px 0 10px 10px
color: $color-text-dark
resize: vertical
box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
display: flex
position: relative
transition: border-color 300ms ease-in-out
textarea
+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
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
@@ -434,31 +442,23 @@ $comments-width-max: 710px
.comment-reply-preview
position: relative
margin: 10px auto 5px auto
padding: 10px
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
border-top: thin solid $color-background-dark
border-bottom: thin solid $color-background
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
+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
margin: 0 auto
@@ -469,120 +469,65 @@ $comments-width-max: 710px
content: ''
color: transparent
.comment-reply-meta
.comment-reply-info
background-color: $color-background-dark
display: flex
align-items: center
flex-direction: column
font-size: .8em
padding-bottom: 10px
text-align: center
width: 100px
.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
.comment-action-cancel
cursor: pointer
padding: 10px
text-decoration: underline
&:hover
color: $color-primary
i
font-size: 1.5em
position: relative
top: 2px
.comment-reply-meta
display: flex
align-items: center
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
span.hotkey
color: white
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
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

22
src/templates/nodes/custom/comment/_macros.pug
View File

@@ -4,31 +4,29 @@
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-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")
| {% 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
@@ -40,6 +38,12 @@
| 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) }}
| {% endfor %}

42
src/templates/nodes/custom/comment/list_embed.pug
View File

@@ -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-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($('<textarea>').text(comment_raw));
@@ -165,7 +170,6 @@ script.
.height(Math.max(150, height + 30))
.focus()
.trigger('keyup');
comment_content.siblings('.comment-content-preview').show();
})
.fail(function(xhr) {
if (console) console.log('Error fetching comment: ', xhr);
@@ -205,7 +209,7 @@ script.
.done(function(comment_id, comment_html) {
commentEditCancel($button, false)
$container.find('.comment-content')
$container.find('.comment-body')
.html(comment_html)
.flashOnce();