vanzhiganov/clipbucket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modified : add comment function

Browse source 
modified : comments style impreoved
This commit is contained in:
Fahad Abbas 2015-09-15 06:10:17 +00:00
parent 96f18a1cb3
commit 2303c34d1c
6 changed files with 377 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
upload/js/functions.js
View file

@ -1757,7 +1757,14 @@ function decode64(input) {
$("#comment_output").fadeIn();
$("#comment_output").html(data.err);
setTimeout(function(){ $("#comment_output").fadeOut(); }, 3000);
clear_comment_form();
var str = data.err;
var string_finder = str.substring(0, 12);
if (string_finder != 'Mailer Error'){
clear_comment_form();
}
}
if(data.msg!='')
{

151
upload/styles/cb_27/layout/blocks/comments/comment.html
View file

@ -10,16 +10,26 @@
<li id="reply-{$comment.comment_id}" class="commentBox clearfix reply-{$comment.comment_id}">
<div class="replay-holder">
<div class="users popover-holder clearfix">
<div class="comments-box clearfix">
{$user_id = $comment.userid}
{$user=$userquery->get_user_details($user_id)}
<a href="{$userquery->profile_link($user)}">
<img src="{avatar details=$user}" alt="" class="main_pic">
<span>{name($user)}</span>
</a>
</div>
<div class="clearfix text-right">
<i class="text-muted">{$comment.date_added|niceTime}</i>
<div class="comment-avatar">
<img src="{avatar details=$user}" alt="" class="reply_pic">
</div>
<div class="comment-info">
<a href="{$userquery->profile_link($user)}">
<span>{name($user)}</span>
</a>
<p>{$comment.comment|comment}</p>
<div class="view-date clearfix">
<span>
<i class="glyphicon glyphicon-time"></i>
{$comment.date_added|niceTime}
</span>
</div>
</div>
<!-- <i class="text-muted">- {$reply.date_added|niceTime}</i> -->
</div>
<div class="reply">
<div class="sizeSmaller bold" style="font-size:12px;">
@ -29,9 +39,6 @@
{if has_access('admin_del_access') || $comment.userid==userid() || $comment.type_owner_id==userid()} &middot; <a href="javascript:void(0)" onclick="delete_comment('{$comment.comment_id}','{$type}')">{lang code='delete'}</a>{/if}
</div>
</div>
<div class="clearfix">
{$comment.comment|comment}
</div>
</div>
</li>
@ -46,7 +53,7 @@
{ANCHOR place='before_compose_box'}
<div class="textarea-comment clearfix">
<textarea name="comment" id="reply_box_{$comment_id}" class="form-control" placeholder="Reply..."></textarea>
<i class="remove-{$comment_id}" onclick="remove_reply_box({$comment_id})"><span style="color:#e50000"><strong>X</strong></span> Close</i>
<i class="remove-{$comment_id} remove-icon" onclick="remove_reply_box({$comment_id})"><span style="color:#e50000;cursor:pointer"><strong>X</strong></span></i>
</div>
<input type="button" name="add_reply" id="add_reply_button_{$comment_id}" class="btn btn-danger pull-right add-reply" onclick="add_comment_js('reply_form_{$comment_id}','{$type}')" value='{lang code="Reply"}'>
@ -56,38 +63,42 @@
{else}
<li id="comment_{$comment.comment_id}" class="commentBox clearfix" {$comment_attr}>
<div class="users popover-holder clearfix">
{$user_id=$comment.userid}
{$user=$userquery->get_user_details($user_id)}
<a href="{$userquery->profile_link($user)}" >
<img src="{avatar details=$user}" alt="" class="comnt_pic">
<span>
{name($user)}
</span>
</a>
<!-- <i class="text-muted">- {$comment.date_added|niceTime}</i> -->
</div>
<div class="clearfix text-right">
<i class="text-muted">{$comment.date_added|niceTime}</i>
</div>
<div class="reply">
<div class="sizeSmaller bold" style="font-size:12px;">
{$video = $cbvid->get_video($type_id)}
{if $myquery->is_commentable($video,'v') && $userquery->login_check('',true)}
<a href="javascript:void(0)" onclick="reply_box('{$comment.comment_id}')">{lang code='reply'}</a>
{/if}
{if !$comment.userid==userid() || has_access('admin_access',true)}
&middot; <a href="javascript:void(0)" onclick="spam_comment('{$comment.comment_id}','{$type}','{$type_id}')">{lang code='spam'}</a>
{/if}
{if has_access('admin_del_access') || $comment.userid==userid() || $comment.type_owner_id==userid()} &middot; <a href="javascript:void(0)" onclick="delete_comment('{$comment.comment_id}','{$type}')">{lang code='delete'}</a>{/if}
<li id="comment_{$comment.comment_id}" class="clearfix" {$comment_attr}>
<div class="comments-box clearfix">
{$user_id=$comment.userid}
{$user=$userquery->get_user_details($user_id)}
<div class="comment-avatar">
<img src="{avatar details=$user}" alt="" class="comnt_pic">
</div>
<div class="comment-info">
<a href="{$userquery->profile_link($user)}" >
{name($user)}
</a>
<!-- <i class="text-muted">- {$comment.date_added|niceTime}</i> -->
<p>{$comment.comment|comment}</p>
<div class="view-date clearfix">
<span>
<i class="glyphicon glyphicon-time"></i>
{$comment.date_added|niceTime}
</span>
</div>
</div>
<!-- <div class="clearfix text-right">
<i class="text-muted">{$comment.date_added|niceTime}</i>
</div> -->
<div class="reply">
<div class="sizeSmaller bold" style="font-size:12px;">
{$video = $cbvid->get_video($type_id)}
{if $myquery->is_commentable($video,'v') && $userquery->login_check('',true)}
<a href="javascript:void(0)" onclick="reply_box('{$comment.comment_id}')">{lang code='reply'}</a>
{/if}
{if !$comment.userid==userid() || has_access('admin_access',true)}
&middot; <a href="javascript:void(0)" onclick="spam_comment('{$comment.comment_id}','{$type}','{$type_id}')">{lang code='spam'}</a>
{/if}
{if has_access('admin_del_access') || $comment.userid==userid() || $comment.type_owner_id==userid()} &middot; <a href="javascript:void(0)" onclick="delete_comment('{$comment.comment_id}','{$type}')">{lang code='delete'}</a>{/if}
</div>
</div>
</div>
<div class="clearfix">
{$comment.comment|comment}
</div>
<div class="reply-box-{$comment.comment_id} clearfix" style="display:none;">
</div>
@ -101,18 +112,27 @@
<li id="reply-{$comment.comment_id}" class="commentBox clearfix reply-{$reply.comment_id}">
<div class="replay-holder">
<div class="users popover-holder clearfix">
<div class="comments-box clearfix">
{$user_id = $reply.userid}
{$user=$userquery->get_user_details($user_id)}
<a href="{$userquery->profile_link($user)}">
<div class="comment-avatar">
<img src="{avatar details=$user}" alt="" class="reply_pic">
<span>{name($user)}</span>
</a>
</div>
<div class="comment-info">
<a href="{$userquery->profile_link($user)}">
<span>{name($user)}</span>
</a>
<p>{$reply.comment|comment}</p>
<div class="view-date clearfix">
<span>
<i class="glyphicon glyphicon-time"></i>
{$comment.date_added|niceTime}
</span>
</div>
</div>
<!-- <i class="text-muted">- {$reply.date_added|niceTime}</i> -->
</div>
<div class="clearfix text-right">
<i class="text-muted">{$comment.date_added|niceTime}</i>
</div>
<div class="reply">
<div class="sizeSmaller bold" style="font-size:12px;">
{if !$comment.userid==userid() || has_access('admin_access',true)}
@ -121,9 +141,6 @@
{if has_access('admin_del_access') || $comment.userid==userid() || $comment.type_owner_id==userid()} &middot; <a href="javascript:void(0)" onclick="delete_comment('{$reply.comment_id}','{$type}')">{lang code='delete'}</a>{/if}
</div>
</div>
<div class="clearfix">
{$reply.comment|comment}
</div>
</div>
</li>
{else}
@ -131,17 +148,24 @@
<div class="more-comments-{$comment.comment_id}" style="display:none;">
<li id="reply-{$comment.comment_id}" class="commentBox clearfix reply-{$reply.comment_id}">
<div class="replay-holder">
<div class="users popover-holder clearfix">
<div class="comments-box clearfix">
{$user_id = $reply.userid}
{$user=$userquery->get_user_details($user_id)}
<a href="{$userquery->profile_link($user)}">
<div class="comment-avatar">
<img src="{avatar details=$user}" alt="" class="reply_pic">
<span>{name($user)}</span>
</a>
<!-- <i class="text-muted">- {$reply.date_added|niceTime}</i> -->
</div>
<div class="clearfix text-right">
<i class="text-muted">{$comment.date_added|niceTime}</i>
</div>
<div class="comment-info">
<a href="{$userquery->profile_link($user)}">
<span>{name($user)}</span>
</a>
<p>{$reply.comment|comment}</p>
<div class="view-date clearfix">
<span>
<i class="glyphicon glyphicon-time"></i>
{$comment.date_added|niceTime}
</span>
</div>
</div>
</div>
<div class="reply">
<div class="sizeSmaller bold" style="font-size:12px;">
@ -149,9 +173,6 @@
{if has_access('admin_del_access') || $comment.userid==userid() || $comment.type_owner_id==userid()} &middot; <a href="javascript:void(0)" onclick="delete_comment('{$reply.comment_id}','{$type}')">{lang code='delete'}</a>{/if}
</div>
</div>
<div class="clearfix">
{$reply.comment|comment}
</div>
</div>
</li>
@ -169,7 +190,7 @@
</ul>
{if $flag}
<div class="comments-load-more moad-more-btn-{$flag} clearfix" data-flag="{$flag}">
<span class="btn btn-danger">More Comments...</span>
<span class="btn btn-sm btn-danger">More Replies...</span>
</div>
{/if}

39
upload/styles/cb_27/layout/blocks/comments/comments.html
View file

@ -1,16 +1,18 @@
<ul id="comments-ul">
{if $comments}
{foreach from=$comments.comments item=comment}
{include file="$style_dir/blocks/comments/comment.html" comment=$comment type=$type parents=$comments.parents}
{/foreach}
<div class="break2"></div>
{else}
<div class="break2"></div>
<li class="col-lg-12 no-related no-comments clearfix">
<span class="well well-info btn-block">No Comments Added</span>
</li>
{/if}
</ul>
<div class="comments clearfix">
<ul id="comments-ul">
{if $comments}
{foreach from=$comments.comments item=comment}
{include file="$style_dir/blocks/comments/comment.html" comment=$comment type=$type parents=$comments.parents}
{/foreach}
<div class="break2"></div>
{else}
<div class="break2"></div>
<li class="col-lg-12 no-related no-comments clearfix">
<span class="well well-info btn-block">No Comments Added</span>
</li>
{/if}
</ul>
</div>
@ -23,6 +25,17 @@
width: 20px;
height: 20px;
}
.textarea-comment {
position: relative;
}
.textarea-comment textarea {
margin-bottom: 10px;
}
.textarea-comment .remove-icon {
position: absolute;
top: 10px;
right: 10px;
}
</style>
<script type="text/javascript">

