From 72802a6fcf75646a8a8c4568bd97c9ac6cbe4b8e Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Tue, 27 Oct 2020 00:41:36 +0000
Subject: [PATCH] Show exerpt of hidden comments

---
 webclient/src/Comments.js     |  2 +-
 webclient/src/Style-light.css | 30 +++++++++++++++++++++---------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/webclient/src/Comments.js b/webclient/src/Comments.js
index 7d8f6ef..633b6f5 100644
--- a/webclient/src/Comments.js
+++ b/webclient/src/Comments.js
@@ -93,7 +93,7 @@ class Article extends React.Component {
 					</p>
 				</div>
 
-				<div className='text' dangerouslySetInnerHTML={{ __html: c.text }} />
+				<div className={collapsed ? 'text hidden' : 'text'}  dangerouslySetInnerHTML={{ __html: c.text }} />
 
 				{hidden && hasChildren ?
 					<div className='comment lined info pointer' onClick={() => this.expandComment(cid)}>[show {this.countComments(c)-1} more]</div>
diff --git a/webclient/src/Style-light.css b/webclient/src/Style-light.css
index e436126..2a7ba80 100644
--- a/webclient/src/Style-light.css
+++ b/webclient/src/Style-light.css
@@ -159,6 +159,27 @@ span.source {
 	margin-top: -0.5rem;
 }
 
+.comment .text.hidden > p {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: none;
+	color: #828282;
+}
+
+.comment .text.hidden > p:first-child {
+	display: block;
+}
+
+.comment .collapser {
+	padding-left: 0.5rem;
+	padding-right: 1.5rem;
+}
+
+.comment .pointer {
+	cursor: pointer;
+}
+
 .toggleDot {
 	position: fixed;
 	bottom: 1rem;
@@ -197,12 +218,3 @@ span.source {
 .search form {
 	display: inline;
 }
-
-.collapser {
-	padding-left: 0.5rem;
-	padding-right: 1.5rem;
-}
-
-.pointer {
-	cursor: pointer;
-}