From ac9aa59924062e34c22214d233b65c7cf644373d Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Wed, 8 Nov 2017 22:49:56 +0100
Subject: [PATCH] Comments: When editing, resize the textarea

Minor tweaks:
* Remove the 'editing' class after cancel/save
* Style <code>, <pre>, etc tags
---
 src/scripts/tutti/2_comments.js               |  5 ++-
 src/styles/_comments.sass                     | 24 +++++++------
 src/styles/_utils.sass                        | 34 +++----------------
 .../nodes/custom/comment/list_embed.pug       |  3 +-
 4 files changed, 24 insertions(+), 42 deletions(-)

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 <pre> is outside <p> */
-		margin:
-			left: 20px
-			right: 20px
-	pre+p
-		margin-top: 30px
-
-	p+pre
-		/* a <pre> right after a <p> usually are related, remove some spacing */
-		margin-top: -10px
-
-	p
-		pre
-			/* We already have spacing on the sides inside <p> */
-			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