From b15352f650c21a98256db9c5e274afbe75d00354 Mon Sep 17 00:00:00 2001 From: Fabrixxm 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 fff08b2e4..65f976245 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 9584b019a..5c875feaf 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 4c9c74e75..5640f5ba5 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 62260ef39..1c4da1bf7 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 622968ab0..b39dda3a2 100644 --- a/view/theme/quattro/wall_thread.tpl +++ b/view/theme/quattro/wall_thread.tpl @@ -132,7 +132,7 @@ {{ if $item.threaded }}{{ if $item.comment }}{{ if $item.indent==comment }} -
+
$item.comment