quattro: fix collapsed thread, fix comment box, style previev comment, add 'expand / collapse" thread
This commit is contained in:
Fabrixxm
parent
fc07f50fd8
commit
ec3d8a80cd
7 changed files with 181 additions and 50 deletions
|
|
@ -1075,6 +1075,7 @@ section {
|
|||
width: 710px;
|
||||
border: 1px solid #2d2d2d;
|
||||
margin-top: 10px;
|
||||
background-color: #fce94f;
|
||||
}
|
||||
.comment-edit-preview .contact-photo {
|
||||
width: 32px;
|
||||
|
|
@ -1091,12 +1092,17 @@ section {
|
|||
padding-left: 12px;
|
||||
}
|
||||
.comment-edit-preview .wall-item-container {
|
||||
width: 700px;
|
||||
width: 90%;
|
||||
}
|
||||
.comment-edit-preview .tread-wrapper {
|
||||
width: 700px;
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
background-color: #fce94f;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.comment-edit-preview .wall-item-conv {
|
||||
display: none;
|
||||
}
|
||||
.shiny {
|
||||
border-right: 10px solid #fce94f;
|
||||
|
|
@ -1143,36 +1149,64 @@ section {
|
|||
height: 25px;
|
||||
}
|
||||
/* threaded comments */
|
||||
.children {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.children .hide-comments-outer {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.children .comment-edit-preview {
|
||||
width: 660px;
|
||||
}
|
||||
.children .comment-edit-preview .wall-item-container {
|
||||
width: 610px;
|
||||
}
|
||||
.children .children {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.children .children .wall-item-container {
|
||||
width: 710px;
|
||||
}
|
||||
.children .children .children {
|
||||
margin-left: 40px;
|
||||
.children .children .comment-edit-preview {
|
||||
width: 620px;
|
||||
}
|
||||
.children .children .comment-edit-preview .wall-item-container {
|
||||
width: 620px;
|
||||
}
|
||||
.children .children .children .wall-item-container {
|
||||
width: 670px;
|
||||
}
|
||||
.children .children .children .children {
|
||||
margin-left: 40px;
|
||||
.children .children .children .comment-edit-preview {
|
||||
width: 580px;
|
||||
}
|
||||
.children .children .children .comment-edit-preview .wall-item-container {
|
||||
width: 580px;
|
||||
}
|
||||
.children .children .children .children .wall-item-container {
|
||||
width: 630px;
|
||||
}
|
||||
.children .children .children .children .children {
|
||||
margin-left: 40px;
|
||||
.children .children .children .children .comment-edit-preview {
|
||||
width: 540px;
|
||||
}
|
||||
.children .children .children .children .comment-edit-preview .wall-item-container {
|
||||
width: 540px;
|
||||
}
|
||||
.children .children .children .children .children .wall-item-container {
|
||||
width: 590px;
|
||||
}
|
||||
.children .children .children .children .children .comment-edit-preview {
|
||||
width: 500px;
|
||||
}
|
||||
.children .children .children .children .children .comment-edit-preview .wall-item-container {
|
||||
width: 500px;
|
||||
}
|
||||
.children .children .children .children .children .children {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.threaded .hide-comments-outer {
|
||||
margin-left: 20px;
|
||||
.children .children .children .children .children .children .hide-comments-outer {
|
||||
margin-left: 0px;
|
||||
}
|
||||
/*.threaded .hide-comments-outer { margin-left: 20px; }*/
|
||||
span[id^="showmore-teaser"] {
|
||||
background: url("showmore-bg.jpg") no-repeat center bottom;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1075,6 +1075,7 @@ section {
|
|||
width: 710px;
|
||||
border: 1px solid #2d2d2d;
|
||||
margin-top: 10px;
|
||||
background-color: #ddffdd;
|
||||
}
|
||||
.comment-edit-preview .contact-photo {
|
||||
width: 32px;
|
||||
|
|
@ -1091,12 +1092,17 @@ section {
|
|||
padding-left: 12px;
|
||||
}
|
||||
.comment-edit-preview .wall-item-container {
|
||||
width: 700px;
|
||||
width: 90%;
|
||||
}
|
||||
.comment-edit-preview .tread-wrapper {
|
||||
width: 700px;
|
||||
width: 90%;
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
background-color: #ddffdd;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.comment-edit-preview .wall-item-conv {
|
||||
display: none;
|
||||
}
|
||||
.shiny {
|
||||
border-right: 10px solid #ddffdd;
|
||||
|
|
@ -1143,36 +1149,64 @@ section {
|
|||
height: 25px;
|
||||
}
|
||||
/* threaded comments */
|
||||
.children {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.children .hide-comments-outer {
|
||||
margin-left: 60px;
|
||||
}
|
||||
.children .comment-edit-preview {
|
||||
width: 660px;
|
||||
}
|
||||
.children .comment-edit-preview .wall-item-container {
|
||||
width: 610px;
|
||||
}
|
||||
.children .children {
|
||||
margin-left: 40px;
|
||||
}
|
||||
.children .children .wall-item-container {
|
||||
width: 710px;
|
||||
}
|
||||
.children .children .children {
|
||||
margin-left: 40px;
|
||||
.children .children .comment-edit-preview {
|
||||
width: 620px;
|
||||
}
|
||||
.children .children .comment-edit-preview .wall-item-container {
|
||||
width: 620px;
|
||||
}
|
||||
.children .children .children .wall-item-container {
|
||||
width: 670px;
|
||||
}
|
||||
.children .children .children .children {
|
||||
margin-left: 40px;
|
||||
.children .children .children .comment-edit-preview {
|
||||
width: 580px;
|
||||
}
|
||||
.children .children .children .comment-edit-preview .wall-item-container {
|
||||
width: 580px;
|
||||
}
|
||||
.children .children .children .children .wall-item-container {
|
||||
width: 630px;
|
||||
}
|
||||
.children .children .children .children .children {
|
||||
margin-left: 40px;
|
||||
.children .children .children .children .comment-edit-preview {
|
||||
width: 540px;
|
||||
}
|
||||
.children .children .children .children .comment-edit-preview .wall-item-container {
|
||||
width: 540px;
|
||||
}
|
||||
.children .children .children .children .children .wall-item-container {
|
||||
width: 590px;
|
||||
}
|
||||
.children .children .children .children .children .comment-edit-preview {
|
||||
width: 500px;
|
||||
}
|
||||
.children .children .children .children .children .comment-edit-preview .wall-item-container {
|
||||
width: 500px;
|
||||
}
|
||||
.children .children .children .children .children .children {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.threaded .hide-comments-outer {
|
||||
margin-left: 20px;
|
||||
.children .children .children .children .children .children .hide-comments-outer {
|
||||
margin-left: 0px;
|
||||
}
|
||||
/*.threaded .hide-comments-outer { margin-left: 20px; }*/
|
||||
span[id^="showmore-teaser"] {
|
||||
background: url("showmore-bg.jpg") no-repeat center bottom;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -545,6 +545,7 @@ section {
|
|||
width: 710px;
|
||||
border: 1px solid @Grey5;
|
||||
margin-top: 10px;
|
||||
background-color: @JotPreviewBackgroundColor;
|
||||
|
||||
.contact-photo { width: 32px; height: 32px; margin-left: 16px;
|
||||
/*background: url(../../../images/icons/22/user.png) no-repeat center center;*/
|
||||
|
|
@ -555,8 +556,13 @@ section {
|
|||
}
|
||||
.wall-item-links { padding-left: 12px; }
|
||||
|
||||
.wall-item-container { width: 700px; }
|
||||
.tread-wrapper { width: 700px; padding: 0; margin: 10px 0;}
|
||||
.wall-item-container { width: 90%; }
|
||||
.tread-wrapper {
|
||||
width: 90%; padding: 0; margin: 10px 0;
|
||||
background-color: @JotPreviewBackgroundColor;
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.wall-item-conv { display: none; }
|
||||
}
|
||||
|
||||
.shiny { border-right:10px solid @ShinyBorderColor; }
|
||||
|
|
@ -599,32 +605,49 @@ section {
|
|||
|
||||
/* threaded comments */
|
||||
.children {
|
||||
margin-top: 1em;
|
||||
.hide-comments-outer { margin-left:60px; }
|
||||
|
||||
.comment-edit-preview { width: 660px;
|
||||
.wall-item-container { width: 610px; }
|
||||
}
|
||||
|
||||
& .children {
|
||||
|
||||
margin-left: 40px;
|
||||
.wall-item-container { width: 710px; }
|
||||
.comment-edit-preview { width: 620px;
|
||||
.wall-item-container { width: 620px; }
|
||||
}
|
||||
|
||||
& .children {
|
||||
margin-left: 40px;
|
||||
.wall-item-container { width: 670px; }
|
||||
.comment-edit-preview { width: 580px;
|
||||
.wall-item-container { width: 580px; }
|
||||
}
|
||||
|
||||
& .children {
|
||||
margin-left: 40px;
|
||||
.wall-item-container { width: 630px; }
|
||||
.comment-edit-preview { width: 540px;
|
||||
.wall-item-container { width: 540px; }
|
||||
}
|
||||
|
||||
& .children {
|
||||
margin-left: 40px;
|
||||
.wall-item-container { width: 590px; }
|
||||
.comment-edit-preview { width: 500px;
|
||||
.wall-item-container { width: 500px; }
|
||||
}
|
||||
|
||||
.children {
|
||||
margin-left: 0px;
|
||||
.hide-comments-outer { margin-left: 0px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.threaded .hide-comments-outer { margin-left: 20px; }
|
||||
/*.threaded .hide-comments-outer { margin-left: 20px; }*/
|
||||
|
||||
span[id^="showmore-teaser"]{
|
||||
background: url("showmore-bg.jpg") no-repeat center bottom;
|
||||
|
|
|
|||
|
|
@ -42,6 +42,16 @@ function insertFormatting(comment,BBcode,id) {
|
|||
return true;
|
||||
}
|
||||
|
||||
function showThread(id) {
|
||||
$("#collapsed-comments-" + id).show()
|
||||
$("#collapsed-comments-" + id + " .collapsed-comments").show()
|
||||
}
|
||||
function hideThread(id) {
|
||||
$("#collapsed-comments-" + id).hide()
|
||||
$("#collapsed-comments-" + id + " .collapsed-comments").hide()
|
||||
}
|
||||
|
||||
|
||||
function cmtBbOpen(id) {
|
||||
$("#comment-edit-bb-" + id).show();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
{{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
|
||||
|
||||
<div class="wall-item-container item-tag $item.indent">
|
||||
<div class="wall-item-item">
|
||||
<div class="wall-item-info">
|
||||
|
|
@ -18,6 +20,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{ if $item.thread_level!=1 }}</div>{{ endif }}
|
||||
|
||||
{{ if $item.flatten }}
|
||||
<div class="wall-item-comment-wrapper" >$item.comment</div>
|
||||
{{ endif }}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,19 @@
|
|||
<span id="hide-comments-$item.id"
|
||||
class="hide-comments fakelink"
|
||||
onclick="showHideComments($item.id);">$item.hide_text</span>
|
||||
{{ if $item.thread_level==3 }} -
|
||||
<span id="hide-thread-$item-id"
|
||||
class="fakelink"
|
||||
onclick="showThread($item.id);">expand</span> /
|
||||
<span id="hide-thread-$item-id"
|
||||
class="fakelink"
|
||||
onclick="hideThread($item.id);">collapse</span> thread{{ endif }}
|
||||
</div>
|
||||
<div id="collapsed-comments-$item.id" class="collapsed-comments" style="display: none;">
|
||||
{{endif}}
|
||||
{{ endif }}
|
||||
|
||||
{{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
|
||||
|
||||
<div class="wall-item-decor">
|
||||
<span class="icon s22 star $item.isstarred" id="starred-$item.id" title="$item.star.starred">$item.star.starred</span>
|
||||
|
|
@ -97,7 +105,7 @@
|
|||
<div class="wall-item-like" id="wall-item-like-$item.id">$item.like</div>
|
||||
<div class="wall-item-dislike" id="wall-item-dislike-$item.id">$item.dislike</div>
|
||||
</div>
|
||||
{{ if $item.threaded }}{{ if $item.comment }}{{ if $item.indent==comment }}
|
||||
{{ if $item.threaded }}{{ if $item.comment }}{{ if $item.thread_level!=1 }}
|
||||
<div class="wall-item-bottom">
|
||||
<div class="wall-item-links"></div>
|
||||
<div class="wall-item-comment-wrapper">
|
||||
|
|
@ -109,24 +117,27 @@
|
|||
</div>
|
||||
|
||||
|
||||
{{ for $item.children as $item }}
|
||||
<div class="children">
|
||||
|
||||
{{ for $item.children as $child }}
|
||||
{{ if $item.type == tag }}
|
||||
{{ inc wall_item_tag.tpl }}{{ endinc }}
|
||||
{{ inc wall_item_tag.tpl with $item=$child }}{{ endinc }}
|
||||
{{ else }}
|
||||
{{ inc $item.template }}{{ endinc }}
|
||||
{{ inc $item.template with $item=$child }}{{ endinc }}
|
||||
{{ endif }}
|
||||
</div>
|
||||
{{ endfor }}
|
||||
|
||||
{{ if $item.thread_level!=1 }}</div>{{ endif }}
|
||||
|
||||
|
||||
{{if $mode == display}}
|
||||
{{ else }}
|
||||
{{if $item.comment_lastcollapsed}}</div>{{endif}}
|
||||
{{ endif }}
|
||||
|
||||
{{ if $item.indent!=comment}}
|
||||
{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
|
||||
<div class="wall-item-comment-wrapper" >$item.comment</div>
|
||||
{{ endif }}
|
||||
{{ endif }}{{ endif }}{{ endif }}
|
||||
|
||||
|
||||
{{ if $item.flatten }}
|
||||
<div class="wall-item-comment-wrapper" >$item.comment</div>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,25 @@
|
|||
{{ else }}
|
||||
{{if $item.comment_firstcollapsed}}
|
||||
<div class="hide-comments-outer">
|
||||
<span id="hide-comments-total-$item.id" class="hide-comments-total">$item.num_comments</span> <span id="hide-comments-$item.id" class="hide-comments fakelink" onclick="showHideComments($item.id);">$item.hide_text</span>
|
||||
<span id="hide-comments-total-$item.id"
|
||||
class="hide-comments-total">$item.num_comments</span>
|
||||
<span id="hide-comments-$item.id"
|
||||
class="hide-comments fakelink"
|
||||
onclick="showHideComments($item.id);">$item.hide_text</span>
|
||||
{{ if $item.thread_level==3 }} -
|
||||
<span id="hide-thread-$item-id"
|
||||
class="fakelink"
|
||||
onclick="showThread($item.id);">expand</span> /
|
||||
<span id="hide-thread-$item-id"
|
||||
class="fakelink"
|
||||
onclick="hideThread($item.id);">collapse</span> thread{{ endif }}
|
||||
</div>
|
||||
<div id="collapsed-comments-$item.id" class="collapsed-comments" style="display: none;">
|
||||
{{endif}}
|
||||
{{ endif }}
|
||||
|
||||
{{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
|
||||
|
||||
<div class="wall-item-decor">
|
||||
<span class="icon s22 star $item.isstarred" id="starred-$item.id" title="$item.star.starred">$item.star.starred</span>
|
||||
{{ if $item.lock }}<span class="icon s22 lock fakelink" onclick="lockview(event,$item.id);" title="$item.lock">$item.lock</span>{{ endif }}
|
||||
|
|
@ -112,24 +125,26 @@
|
|||
</div>
|
||||
|
||||
|
||||
{{ for $item.children as $item }}
|
||||
<div class="children">
|
||||
{{ for $item.children as $child }}
|
||||
{{ if $item.type == tag }}
|
||||
{{ inc wall_item_tag.tpl }}{{ endinc }}
|
||||
{{ inc wall_item_tag.tpl with $item=$child }}{{ endinc }}
|
||||
{{ else }}
|
||||
{{ inc $item.template }}{{ endinc }}
|
||||
{{ inc $item.template with $item=$child }}{{ endinc }}
|
||||
{{ endif }}
|
||||
</div>
|
||||
{{ endfor }}
|
||||
|
||||
{{ if $item.thread_level!=1 }}</div>{{ endif }}
|
||||
|
||||
|
||||
{{if $mode == display}}
|
||||
{{ else }}
|
||||
{{if $item.comment_lastcollapsed}}</div>{{endif}}
|
||||
{{ endif }}
|
||||
|
||||
{{ if $item.indent!=comment}}
|
||||
{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
|
||||
<div class="wall-item-comment-wrapper" >$item.comment</div>
|
||||
{{ endif }}
|
||||
{{ endif }}{{ endif }}{{ endif }}
|
||||
|
||||
|
||||
{{ if $item.flatten }}
|
||||
<div class="wall-item-comment-wrapper" >$item.comment</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue