Collapse long comments

Very crude a naive implementation that relies on length and number of
newlines. Should be good enough for most cases.

Clicking on such comments will expand them.

1 files changed, 43 insertions, 0 deletions

diff --git a/apps/comments/css/comments.css b/apps/comments/css/comments.css
index 85569102e1d..57a731184a0 100644
--- a/apps/comments/css/comments.css
+++ b/apps/comments/css/comments.css
@@ -31,6 +31,49 @@
 	line-height: 28px;
 }
 
+#commentsTabView .comment {
+	position: relative;
+	z-index: 1;
+}
+
+#commentsTabView .comment.collapsed .message {
+	white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
+	white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
+	white-space: -pre-wrap;      /* Opera 4-6 */
+	white-space: -o-pre-wrap;    /* Opera 7 */
+	white-space: pre-wrap;       /* css-3 */
+	word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	word-break: break-all;
+	white-space: normal;
+}
+
+#commentsTabView .comment.collapsed .message {
+	max-height: 70px;
+	overflow: hidden;
+}
+
+#commentsTabView .comment .message-overlay {
+	display: none;
+}
+
+#commentsTabView .comment.collapsed .message-overlay {
+	display: block;
+    position: absolute;
+	z-index: 2;
+    height: 50px;
+    pointer-events: none;
+	left: 0;
+	right: 0;
+    bottom: 0;
+	background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+	background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+	background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+	background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+	background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF');
+    background-repeat: no-repeat;
+}
+
 #commentsTabView .authorRow>div {
 	display: inline-block;
 	vertical-align: middle;