From e8e5abdc239f74b0786dd686bce60c29e75f9d6f Mon Sep 17 00:00:00 2001 From: Daniel Caine 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 %>

<% end_if %> - +

$EscapedComment

<% if not $isPreview %> <% if $ApproveLink || $SpamLink || $HamLink || $DeleteLink || $RepliesEnabled %> - + <% end_if %> <% include CommentReplies %>