diff --git a/src/scripts/tutti/2_comments.js b/src/scripts/tutti/2_comments.js index 08e4dfd4..d53fcaab 100644 --- a/src/scripts/tutti/2_comments.js +++ b/src/scripts/tutti/2_comments.js @@ -235,7 +235,10 @@ 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-body span').html(comment_html); + comment_container + .find('.comment-body span') + .removeClass('editing') + .html(comment_html); }) .fail(function(xhr) { if (console) console.log('Error fetching comment: ', xhr); diff --git a/src/styles/_comments.sass b/src/styles/_comments.sass index 203f00ff..0c24e0f4 100644 --- a/src/styles/_comments.sass +++ b/src/styles/_comments.sass @@ -99,13 +99,13 @@ $comments-width-max: 710px +media-lg max-width: $comments-width-max + border: thin solid transparent color: darken($color-text, 10%) font: size: 1em weight: normal - transition: background-color 200ms ease-in-out, margin 200ms ease-in-out margin: 0 - border: thin solid transparent + transition: background-color 200ms ease-in-out, margin 200ms ease-in-out +media-xs padding-left: 0 @@ -126,24 +126,28 @@ $comments-width-max: 710px &.comment-author margin-bottom: 0 - strong, b - font-weight: bold - color: $color-text - img.emoji + display: inline-block padding-top: inherit padding-bottom: inherit .editing background-color: $color-background-light - margin-bottom: 10px - border-color: $color-background-dark - border-radius: 3px + display: flex + margin: 30px 0 10px textarea - box-shadow: none + background-color: $color-background + border-radius: 3px + border: none + box-shadow: inset 0 0 2px 0 rgba(darken($color-background-dark, 30%), .5) + display: block + padding: 10px width: 100% + &:focus + box-shadow: inset 0 0 2px 0 darken($color-background-dark, 30%) + .comment-content display: flex flex-direction: column diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index 80b761a6..fefea3d4 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -351,6 +351,7 @@ =node-details-description + +clearfix color: darken($color-text-dark, 5%) font: family: $font-body @@ -358,15 +359,10 @@ size: 1.2em word-break: break-word - clear: both - +clearfix +media-xs font-size: 1.1em - strong, b - font-weight: 400 - a:not([class]) color: $color-text-dark-primary text-decoration: underline @@ -453,31 +449,9 @@ padding-left: 20px code, kbd, pre, samp - font-size: 1.3rem - - pre - background-color: lighten($color-background, 5%) - border-color: $color-background - border-radius: 3px - color: $color-text - - /* when
is outside*/ - margin: - left: 20px - right: 20px - pre+p - margin-top: 30px - - p+pre - /* a
right after ausually are related, remove some spacing */ - margin-top: -10px - - p - pre - /* We already have spacing on the sides inside
*/ - margin: - left: 0 - right: 0 + background-color: rgba($color-primary, .05) + color: darken($color-primary, 10%) + font-size: inherit =markdown-preview-container diff --git a/src/templates/nodes/custom/comment/list_embed.pug b/src/templates/nodes/custom/comment/list_embed.pug index 6d69de1d..aac1bd0e 100644 --- a/src/templates/nodes/custom/comment/list_embed.pug +++ b/src/templates/nodes/custom/comment/list_embed.pug @@ -165,7 +165,7 @@ script. comment_content .addClass('editing') .find('textarea') - .height(Math.max(150, height + 30)) + .autoResize() .focus() .trigger('keyup'); }) @@ -209,6 +209,7 @@ script. $container.find('.comment-body span') .html(comment_html) + .removeClass('editing') .flashOnce(); $button