quattro: collapse threaded comment box

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index fff08b2e4c36a5a496e926f61f2dc292f88b1b0f..65f97624527c32ae9b338c2b4e5e20e8f2c40f4d 100644 (file)
--- 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 9584b019aab54300f25d18c2478db64aeaad87c5..5c875feafb3652d3bad71237ff9ce3eda87c62be 100644 (file)
--- 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 4c9c74e7588cf5e0b829bff21cef1d87da4884c1..5640f5ba5969272f3ee4ec1c6dfac7948445082b 100644 (file)
--- 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 62260ef3930f8c30bbb65bbf22c5dc18e33461e7..1c4da1bf7b00c3f3baaa67ef02bbd5308bf46f90 100644 (file)
--- 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 622968ab0a2a0e01e42a745f7368fa91048adb0f..b39dda3a2e23b7dfc086bdae3b12eed7c1e8cfa6 100644 (file)
--- 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