From e8e5abdc239f74b0786dd686bce60c29e75f9d6f Mon Sep 17 00:00:00 2001
From: Daniel Caine <dcaine@iMac.wgtn.silverstripe.com>
Date: Wed, 22 Apr 2015 14:05:51 +1200
Subject: [PATCH] Cleanup of comments theme

---
 css/comments.css                             | 227 ++++++------
 scss/comments.scss                           | 347 +++++++++----------
 templates/CommentsInterface_singlecomment.ss |  36 +-
 3 files changed, 308 insertions(+), 302 deletions(-)

diff --git a/css/comments.css b/css/comments.css
index fe51670..d375270 100644
--- a/css/comments.css
+++ b/css/comments.css
@@ -1,69 +1,107 @@
-/* line 12, ../scss/comments.scss */
-#comments-holder {
+/* line 1, ../scss/comments.scss */
+.comments-holder-container {
   clear: both;
 }
-/* line 15, ../scss/comments.scss */
-#comments-holder h2 {
-  margin: 30px 0 10px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid #eee;
-}
-/* line 21, ../scss/comments.scss */
-#comments-holder h3 {
-  margin-top: 0;
-}
-/* line 25, ../scss/comments.scss */
-#comments-holder .field {
+/* line 4, ../scss/comments.scss */
+.comments-holder-container .field {
   clear: left;
 }
-/* line 29, ../scss/comments.scss */
-#comments-holder .num,
-#comments-holder .author {
+/* line 8, ../scss/comments.scss */
+.comments-holder-container .num,
+.comments-holder-container .author {
   font-size: 1.3em;
 }
-/* line 34, ../scss/comments.scss */
-#comments-holder .num {
+/* line 13, ../scss/comments.scss */
+.comments-holder-container .num {
   color: #999;
   margin-right: 5px;
 }
-/* line 39, ../scss/comments.scss */
-#comments-holder .num-total {
+/* line 18, ../scss/comments.scss */
+.comments-holder-container .num-total {
   line-height: 40px;
   margin-bottom: 0;
 }
-/* line 44, ../scss/comments.scss */
-#comments-holder .comments-list {
+/* line 23, ../scss/comments.scss */
+.comments-holder-container .comments-list {
   margin: 0;
 }
-/* line 49, ../scss/comments.scss */
-#comments-holder .comment {
+/* line 27, ../scss/comments.scss */
+.comments-holder-container .comment-count {
+  margin: 15px 0;
+}
+/* line 32, ../scss/comments.scss */
+.comments-holder-container .commenting-area {
+  margin-top: 50px;
+}
+/* line 35, ../scss/comments.scss */
+.comments-holder-container .commenting-area label.left {
+  font-weight: normal;
+}
+/* line 40, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed {
+  margin-top: 4em;
+  text-align: right;
+}
+/* line 44, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed .action-links {
+  margin: 20px 0 10px;
+}
+/* line 47, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed .action-links li {
+  display: inline;
+  list-style-type: none;
+  margin-left: 20px;
+}
+/* line 52, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed .action-links li:first-child {
+  margin-left: 0;
+}
+/* line 56, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed .action-links li.comment-reply-action {
+  float: right;
+}
+/* line 61, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed .action-links a {
+  background-image: none;
+}
+/* line 64, ../scss/comments.scss */
+.comments-holder-container .commenting-rss-feed .action-links a::first-letter {
+  text-transform: capitalize;
+}
+/* line 71, ../scss/comments.scss */
+.comments-holder-container .no-comments-yet {
+  display: inline-block;
+  margin-top: 10px;
+}
+
+/* line 78, ../scss/comments.scss */
+.comment {
   clear: both;
   list-style-type: none;
-  overflow: auto;
+  overflow: hidden;
   padding: 20px 0 10px;
   position: relative;
 }
-/* line 57, ../scss/comments.scss */
-#comments-holder .comment.author-comment:after {
+/* line 86, ../scss/comments.scss */
+.comment.author-comment:after {
   content: 'Author';
   float: right;
   position: absolute;
   top: 1.5em;
-  right: 0;
+  right: 0.5em;
   font-size: 1em;
   font-weight: bold;
-  color: #00acee;
 }
