Comments: Cleanup and convert more IDs to classes when possible

No functional changes.

src/styles/_comments.sass

@@ -9,33 +9,22 @@ $comments-width-max: 710px
 		padding: 15px 0
 		display: block
 
-	.comments-list-title
+	.comments-list
+		&-loading
+			+spin
+			color: $color-background
+			font-size: 2em
+			margin-bottom: 10px
+			position: relative
+			text-align: center
+			top: 25px
+
+		&-title
 			padding: 15px 0 10px 0
 			font-size: 1.3em
 			font-weight: 300
 			color: $color-text-dark-hint
 
-	#comments-list-items-loading
-		font-size: 2em
-		color: $color-background
-		text-align: center
-		position: relative
-		top: 25px
-		margin-bottom: 10px
-		+spin
-
-	#comments-list-items,
-	.comment-reply-container
-		position: relative
-
-		.nocomments
-			color: $color-text-dark-hint
-			text-align: center
-			cursor: default
-			padding: 8px 0
-
-	.comments-list
-
 		/* Each comment on the list*/
 		.comment-container,
 		.comment-reply-container
@@ -84,7 +73,7 @@ $comments-width-max: 710px
 				display: inline-block
 				float: left
 				font-weight: bold
-				margin-right: 10px
+				margin-right: 8px
 				white-space: nowrap
 
 				&.op
@@ -147,6 +136,10 @@ $comments-width-max: 710px
 					font-weight: 500
 					color: $color-info
 
+				img.emoji
+					padding-top: inherit
+					padding-bottom: inherit
+
 				.editing
 					background-color: $color-background-light
 					margin-bottom: 10px
@@ -163,46 +156,6 @@ $comments-width-max: 710px
 				padding-bottom: 0
 				width: 100%
 
-			.comment-content-preview
-				display: none
-				+node-details-description
-				padding: 10px 0 0 10px
-				font:
-					size: 1em
-					weight: normal
-
-				position: relative
-				margin-top: 15px
-
-				&:empty
-					margin: 0
-					padding: 0
-					&:before, &:after
-						display: none
-
-				&:before
-					content: 'Live Preview'
-					position: absolute
-					top: -20px
-					left: 30px
-					font-size: .9em
-					color: $color-text-dark-hint
-					transition: color 150ms ease-in-out
-
-					+media-md
-						visibility: visible
-					+media-sm
-						visibility: hidden
-
-				&:after
-					content: 'Markdown Supported'
-					position: absolute
-					top: -20px
-					right: 20px
-					font-size: .9em
-					color: $color-text-dark-hint
-					transition: color 150ms ease-in-out
-
 			/* Rating, and actions such as reply */
 			.comment-meta
 				+media-xs
@@ -339,15 +292,15 @@ $comments-width-max: 710px
 				padding-left: 55px
 
 			.comment-badge
-				display: inline-block
+				border-radius: 3px
 				border: 1px solid $color-text-dark-hint
 				color: $color-text-dark-hint
-				padding: 1px 4px
+				display: inline-block
-				margin: 0 5px 0 10px
-				border-radius: 3px
 				font:
 					size: .7em
 					weight: 400
+				margin: 0 5px 0 10px
+				padding: 1px 4px
 				text-transform: uppercase
 
 				&.badge-team
@@ -360,11 +313,12 @@ $comments-width-max: 710px
 					border-color: $color-success
 					color: $color-success
 
-		.comment-reply-container
+.comment-reply
+	&-container
 		background-color: $color-background
 
 	/* Little gravatar icon on the left */
-			.comment-reply-avatar
+	&-avatar
 		img
 			border-radius: 50%
 			width: 25px
@@ -372,13 +326,13 @@ $comments-width-max: 710px
 			box-shadow: 0 0 0 3px $color-background-light
 
 	/* textarea field, submit button and reply details */
-			.comment-reply-form
+	&-form
 		padding:
 			top: 0
 			left: 10px
 		width: 100%
 
-				.comment-reply-field
+	&-field
 		background-color: white
 		border-radius: 3px
 		box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
@@ -388,11 +342,11 @@ $comments-width-max: 710px
 
 		textarea
 			+node-details-description
-						color: $color-text-dark
-						border: none
 			border-bottom-right-radius: 0
 			border-top-right-radius: 0
+			border: none
 			box-shadow: none
+			color: $color-text-dark
 			flex: 1
 			font:
 				size: 1em
@@ -402,8 +356,8 @@ $comments-width-max: 710px
 			min-height: 45px
 			padding: 10px 0 10px 10px
 			resize: vertical
-						width: 100%
 			transition: box-shadow 250ms ease-in-out
+			width: 100%
 
 			&:focus
 				box-shadow: inset 2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
@@ -443,8 +397,7 @@ $comments-width-max: 710px
 			a
 				margin-right: 4px
 
-
+	&-preview
-				.comment-reply-preview
 		background-color: $color-background-light
 		border-bottom-left-radius: 3px
 		border-bottom-right-radius: 3px
@@ -462,7 +415,7 @@ $comments-width-max: 710px
 			flex: 1
 			padding: 5px 10px
 
-					.comment-reply-preview:empty
+		&:empty
 			color: transparent
 			margin: 0 auto
 			padding: 0 10px
@@ -472,7 +425,7 @@ $comments-width-max: 710px
 				content: ''
 				color: transparent
 
-					.comment-reply-info
+	&-info
 		background-color: $color-background-dark
 		display: flex
 		flex-direction: column
@@ -489,7 +442,7 @@ $comments-width-max: 710px
 		&:hover
 			color: $color-primary
 
-				.comment-reply-meta
+	&-meta
 		display: flex
 		align-items: center
 		border-bottom-right-radius: 3px
@@ -536,5 +489,3 @@ $comments-width-max: 710px
 		.comment-reply-meta
 			button.comment-action-cancel
 				display: inline-block
-
-// @import plugins/_ckeditor

src/templates/nodes/custom/asset/file/view_embed.pug

@@ -24,7 +24,7 @@
 		include ../../_node_details
 
 		#comments-embed
-			#comments-list-items-loading
+			.comments-list-loading
 				i.pi-spin
 
 include ../../_scripts

src/templates/nodes/custom/asset/image/view_embed.pug

@@ -24,7 +24,7 @@
 		include ../../_node_details
 
 		#comments-embed
-			#comments-list-items-loading
+			.comments-list-loading
 				i.pi-spin
 
 include ../../_scripts

src/templates/nodes/custom/asset/video/view_embed.pug

@@ -46,7 +46,7 @@
 		include ../../_node_details
 
 		#comments-embed
-			#comments-list-items-loading
+			.comments-list-loading
 				i.pi-spin
 
 script(type="text/javascript").

src/templates/nodes/custom/asset/view_theatre_embed.pug

@@ -41,7 +41,7 @@
 		| {% endif %}
 
 	#comments-embed
-		#comments-list-items-loading
+		.comments-list-loading
 			i.pi-spin
 
 include ../_scripts

src/templates/nodes/custom/comment/list_embed.pug

@@ -72,7 +72,7 @@
 		section.comments-list-header
 			.comments-list-title
 				| {{ nr_of_comments }} comment{{ nr_of_comments|pluralize }}
-			#comments-list-items
+			.comments-list-items
 				| {% for comment in comments['_items'] %}
 				| {{ macros.render_comment(comment, False) }}
 				| {% endfor %}

src/templates/nodes/custom/post/view_embed.pug

@@ -37,7 +37,7 @@
 
 
 		#comments-embed
-			#comments-list-items-loading
+			.comments-list-loading
 				i.pi-spin
 
 include ../_scripts