quattro: collapse threaded comment box
This commit is contained in:
Fabrixxm
parent
c8b4ce9cca
commit
b15352f650
5 changed files with 106 additions and 3 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue