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 { .wall-item-container.comment .wall-item-links {
padding-left: 12px; 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 */ /* 'tag' item type */
.wall-item-container.item-tag .wall-item-content { .wall-item-container.item-tag .wall-item-content {
opacity: 0.5; opacity: 0.5;

View file

@ -1050,6 +1050,34 @@ section {
.wall-item-container.comment .wall-item-links { .wall-item-container.comment .wall-item-links {
padding-left: 12px; 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 */ /* 'tag' item type */
.wall-item-container.item-tag .wall-item-content { .wall-item-container.item-tag .wall-item-content {
opacity: 0.5; opacity: 0.5;

View file

@ -1050,6 +1050,34 @@ section {
.wall-item-container.comment .wall-item-links { .wall-item-container.comment .wall-item-links {
padding-left: 12px; 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 */ /* 'tag' item type */
.wall-item-container.item-tag .wall-item-content { .wall-item-container.item-tag .wall-item-content {
opacity: 0.5; opacity: 0.5;

View file

@ -509,7 +509,7 @@ section {
a { float: right; } a { float: right; }
input { float: right; } input { float: right; }
} }
} }
@ -523,6 +523,25 @@ section {
left: 0px !important; left: 0px !important;
} }
.wall-item-links { padding-left: 12px; } .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 */ /* 'tag' item type */
@ -544,6 +563,7 @@ section {
.wall-item-comment-wrapper { .wall-item-comment-wrapper {
margin: 1em 2em 1em 60px; margin: 1em 2em 1em 60px;
.comment-edit-photo { display: none; } .comment-edit-photo { display: none; }
textarea { textarea {
height: 1em; width: 100%; font-size: 10px; height: 1em; width: 100%; font-size: 10px;
color: @CommentBoxEmptyColor; color: @CommentBoxEmptyColor;
@ -555,7 +575,6 @@ section {
color: @CommentBoxFullColor; color: @CommentBoxFullColor;
border: 1px solid @CommentBoxFullBorderColor; border: 1px solid @CommentBoxFullBorderColor;
} }
} }
.threaded .wall-item-comment-wrapper { margin-left: 0px; } .threaded .wall-item-comment-wrapper { margin-left: 0px; }

View file

@ -132,7 +132,7 @@
</div> </div>
{{ if $item.threaded }}{{ if $item.comment }}{{ if $item.indent==comment }} {{ 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-links"></div>
<div class="wall-item-comment-wrapper"> <div class="wall-item-comment-wrapper">
$item.comment $item.comment