-/* line 68, ../scss/comments.scss */
-#comments-holder .comment.author-comment .comment-text {
-  border: 1px solid #00acee;
+/* line 96, ../scss/comments.scss */
+.comment.author-comment > .comment-text {
+  border: 1px solid blue;
 }
-/* line 75, ../scss/comments.scss */
-#comments-holder .comment.spam .comment-text {
-  border: 1px dashed #f48b33;
+/* line 103, ../scss/comments.scss */
+.comment.spam .comment-text {
+  border: 1px dashed orange;
 }
-/* line 80, ../scss/comments.scss */
-#comments-holder .comment .comment-text {
+/* line 108, ../scss/comments.scss */
+.comment .comment-text {
   background-color: #fff;
   border: 1px solid #ddd;
   box-shadow: none;
@@ -74,100 +112,73 @@
   white-space: pre-line;
   word-wrap: break-word;
 }
-/* line 91, ../scss/comments.scss */
-#comments-holder .comment .comment-text p:last-child {
+/* line 119, ../scss/comments.scss */
+.comment .comment-text p:last-child {
   margin-bottom: 0;
 }
-/* line 96, ../scss/comments.scss */
-#comments-holder .comment .date {
+/* line 124, ../scss/comments.scss */
+.comment .date {
   font-size: 16px;
 }
-/* line 99, ../scss/comments.scss */
-#comments-holder .comment .date:before {
+/* line 127, ../scss/comments.scss */
+.comment .date:before {
   content: '\0000a0\0000a0\0000a0\0000a0';
 }
-/* line 104, ../scss/comments.scss */
-#comments-holder .comment.unmoderated {
-  border: 2px dashed gray;
-  margin: 2em 0 4em;
-  padding: 2em;
+/* line 133, ../scss/comments.scss */
+.comment.unmoderated > .comment-text {
+  border: 1px solid yellow;
 }
-/* line 109, ../scss/comments.scss */
-#comments-holder .comment.unmoderated .comment-moderation {
-  margin-bottom: 0;
-}
-/* line 114, ../scss/comments.scss */
-#comments-holder .comment .info {
+/* line 138, ../scss/comments.scss */
+.comment .info {
   margin-bottom: 10px;
 }
-/* line 118, ../scss/comments.scss */
-#comments-holder .comment.spam .comment {
-  border: 1px dashed #f48b33;
-  color: #f48b33;
+/* line 142, ../scss/comments.scss */
+.comment.spam .comment {
+  border: 1px dashed orange;
   border-radius: 4px;
   padding: 2.5em 1em 1em;
 }
-/* line 125, ../scss/comments.scss */
-#comments-holder .comment .comment-replies-container {
-  margin-left: 20px;
+/* line 148, ../scss/comments.scss */
+.comment .comment-replies-container {
+  clear: both;
   padding-left: 10px;
+  margin: 80px 0 0 0;
   border-left: 1px dashed #999;
 }
-/* line 130, ../scss/comments.scss */
-#comments-holder .comment .comment-replies-container .comment-reply-form-holder {
+/* line 154, ../scss/comments.scss */
+.comment .comment-replies-container .comment-reply-form-holder {
   padding: 0 10px;
 }
-/* line 133, ../scss/comments.scss */
-#comments-holder .comment .comment-replies-container .comment-replies-holder {
+/* line 157, ../scss/comments.scss */
+.comment .comment-replies-container .comment-replies-holder {
   padding: 0 0 0 10px;
 }
-/* line 140, ../scss/comments.scss */
-#comments-holder .comment-moderation {
-  float: right;
-  margin: 1em 0 2em;
-}
-/* line 144, ../scss/comments.scss */
-#comments-holder .comment-moderation .heading {
-  margin-bottom: 0;
-}
-/* line 149, ../scss/comments.scss */
-#comments-holder .action-links {
-  margin: 20px 0 10px;
-}
-/* line 152, ../scss/comments.scss */
-#comments-holder .action-links li {
-  display: inline;
-  list-style-type: none;
-  margin-left: 20px;
-  overflow: auto;
-}
-/* line 158, ../scss/comments.scss */
-#comments-holder .action-links li:first-child {
+
+/* line 163, ../scss/comments.scss */
+.comments-list.root-level {
   margin-left: 0;
 }