4
upload/styles/cb_27/layout/global_header.html
View file

@ -71,8 +71,8 @@
{if this_page('watch_video') || this_page('view_item') || this_page('view_channel')}
<link rel="stylesheet" href="{$theme}/css/watch-video.css">
{/if}
<link rel="stylesheet" href="{$theme}/css/comments.css" />
{/if}
{if this_page('view_channel')}
<link rel="stylesheet" href="{$theme}/css/view-channel-header.css">

1
upload/styles/cb_27/theme/css/comments.css Executable file
View file

@ -0,0 +1 @@
.comments-holder{padding-top:20px}.comments-holder h4{border-bottom:1px solid #ecf0f1;padding-bottom:20px;font-size:20px}.comments-holder .add-comments{padding-top:20px}.comments-holder .add-comments textarea{height:44px!important;border-radius:4px!important;resize:none}.comments-holder .add-comments .btn-primary{padding:8px 0!important;border-radius:4px!important;font-size:18px}.comments>ul{list-style-type:none;padding:0;margin:0}.comments>ul>li{padding:10px 0 0;position:relative}.comments>ul>li .comment-avatar{float:left;width:50px;margin-right:10px}.comments>ul>li .comment-avatar img{width:50px;height:50px;border-radius:50%;border:1px solid #eee}.comments>ul>li .comment-info{overflow:hidden}.comments>ul>li .comment-info a{color:#333}.comments>ul>li .comments-box{padding-bottom:10px;border-bottom:1px solid #f3f5f6}.comments>ul>li:first-child{border-bottom:0}.comments>ul>li .btn-info{padding:8px 15px!important;border-radius:4px;font-size:16px;margin-top:15px}.comments>ul>li .users img{border-radius:50%;width:33px;height:33px;vertical-align:middle;display:inline-block;margin-right:10px;border:1px solid #ecf0f1}.comments>ul>li .users span{vertical-align:middle;display:inline-block;font-size:16px}.comments>ul>li .reply{position:absolute;top:26px;right:0}.comments>ul>li .reply>ul{list-style-type:none}.comments>ul>li .reply>ul>li{display:inline-block;position:relative;padding:0 6px}.comments>ul>li .reply>ul>li:after{content:'';display:block;clear:both;position:absolute;top:50%;left:0;width:1px;height:14px;background-color:#777;margin-top:-7px}.comments>ul>li .reply>ul>li:first-child:after{content:'';display:block;clear:both;display:none}.comments>ul>li .reply>ul>li>a{color:#777;font-size:12px}.comments>ul>li .reply>ul>li>a:hover{color:#09c}.comments>ul>li p{font-size:13px;margin:7px 0 0;color:#777}.comments>ul>li .view-date{padding:5px 0 0 4px}.comments>ul>li .view-date span{font-size:15px;border-right:1px solid #bdc3c7;padding:0 10px;font-weight:300;color:#777;font-size:13px}.comments>ul>li .view-date span:first-child{padding-left:0}.comments>ul>li .view-date span:last-child{padding-right:0;border-right:0}.comments>ul>li .view-date span i{margin-right:10px;display:inline-block}.comments>ul>li .view-date span i:first-child{margin-left:0}.comments>ul>li .view-date span i.view{width:19px;height:11px}.comments>ul>li .view-date span i.date{width:17px;height:16px}.comments>ul>li .replay-holder{padding-left:40px;margin-top:10px;padding-top:0;position:relative;border-top:0}.comments>ul>li .replay-holder .comment-avatar{float:left;width:35px;margin-right:10px}.comments>ul>li .replay-holder .comment-avatar img{width:35px;height:35px;border-radius:50%;border:1px solid #eee}.comments>ul>li .replay-holder .reply{top:5px}.comments>ul>li .replay-holder:before{content:'';display:block;clear:both;position:absolute;top:0;left:10px;width:1px;height:20px;background-color:#777}.comments>ul>li .replay-holder:after{content:'';display:block;clear:both;position:absolute;top:20px;left:10px;width:16px;height:1px;background-color:#777}

254
upload/styles/cb_27/theme/less/comments.less Executable file
View file

@ -0,0 +1,254 @@
/*
rameez add css
*/
.comments-holder {
padding-top: 20px;
h4 {
border-bottom: 1px solid #ecf0f1;
padding-bottom: 20px;
font-size: 20px;
}
.add-comments {
padding-top: 20px;
textarea {
height: 44px !important;
border-radius: 4px !important;
resize:none;
}
.btn-primary {
padding: 8px 0px !important;
border-radius: 4px !important;
font-size: 18px;
}
}
}
//new add
.comments {
> ul {
list-style-type: none;
padding: 0;
margin: 0;
> li {
padding:10px 0px 0;
position: relative;
.comment-avatar {
float: left;
width: 50px;
margin-right: 10px;
img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #eee;
}
}
.comment-info {
overflow: hidden;
a {
color: #333;
}
span {
}
}
.comments-box {
padding-bottom: 10px;
border-bottom:1px solid #f3f5f6;
}
&:first-child {
border-bottom:none;
}
.btn-info {
padding: 8px 15px !important;
border-radius: 4px;
font-size: 16px;
margin-top: 15px;
}
.users {
img {
border-radius: 50%;
width: 33px;
height: 33px;
vertical-align: middle;
display: inline-block;
margin-right: 10px;
border: 1px solid #ecf0f1;
}
span {
vertical-align: middle;
display: inline-block;
font-size: 16px;
}
}
.reply {
position: absolute;
top: 26px;
right: 0;
> ul {
list-style-type: none;
> li {
display: inline-block;
position: relative;
padding: 0 6px;
&:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 50%;
left: 0;
width: 1px;
height: 14px;
background-color: #777;
margin-top: -7px;
}
&:first-child {
&:after {
content: '';
display: block;
clear: both;
display: none;
}
}
> a {
color:#777;
font-size: 12px;
&:hover {
color: #0099cc;
}
}
}
}
}
p {
font-size: 13px;
margin:7px 0 0;
color: #777;
}
.view-date {
padding: 5px 0 0 4px;
span {
font-size:15px;
border-right:1px solid #bdc3c7;
padding:0 10px;
font-weight: 300;
color: #777;
font-size: 13px;
&:first-child {
padding-left: 0px;
}
&:last-child {
padding-right: 0px;
border-right:none;
}
i {
margin-right: 10px;
display: inline-block;
&:first-child {
margin-left: 0px;
}
}
i.view {
width: 19px;
height: 11px;
}
i.date {
width: 17px;
height: 16px;
}
}
}
//new add
.replay-holder {
padding-left:40px;
margin-top: 10px;
padding-top: 0px;
position: relative;
border-top: none;
.comment-avatar {
float: left;
width: 35px;
margin-right: 10px;
img {
width: 35px;
height: 35px;
border-radius: 50%;
border: 1px solid #eee;
}
}
.reply {
top: 5px;
}
&:before {
content: '';
display: block;
clear: both;
position: absolute;
top: 0;
left: 10px;
width: 1px;
height: 20px;
background-color: #777;
}
&:after {
content: '';
display: block;
clear: both;
position: absolute;
top: 20px;
left: 10px;
width: 16px;
height: 1px;
background-color: #777;
}
}
}
}
}