From 152137d475a02b0f336f205f3ac162e394a839bf Mon Sep 17 00:00:00 2001
From: Gordon Anderson
Date: Mon, 15 Feb 2016 17:05:17 +0700
Subject: [PATCH] FIX: Layout with Gravatar fixed
---
css/comments.css | 16 +-
css/comments.css.map | 2 +-
scss/comments.scss | 387 ++++++++++---------
templates/CommentsInterface_singlecomment.ss | 9 +-
4 files changed, 221 insertions(+), 193 deletions(-)
diff --git a/css/comments.css b/css/comments.css
index 22975c0..a597c0b 100644
--- a/css/comments.css
+++ b/css/comments.css
@@ -61,7 +61,7 @@
clear: both;
list-style-type: none;
overflow: hidden;
- padding: 20px 0 10px;
+ padding: 20px 0 20px 0;
position: relative;
}
.comment.author-comment:after {
@@ -79,12 +79,20 @@
.comment.spam .comment-text {
border: 1px dashed orange;
}
+.comment img.gravatar {
+ float: left;
+ margin: 20px;
+ width: 90px;
+ height: 90px;
+ border: none;
+}
.comment .comment-text {
background-color: #fff;
border: 1px solid #ddd;
box-shadow: none;
margin: 0;
- padding: 0 15% 0 20px;
+ padding: 0 20px 0 20px;
+ min-height: 130px;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
@@ -93,6 +101,10 @@
.comment .comment-text p:last-child {
margin-bottom: 0;
}
+.comment .comment-text.hasGravatar {
+ padding: 0 20px 0 130px;
+ min-height: 130px;
+}
.comment .date {
font-size: 16px;
}
diff --git a/css/comments.css.map b/css/comments.css.map
index 296eb91..66d6ba4 100644
--- a/css/comments.css.map
+++ b/css/comments.css.map
@@ -1,6 +1,6 @@
{
"version": 3,
-"mappings": "AAAA,0BAA2B;EAC1B,KAAK,EAAE,IAAI;;AAEX,iCAAO;EACN,KAAK,EAAE,IAAI;;AAGZ;kCACQ;EACP,SAAS,EAAE,KAAK;;AAGjB,+BAAK;EACJ,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,GAAG;;AAGlB,qCAAW;EACV,WAAW,EAAE,IAAI;EACjB,aAAa,EAAE,CAAC;;AAGjB,yCAAe;EACd,MAAM,EAAE,CAAC;;AAGV,yCAAe;EACd,MAAM,EAAE,MAAM;;AAIf,2CAAiB;EAChB,UAAU,EAAE,IAAI;;AAEhB,sDAAU;EACT,WAAW,EAAE,MAAM;;AAIrB,+CAAqB;EACpB,UAAU,EAAE,GAAG;EACf,UAAU,EAAE,KAAK;;AAEjB,6DAAc;EACb,MAAM,EAAE,WAAW;;AAEnB,gEAAG;EACF,OAAO,EAAE,MAAM;EACf,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,IAAI;;AAEjB,4EAAc;EACb,WAAW,EAAE,CAAC;;AAGf,qFAAuB;EACtB,KAAK,EAAE,KAAK;;AAId,+DAAE;EACD,gBAAgB,EAAE,IAAI;;AAEtB,6EAAgB;EACf,cAAc,EAAE,UAAU;;AAM9B,2CAAiB;EAChB,OAAO,EAAE,YAAY;EACrB,UAAU,EAAE,IAAI;;;AAKlB,QAAS;EACR,KAAK,EAAC,IAAI;EACV,eAAe,EAAE,IAAI;EACrB,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,WAAW;EACpB,QAAQ,EAAE,QAAQ;;AAGjB,6BAAQ;EACP,OAAO,EAAE,QAAQ;EACjB,KAAK,EAAE,KAAK;EACZ,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,KAAK;EACV,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,IAAI;;AAGlB,uCAAgB;EACf,MAAM,EAAE,cAAc;;AAMvB,2BAAc;EACb,MAAM,EAAE,iBAAiB;;AAI3B,sBAAc;EACb,gBAAgB,EAAE,IAAI;EACtB,MAAM,EAAE,cAAc;EACtB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,YAAY;EACrB,WAAW,EAAE,GAAG;EAChB,WAAW,EAAE,QAAQ;EACrB,WAAW,EAAE,QAAQ;EACrB,SAAS,EAAE,UAAU;;AAErB,mCAAa;EACZ,aAAa,EAAE,CAAC;;AAIlB,cAAM;EACL,SAAS,EAAE,IAAI;;AAEf,qBAAS;EACR,OAAO,EAAE,8BAA8B;;AAKxC,oCAAgB;EACf,MAAM,EAAE,gBAAgB;;AAI1B,cAAM;EACL,aAAa,EAAE,IAAI;;AAGpB,sBAAgB;EACf,MAAM,EAAE,iBAAiB;EACzB,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,aAAa;;AAGvB,mCAA2B;EAC1B,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;EAClB,MAAM,EAAE,UAAU;EAClB,WAAW,EAAE,eAAe;;AAE5B,8DAA2B;EAC1B,OAAO,EAAE,MAAM;;AAEhB,2DAAwB;EACvB,OAAO,EAAE,UAAU;;;AAKtB,yBAA0B;EACzB,WAAW,EAAE,CAAC;;;AAGf,mBAAoB;EACnB,KAAK,EAAE,KAAK;;;AAGb,2BAA4B;EAC3B,KAAK,EAAE,IAAI;;;AAGZ,qBAAsB;EACrB,MAAM,EAAE,WAAW;;AAEnB,wCAAmB;EAClB,YAAY,EAAE,IAAI;;;AAIpB,uBAAwB;EACvB,UAAU,EAAE,IAAI",
+"mappings": "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",
"sources": ["../scss/comments.scss"],
"names": [],
"file": "comments.css"
diff --git a/scss/comments.scss b/scss/comments.scss
index 27d7280..a0d967e 100644
--- a/scss/comments.scss
+++ b/scss/comments.scss
@@ -1,185 +1,202 @@
-.comments-holder-container {
- clear: both;
-
- .field {
- clear: left;
- }
-
- .num,
- .author {
- font-size: 1.3em;
- }
-
- .num {
- color: #999;
- margin-right: 5px;
- }
-
- .num-total {
- line-height: 40px;
- margin-bottom: 0;
- }
-
- .comments-list {
- margin: 0;
- }
-
- .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;
-
- .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;
- }
- }
- }
- }
-
- .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;
-}
+.comments-holder-container {
+ clear: both;
+
+ .field {
+ clear: left;
+ }
+
+ .num,
+ .author {
+ font-size: 1.3em;
+ }
+
+ .num {
+ color: #999;
+ margin-right: 5px;
+ }
+
+ .num-total {
+ line-height: 40px;
+ margin-bottom: 0;
+ }
+
+ .comments-list {
+ margin: 0;
+ }
+
+ .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;
+
+ .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;
+ }
+ }
+ }
+ }
+
+ .no-comments-yet {
+ display: inline-block;
+ margin-top: 10px;
+ }
+}
+
+// A published comment
+.comment {
+ clear:both;
+ list-style-type: none;
+ overflow: hidden;
+ padding: 20px 0 20px 0;
+ 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;
+ }
+ }
+
+ img.gravatar {
+ float: left;
+ margin: 20px;
+ width: 90px;
+ height: 90px;
+ border: none;
+ }
+
+ .comment-text {
+ background-color: #fff;
+ border: 1px solid #ddd;
+ box-shadow: none;
+ margin: 0;
+ padding: 0 20px 0 20px;
+ min-height: 130px;
+ white-space: pre;
+ white-space: pre-wrap;
+ white-space: pre-line;
+ word-wrap: break-word;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .comment-text.hasGravatar {
+ // leave enough space on the left for the default gravatar size
+ padding: 0 20px 0 130px;
+
+ // Ensure there is enough vertical space for the Gravatar
+ min-height: 130px;
+ }
+
+ .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 47a16d1..7182bca 100755
--- a/templates/CommentsInterface_singlecomment.ss
+++ b/templates/CommentsInterface_singlecomment.ss
@@ -6,13 +6,12 @@
$AuthorName.XML
<% end_if %>
$Created.Nice ($Created.Ago)
- <% if $Gravatar %>
-
- <% end_if %>
<% end_if %>
-
-
$EscapedComment