-/* line 162, ../scss/comments.scss */
-#comments-holder .action-links li.comment-reply-action {
+
+/* line 167, ../scss/comments.scss */
+.comment-reply-link {
   float: right;
 }
-/* line 168, ../scss/comments.scss */
-#comments-holder .comment-count {
-  margin: 15px 0;
+
+/* line 171, ../scss/comments.scss */
+.comment-moderation-options {
+  float: left;
 }
-/* line 173, ../scss/comments.scss */
-#comments-holder .commenting-area {
-  margin-top: 50px;
+
+/* line 175, ../scss/comments.scss */
+.comment-action-links {
+  margin: 20px 0 10px;
 }
-/* line 176, ../scss/comments.scss */
-#comments-holder .commenting-area label.left {
-  font-weight: normal;
+/* line 178, ../scss/comments.scss */
+.comment-action-links a:not(:last-child) {
+  margin-right: 12px;
 }
-/* line 181, ../scss/comments.scss */
-#comments-holder .commenting-rss-feed {
-  margin-top: 4em;
-  text-align: right;
-}
-/* line 186, ../scss/comments.scss */
-#comments-holder .no-comments-yet {
-  display: inline-block;
-  margin-top: 10px;
+
+/* line 183, ../scss/comments.scss */
+.commenting-rss-feed ul {
+  list-style: none;
 }
