Comments: Style tweaks

More compact and also convert IDs to classes (when not used by javascript)

src/styles/_comments.sass

@@ -1,6 +1,6 @@
 $comments-width-max: 710px
 
-#comments-container
+.comments-container
 	position: relative
 
 	&.texture
@@ -12,12 +12,11 @@ $comments-width-max: 710px
 		padding: 15px 0
 		display: block
 
-	#comments-list-header
+	.comments-list-title
-		#comments-list-title
+		padding: 15px 0 10px 0
-			padding: 15px 0 10px 0
+		font-size: 1.3em
-			font-size: 1.3em
+		font-weight: 300
-			font-weight: 300
+		color: $color-text-dark-primary
-			color: $color-text-dark-primary
 
 	#comments-list-items-loading
 		font-size: 2em
@@ -32,22 +31,13 @@ $comments-width-max: 710px
 	.comment-reply-container
 		position: relative
 
-		+media-xs
-			max-width: 100%
-		+media-sm
-			max-width: 100%
-		+media-md
-			max-width: $comments-width-max
-		+media-lg
-			max-width: $comments-width-max
-
 		.nocomments
 			color: $color-text-dark-hint
 			text-align: center
 			cursor: default
 			padding: 8px 0
 
-	#comments-list
+	.comments-list
 
 		/* Each comment on the list*/
 		.comment-container,
@@ -56,7 +46,7 @@ $comments-width-max: 710px
 			flex-direction: column
 
 			position: relative
-			padding: 15px 0 25px 0
+			padding: 15px 0 20px 0
 			transition: background-color 150ms ease-in-out, padding 150ms ease-in-out, margin 150ms ease-in-out
 
 			&.comment-linked
@@ -94,8 +84,9 @@ $comments-width-max: 710px
 
 					img
 						border-radius: 50%
-						width: 20px
+						height: 24px
-						height: 20px
+						margin-top: 5px
+						width: 24px
 
 				.comment-author
 					position: relative
@@ -128,8 +119,16 @@ $comments-width-max: 710px
 			.comment-content,
 			.comment-reply-form
 				+node-details-description
+				+media-xs
+					max-width: 100%
+				+media-sm
+					max-width: 100%
+				+media-md
+					max-width: $comments-width-max
+				+media-lg
+					max-width: $comments-width-max
 
-				padding: 10px 0 0 10px
+				padding: 0 0 0 34px
 				color: darken($color-text-dark, 10%)
 				font:
 					size: 1em
@@ -144,20 +143,25 @@ $comments-width-max: 710px
 						top: 15px
 
 				p
-					line-height: 1.5em
-
 					+media-xs
 						padding:
 							left: 0
 							right: 0
 
+					line-height: 1.5em
+					margin-top: 5px
+
+					&:last-child
+						margin-bottom: 10px
+
+
 				strong, b
 					font-weight: 500
 					color: $color-info
 
 				textarea
 					+node-details-description
-					background-color: transparent
+					background-color: white
 					padding: 0 0 0 5px
 					margin-left: 15px
 					width: 100%
@@ -224,9 +228,14 @@ $comments-width-max: 710px
 
 			/* Rating, and actions such as reply */
 			.comment-meta
+				+media-xs
+					padding:
+						left: 0
+						right: 0
+
 				display: flex
 				align-items: center
-				padding: 5px 0 0 30px
+				padding-left: 35px
 				color: $color-text-dark-secondary
 
 				/* Small container for rating buttons and value */
@@ -255,10 +264,12 @@ $comments-width-max: 710px
 						cursor: default
 
 					.comment-action-rating
+						cursor: pointer
 						font-family: 'pillar-font'
 						height: 25px
+						position: relative
+						top: 4px
 						width: 16px
-						cursor: pointer
 
 					.comment-action-rating.up
 						&:hover
@@ -369,6 +380,8 @@ $comments-width-max: 710px
 					color: $color-success
 
 		.comment-reply-container
+			background-color: $color-background
+
 			// It's flex, like the others, but different direction
 			flex-direction: row
 
@@ -378,6 +391,7 @@ $comments-width-max: 710px
 					border-radius: 50%
 					width: 25px
 					height: 25px
+					box-shadow: 0 0 0 3px $color-background-light
 
 			/* textarea field, submit button and reply details */
 			.comment-reply-form
@@ -412,9 +426,6 @@ $comments-width-max: 710px
 					&.sign-in
 						display: block
 						padding: 10px
-						border-radius: 3px
-						border: thin solid $color-background
-						background-color: rgba(white, .5)
 						color: $color-text-dark-primary
 						cursor: default
 

src/styles/blog.sass

@@ -305,7 +305,7 @@
 			right: 20px
 			top: 20px
 
-		#comments-container
+		.comments-container
 			padding:
 				left: 20px
 				right: 20px

src/styles/theatre.sass

@@ -130,7 +130,7 @@ body.theatre .container-page
 			visibility: visible
 			position: relative
 
-			#comments-container #comments-list .comment-reply-container
+			.comments-container .comments-list .comment-reply-container
 				.comment-reply-form .comment-reply-field textarea
 					display: block
 
@@ -180,14 +180,14 @@ body.theatre .container-page
 					&:first-child
 						flex: 1
 
-		#comments-container
+		.comments-container
 			height: 100%
 			padding: 0 15px
 
-			#comments-list
+			.comments-list
-				#comments-list-header
+				.comments-list-title
-					#comments-list-title
+					font-size: 1.2em
-						font-size: 1.2em
+
 				.comment-container,
 				.comment-reply-container
 					padding-top: 10px

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

@@ -1,8 +1,6 @@
 | {% import 'nodes/custom/comment/_macros.html' as macros %}
-#comments-container
+#comments.comments-container
-	a(name="comments")
+	section#comments-list.comments-list
-
-	section#comments-list
 		.comment-reply-container
 			| {% if can_post_comments %}
 			.comment-reply-avatar
@@ -59,7 +57,7 @@
 						disabled,
 						id="comment_field",
 						data-parent-id="{{ node_id }}",
-						placeholder="")
+						placeholder="Join the conversation...")
 					.sign-in
 						a(href="{{ url_for('users.login') }}") Log in
 						| to comment.
@@ -67,8 +65,8 @@
 			| {% endif %}
 
 		| {% if show_comments and (nr_of_comments > 0) %}
-		section#comments-list-header
+		section.comments-list-header
-			#comments-list-title
+			.comments-list-title
 				| {{ nr_of_comments }} comment{{ nr_of_comments|pluralize }}
 			#comments-list-items
 				| {% for comment in comments['_items'] %}