quattro: collapse threaded comment box

This commit is contained in:
Fabrixxm 2012-11-09 11:58:35 -05:00
parent c8b4ce9cca
commit b15352f650
5 changed files with 106 additions and 3 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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;

View File

@ -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; }

View File

@ -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