From b15352f650c21a98256db9c5e274afbe75d00354 Mon Sep 17 00:00:00 2001
From: Fabrixxm <fabrix.xm@gmail.com>
Date: Fri, 9 Nov 2012 11:58:35 -0500
Subject: [PATCH] quattro: collapse threaded comment box

---
 view/theme/quattro/dark/style.css  | 28 ++++++++++++++++++++++++++++
 view/theme/quattro/green/style.css | 28 ++++++++++++++++++++++++++++
 view/theme/quattro/lilac/style.css | 28 ++++++++++++++++++++++++++++
 view/theme/quattro/quattro.less    | 23 +++++++++++++++++++++--
 view/theme/quattro/wall_thread.tpl |  2 +-
 5 files changed, 106 insertions(+), 3 deletions(-)

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index fff08b2e4c..65f9762452 100644
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -1050,6 +1050,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;
diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index 9584b019aa..5c875feafb 100644
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -1050,6 +1050,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;
diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css
index 4c9c74e758..5640f5ba59 100644
--- a/view/theme/quattro/lilac/style.css
+++ b/view/theme/quattro/lilac/style.css
@@ -1050,6 +1050,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 62260ef393..1c4da1bf7b 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -509,7 +509,7 @@ section {
 		a { float: right; }
 		input { float: right; }
 	}
-	
+		
 }
 
 
@@ -523,6 +523,25 @@ section {
 		left: 0px !important;
 	}
 	.wall-item-links { padding-left: 12px; }
+	
+	.commentbox {
+		height: 0px;
+		overflow: hidden;
+		.wall-item-comment-wrapper {
+			border-top: 1px solid @CommentBoxEmptyBorderColor;
+			height: 0px; overflow: hidden;
+		}
+		.transition();
+	}
+	
+	&:hover .commentbox {
+		height:auto; overflow: visible;
+		.wall-item-comment-wrapper {
+			border-top: 0px;
+			height:auto;overflow: visible;
+		}
+		.transition();
+	}
 }
 
 /* 'tag' item type */
@@ -544,6 +563,7 @@ section {
 .wall-item-comment-wrapper {
 	margin: 1em 2em 1em 60px;
 	.comment-edit-photo { display: none; }
+	
 	textarea {	
 		height: 1em; width: 100%; font-size: 10px;
 		color: @CommentBoxEmptyColor;
@@ -555,7 +575,6 @@ section {
 		color: @CommentBoxFullColor;
 		border: 1px solid @CommentBoxFullBorderColor;
 	}
-	
 }
 
 .threaded .wall-item-comment-wrapper { margin-left: 0px; }
diff --git a/view/theme/quattro/wall_thread.tpl b/view/theme/quattro/wall_thread.tpl
index 622968ab0a..b39dda3a2e 100644
--- a/view/theme/quattro/wall_thread.tpl
+++ b/view/theme/quattro/wall_thread.tpl
@@ -132,7 +132,7 @@
 	</div>
 	
 	{{ if $item.threaded }}{{ if $item.comment }}{{ if $item.indent==comment }}
-	<div class="wall-item-bottom">
+	<div class="wall-item-bottom commentbox">
 		<div class="wall-item-links"></div>
 		<div class="wall-item-comment-wrapper">
 					$item.comment