diff --git a/scss/comments.scss b/scss/comments.scss
index 2d9eedd..27d7280 100644
--- a/scss/comments.scss
+++ b/scss/comments.scss
@@ -1,190 +1,185 @@
-// Colours
-$blue:                  #00acee !default;
-$blueDark:              #0064cd !default;
-$green:                 #46a546 !default;
-$redLight:				#DB4A39 !default;
-$red:                   #9d261d !default;
-$yellow:                #ffc40d !default;
-$orange:                #f48b33 !default;
-$pink:                  #c3325f !default;
-$purple:                #7a43b6 !default;
+.comments-holder-container {
+	clear: both;
 
-#comments-holder {
-    clear: both;
+	.field {
+		clear: left;
+	}
 
-    h2 {
-        margin: 30px 0 10px;
-        padding-bottom: 5px;
-        border-bottom: 1px solid #eee;
-    }
+	.num,
+	.author {
+		font-size: 1.3em;
+	}
 
-    h3 {
-        margin-top: 0;
-    }
+	.num {
+		color: #999;
+		margin-right: 5px;
+	}
 
-    .field {
-        clear: left;
-    }
+	.num-total {
+		line-height: 40px;
+		margin-bottom: 0;
+	}
 
-    .num,
-    .author {
-        font-size: 1.3em;
-    }
+	.comments-list {
+		margin: 0;
+	}
 
-    .num {
-        color: #999;
-        margin-right: 5px;
-    }
+	.comment-count {
+		margin: 15px 0;
+	}
 
-    .num-total {
-        line-height: 40px;
-        margin-bottom: 0;
-    }
-
-    .comments-list {
-        margin: 0;
-    }
-
-    // A published comment
-    .comment {
-        clear:both;
-        list-style-type: none;
-        overflow: auto;
-        padding: 20px 0 10px;
-        position: relative;
-
-        &.author-comment {
-            &:after {
-				content: 'Author';
-				float: right;
-				position: absolute;
-				top: 1.5em;
-				right: 0;
-				font-size: 1em;
-				font-weight: bold;
-				color: $blue;
-			}
-
-			.comment-text {
-				border: 1px solid $blue;
-			}
+	// The comment form
+	.commenting-area {
+		margin-top: 50px;
 
+		label.left{
+			font-weight: normal;
 		}
+	}
 
-		&.spam {
-			.comment-text {
-				border: 1px dashed $orange;
+	.commenting-rss-feed {
+		margin-top: 4em;
+		text-align: right;
+
+		.action-links {
+			margin: 20px 0 10px;
+
+			li {
+				display: inline;
+				list-style-type: none;
+				margin-left: 20px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+
+				&.comment-reply-action {
+					float: right;
+				}
+			}
+
+			a {
+				background-image: none;
+
+				&::first-letter {
+					text-transform: capitalize;
+				}
 			}
 		}
+	}
 
-		.comment-text {
-			background-color: #fff;
-			border: 1px solid #ddd;
-			box-shadow: none;
-			margin: 0;
-			padding: 0 15% 0 20px;
-			white-space: pre;
-			white-space: pre-wrap;
-			white-space: pre-line;
-			word-wrap: break-word;
-
-			p:last-child {
-				margin-bottom: 0;
-			}
-		}
-
-		.date {
-			font-size: 16px;
-
-			&:before {
-				content: '\0000a0\0000a0\0000a0\0000a0';
-			}
-		}
-
-		&.unmoderated {
-			border: 2px dashed gray;
-			margin: 2em 0 4em;
-			padding: 2em;
-
-			.comment-moderation {
-				margin-bottom: 0; // Remove the margin to compensate for unmoderated comment padding.
-			}
-        }
-
-        .info {
-            margin-bottom: 10px;
-        }
-
-        &.spam .comment{
-            border: 1px dashed $orange;
-            color: $orange;
-            border-radius: 4px;
-            padding: 2.5em 1em 1em;
-        }
-
-		.comment-replies-container {
-			margin-left: 20px;
-			padding-left: 10px;
-			border-left: 1px dashed #999;
-			
-			.comment-reply-form-holder {
-				padding: 0 10px; // Prevent clipping issues on slideUp/Down
-			}
-			.comment-replies-holder {
-				padding: 0 0 0 10px;
-			}
-		}
-    }
-
-    // Admin actions
-    .comment-moderation {
-        float: right;
-        margin: 1em 0 2em;
-
-        .heading {
-            margin-bottom: 0;
-        }
-    }
-
-    .action-links {
-        margin: 20px 0 10px;
-
-        li {
-            display: inline;
-            list-style-type: none;
-            margin-left: 20px;
-			overflow: auto;
-
-            &:first-child {
-                margin-left: 0;
-            }
-			
-			&.comment-reply-action {
-				float: right;
-			}
-        }
-    }
-
-    .comment-count {
-        margin: 15px 0;
-    }
-
-    // The comment form
-    .commenting-area {
-        margin-top: 50px;
-
-        label.left{
-            font-weight: normal;
-        }
-    }
-
-    .commenting-rss-feed {
-        margin-top: 4em;
-        text-align: right;
-    }
-
-    .no-comments-yet {
-        display: inline-block;
-        margin-top: 10px;
-    }
+	.no-comments-yet {
+		display: inline-block;
+		margin-top: 10px;
+	}
+}
+
+// A published comment
+.comment {
+	clear:both;
+	list-style-type: none;
+	overflow: hidden;
+	padding: 20px 0 10px;
+	position: relative;
+
+	&.author-comment {
+		&:after {
+			content: 'Author';
+			float: right;
+			position: absolute;
+			top: 1.5em;
+			right: 0.5em;
+			font-size: 1em;
+			font-weight: bold;
+		}
+
+		> .comment-text {
+			border: 1px solid blue;
+		}
+
+	}
+
+	&.spam {
+		.comment-text {
+			border: 1px dashed orange;
+		}
+	}
+
+	.comment-text {
+		background-color: #fff;
+		border: 1px solid #ddd;
+		box-shadow: none;
+		margin: 0;
+		padding: 0 15% 0 20px;
+		white-space: pre;
+		white-space: pre-wrap;
+		white-space: pre-line;
+		word-wrap: break-word;
+
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.date {
+		font-size: 16px;
+
+		&:before {
+			content: '\0000a0\0000a0\0000a0\0000a0';
+		}
+	}
+
+	&.unmoderated {
+		> .comment-text {
+			border: 1px solid yellow;
+		}
+	}
+
+	.info {
+		margin-bottom: 10px;
+	}
+
+	&.spam .comment {
+		border: 1px dashed orange;
+		border-radius: 4px;
+		padding: 2.5em 1em 1em;
+	}
+
+	.comment-replies-container {
+		clear: both;
+		padding-left: 10px;
+		margin: 80px 0 0 0;
+		border-left: 1px dashed #999;
+
+		.comment-reply-form-holder {
+			padding: 0 10px; // Prevent clipping issues on slideUp/Down
+		}
+		.comment-replies-holder {
+			padding: 0 0 0 10px;
+		}
+	}
+}
+
+.comments-list.root-level {
+	margin-left: 0;
+}
+
+.comment-reply-link {
+	float: right;
+}
+
+.comment-moderation-options {
+	float: left;
+}
+
+.comment-action-links {
+	margin: 20px 0 10px;
+
+	a:not(:last-child) {
+		margin-right: 12px;
+	}
+}
+
+.commenting-rss-feed ul {
+	list-style: none;
 }
diff --git a/templates/CommentsInterface_singlecomment.ss b/templates/CommentsInterface_singlecomment.ss
index c764005..0ff14ea 100755
--- a/templates/CommentsInterface_singlecomment.ss
+++ b/templates/CommentsInterface_singlecomment.ss
@@ -11,32 +11,32 @@
 		<% end_if %>
 	</p>
 <% end_if %>
-
+	
 <div class="comment-text" id="<% if $isPreview %>comment-preview<% else %>$Permalink<% end_if %>">
 	<p>$EscapedComment</p>
 </div>
 
 <% if not $isPreview %>
 	<% if $ApproveLink || $SpamLink || $HamLink || $DeleteLink || $RepliesEnabled %>
-		<ul class="action-links">
-			<% if $ApproveLink %>
-				<li><a href="$ApproveLink.ATT" class="approve"><% _t('CommentsInterface_singlecomment_ss.APPROVE', 'approve this comment') %></a></li>
-			<% end_if %>
-			<% if $SpamLink %>
-				<li><a href="$SpamLink.ATT" class="spam"><% _t('CommentsInterface_singlecomment_ss.ISSPAM','this comment is spam') %></a></li>
-			<% end_if %>
-			<% if $HamLink %>
-				<li><a href="$HamLink.ATT" class="ham"><% _t('CommentsInterface_singlecomment_ss.ISNTSPAM','this comment is not spam') %></a></li>
-			<% end_if %>
-			<% if $DeleteLink %>
-				<li><a href="$DeleteLink.ATT" class="delete"><% _t('CommentsInterface_singlecomment_ss.REMCOM','remove this comment') %></a></li>
-			<% end_if %>
+		<div class="comment-action-links">
+			<div class="comment-moderation-options">
+				<% if $ApproveLink %>
+					<a href="$ApproveLink.ATT" class="approve"><% _t('CommentsInterface_singlecomment_ss.APPROVE', 'approve it') %></a>
+				<% end_if %>
+				<% if $SpamLink %>
+					<a href="$SpamLink.ATT" class="spam"><% _t('CommentsInterface_singlecomment_ss.ISSPAM','spam it') %></a>
+				<% end_if %>
+				<% if $HamLink %>
+					<a href="$HamLink.ATT" class="ham"><% _t('CommentsInterface_singlecomment_ss.ISNTSPAM','not spam') %></a>
+				<% end_if %>
+				<% if $DeleteLink %>
+					<a href="$DeleteLink.ATT" class="delete"><% _t('CommentsInterface_singlecomment_ss.REMCOM','reject it') %></a>
+				<% end_if %>
+			</div>
 			<% if $RepliesEnabled %>
-				<li class="comment-reply-action">
-					<a class="comment-reply-link" href="#{$ReplyForm.FormName}">Reply to $AuthorName.XML</a>
-				</li>
+				<a class="comment-reply-link" href="#{$ReplyForm.FormName}">Reply to $AuthorName.XML</a>
 			<% end_if %>
-		</ul>
+		</div>
 	<% end_if %>
 	
 	<% include CommentReplies %>