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

view photo page structure and style updated

Browse source 
custom-elements.js renamed to ui_plugins.js
fixes for watch video done
This commit is contained in:
jamilrehman 2016-03-30 18:57:53 +05:00
parent d1356f778f
commit ac0e25984c
10 changed files with 251 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
upload/styles/cb_28/layout/blocks/photo.html
View file

@ -46,6 +46,13 @@
</div>
{/if}
{if $display_type == "relatedPhoto_sidebar"}
<a class="photo-holder" href="{$cbphoto->photo_links($photo,'view_item')}" title="Tolpis barbata (mariluzpicado)">
{get_photo details=$photo output='html' size='l' class='img-responsive'}
<i class="icon-zoom"></i>
</a>
{/if}
{if $display_type == 'subscription'}
<div class="grid_view clearfix" style="width:auto; margin-right:4px;">
<a href="{$cbphoto->photo_links($photo,'view_item')}">{get_photo details=$photo output='html' class='photoThumbBox' width='110'}</a>

2
upload/styles/cb_28/layout/global_header.html
View file

@ -52,7 +52,7 @@
<script src="{$theme}/js/bootstrap.min.js"></script>
<script src="{$theme}/js/dropdowns-enhancement.js"></script>
<script src="{$theme}/js/custom-elements.js"></script>
<script src="{$theme}/js/ui_plugins.js"></script>
<script src="{$theme}/js/progress-circle.js"></script>

2
upload/styles/cb_28/layout/photos.html
View file

@ -114,7 +114,7 @@
{/foreach}
</div>
{else}
<div class="col-md-12 nopadding">No Collection</div>
<div class="well well-info">No Collection</div>
{/if}
</div>
{/if}

237
upload/styles/cb_28/layout/view_photo.html
View file

@ -1,10 +1,13 @@
<!-- Defining object type-->
{lang code='photo' assign='object_type'}
<div class="custom-container photos-block clearfix">
{assign var=json value=$photo.photo_details|json_decode}
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 mouse_hover">
<section class="clearfix photo-area">
<div class="photo-holder relative">
{assign var=json value=$photo.photo_details|json_decode}
<div id="main" class="clearfix container">
<div class="clearfix">
<section id="content" class="clearfix">
<div class="clearfix leaderboard-ad ad">
{AD place='ad_728x90'}
</div>
<div class="clearfix photo-view">
{get_photo details=$photo size='l' class='img-responsive center-block' output='html' height="100"}
{assign var=objctid value=$object.ci_id}
@ -14,72 +17,53 @@
{assign var=nextLink value=$cbphoto->collection->get_next_prev_item($objctid,$collid,'next')}
<a class="btn view-photo-nxt fa fa-angle-right fa-3x" href="{$cbphoto->photo_links($nextLink.0,'view_item')}"><i>next</i></a>
<a class="btn view-photo-pre fa fa-angle-left fa-3x" href="{$cbphoto->photo_links($preLink.0,'view_item')}"><i>prev</i></a>
<div class="btn-holder clearfix">
<a class="btn view-photo-nxt icon-right-arrow" href="{$cbphoto->photo_links($nextLink.0,'view_item')}"><i>next</i></a>
<a class="btn view-photo-pre icon-left-arrow" href="{$cbphoto->photo_links($preLink.0,'view_item')}"><i>prev</i></a>
</div>
</div>
<div class="video_info_actions clearfix">
<div class="clearfix title-area">
<div class="clearfix title-area">
<h1>{wordwrap($photo.photo_title,8, "\n", true)}</h1>
<span class="views-count clearfix">
<i class="fa fa-eye"></i>&nbsp;{*$vdo.views|number_format*}
</span>
<section class="view-details clearfix">
<header class="clearfix details">
<h1>{$photo.photo_title|truncate:55}</h1>
<div class="user-video-info clearfix">
<a href="{$userquery->profile_link($video)}" class="avatar">
<img src="{$userquery->avatar($video,'small',userid())}" class="img-responsive">
</a>
<h2 class="user-title">
<a href="{$userquery->profile_link($user)}">{$user.username}</a>
</h2>
<div class="views-counter">
<span>{prettyNum($photo.views)}</span>
</div>
</div>
<div class="user-likes-count clearfix">
<div class="user-info col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a href="{$userquery->profile_link($channel)}" class="avatar">
<img src="{$userquery->getUserThumb($user)}" width="55" height="55">
</a>
<div class="sub-title">
<strong class="user_title">
<a href="{$userquery->profile_link($user)}">{$user.username}</a>
</strong>
{if $photo.userid != userid()}
<div class="user-likes-sub clearfix">
<div class="clearfix like-rating col-lg-6 col-md-6 col-sm-6 col-xs-12" id="rating_container">
{if $photo.allow_rating != 'no'}
{show_video_rating rating=$photo.rating ratings=$photo.rated_by total='10' id=$photo.photo_id type=photo}
{/if}
</div>
<div class="clearfix subscribe-col col-lg-6 col-md-6 col-sm-6 col-xs-12">
{if $photo.userid != userid()}
<a id="subscribeUser" class="btn btn-subscribe btn-primary" href="javascript:void(0)">
<span>{lang('Subscribe')}</span>
</a>
{/if}
</div>
</div>
<div class="clearfix like-rating col-lg-6 col-md-6 col-sm-6 col-xs-12" id="rating_container">
{if $vdo.allow_rating != 'no'}
{show_video_rating rating=$vdo.rating ratings=$vdo.rated_by total='10' id=$vdo.videoid type=video}
{/if}
</div>
</div>
</div>
<div class="tune-tabs clearfix">
<div id="messageFav" class="alert alert-info marginTop" style="display:none"></div>
</header>
<div id="messageFav" class="alert alert-info marginTop" style="display:none"></div>
<div class="view-tabs clearfix">
<ul class="clearfix nav nav-tabs">
<li class="active">
<a href="#cb-item-info" data-toggle="tab"><span class="icon-info"></span>{lang('Info')}</a>
</li>
<li>
<a href="#comments-block" data-toggle="tab"><span class="icon-chat"></span>Comments</a>
<a href="#cb-item-share" data-toggle="tab"><span class="icon-share"></span>Share/Embed</a>
</li>
<li>
<a href="https://twitter.com/share" target="_blank">
<span class="icon-tw"></span> twitter
</a>
</li>
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]={videoLink($video)|urlencode}&p[images][0]={get_thumb vdetails=$video}&p[title]={$video.title|title|urlencode}&p[summary]={$video.description|description|urlencode}" target="_blank">
<span class="icon-fb"></span> facebook
</a>
</li>
<li>
<a href="https://plus.google.com/share?url={urlencode(videolink($video))}" target="_blank">
<span class="icon-google"></span>
</a>
</li>
<li>
<a href="#cb-item-share" data-toggle="tab"><span class="icon-share"></span>{lang('Share')}</a>
</li>
<li>
<a href="#cb-item-addto" data-toggle="tab"><span class="icon-add"></span>{lang('Add to')}</a>
<a href="#cb-item-addto" data-toggle="tab"><span class="icon-plusrounded"></span>{lang('Add to')}</a>
</li>
<li>
<a href="#cb-item-report" data-toggle="tab"><span class="icon-flag"></span>{lang('Report')}
@ -102,6 +86,23 @@
</div>
<div class="tab-pane fade in clearfix" id="cb-item-share">
<ul class="social-share">
<li>
<a href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]={videoLink($video)|urlencode}&p[images][0]={get_thumb vdetails=$video}&p[title]={$video.title|title|urlencode}&p[summary]={$video.description|description|urlencode}" target="_blank" class="btn-fb icon-facebook">
<span>Facebook</span>
</a>
</li>
<li>
<a href="https://twitter.com/share" target="_blank" class="btn-tw icon-twitter">
<span>Twitter</span>
</a>
</li>
<li>
<a href="https://plus.google.com/share?url={urlencode(videolink($video))}" target="_blank" class="btn-gplus icon-gplus">
<span>Google Plus</span>
</a>
</li>
</ul>
{show_share_form id=$photo.photo_id type=Photo}
</div>
@ -124,64 +125,88 @@
<div class="tab-pane fade in clearfix" id="cb-item-report">
{show_flag_form id=$photo.photo_id type=Photo}
</div>
<div class="tab-pane fade in clearfix" id="comments-block">
<div id="test1"></div>
<div id="reply" class="clearfix">
<div class="pad-bottom">
<div class="addComment clearfix">
<div class="com_count" id="com_count">
<span>{lang code='comments'} </span> {$photo.total_comments}
</div>
{if $myquery->is_commentable($photo,'p')}
{include file="$style_dir/blocks/comments/add_comment.html" id=$photo.photo_id type=p}
{else}
<div class="alert alert-warning">{lang code='Comments disabled for this photo'}</div>
{/if}
</div>
<div id="comments"></div>
<div id="userCommentsList">
</div>
</div>
</div>
</div>
</section>
<div class="clearfix comments-block" id="comments-block">
<div id="test1"></div>
<div id="reply" class="clearfix">
<div class="pad-bottom">
<div class="addComment clearfix">
<div class="com_count" id="com_count">
<span>{lang code='comments'} </span> {$photo.total_comments}
</div>
{if $myquery->is_commentable($photo,'p')}
{include file="$style_dir/blocks/comments/add_comment.html" id=$photo.photo_id type=p}
{else}
<div class="alert alert-warning">{lang code='Comments disabled for this photo'}</div>
{/if}
</div>
<div id="comments"></div>
<div id="userCommentsList">
</div>
</div>
</div>
</div>
</section>
<section class="clearfix 3inner-block">
<header class="heading">
<h1>{lang code='Most Popular'}<i class="icon-arrow-right"></i></h1>
</header>
<div class="clearfix view-photo-thumbs row">
{section name=p_list loop=$photos}
{include file="$style_dir/blocks/PopularPhotos.html" photo=$photos[p_list]}
{sectionelse}
{lang code='no_results_found'}
{/section}
</div>
</section>
</div>
<aside class="col-lg-4 col-md-4 hidden-sm hidden-xs">
<div class="ad">{AD place='ad_320x250'}</div>
<section class="clearfix">
<header class="heading">
<h1>{lang code='Top Collections'} <i class="icon-arrow-right"></i></h1>
</header>
<div class="collections clearfix">
{section name=c_list loop=$collections}
<div class="clearfix">
{include file="$style_dir/blocks/topCollection.html" collection=$collections[c_list]}
<aside id="sidebar">
<div class="box-ad ad">{AD place='ad_300x250'}</div>
<h2>{lang code='Related Photos'}</h2>
<div class="clearfix sidebar-items">
{$related_photos=get_photos(['title'=>$photo.photo_title,'tags'=>$photo.photo_tags,
'exclude'=>$photo.photo_id,'show_related'=>'yes','limit'=>6,'order'=>'date_added DESC'])}
{if $related_photos}
<div class="row">
{foreach $related_photos as $photo}
<div class="item-photo col-lg-6 col-md-6 col-sm-12 col-xs-12">
{include file="$style_dir/blocks/photo.html" display_type='relatedPhoto_sidebar'}
</div>
{/foreach}
</div>
{sectionelse}
{lang code='no_results_found'}
{/section}
{else}
<div class="well well-info">No Photos Found !</div>
{/if}
</div>
</section>
</aside>
{section name=list loop=$uphotos}
{include file="$style_dir/blocks/photo.html" display_type="related_photos" photo=$uphotos[list]}
{/section}
{$row = $myquery->Get_Website_Details()}
{if $row.collectionsSection == 'yes'}
{$collections = $cbcollection->get_collections(['limit'=>5, 'active'=>'yes'])}
<h2>{lang code="Top Collections"}</h2>
<div class="clearfix collections-grid">
<div class="clearfix row">
{$limit=10}
{if $collections}
{foreach from=$collections item=collection}
{$first_col_thumb = $cbcollection->coll_first_thumb($collection,'l')}
<div class="clearfix collection-item col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="collection-holder">
<div class="photo-block">
<a href="{$cbphoto->photo_links($item,'view_item')}">
<img alt="{$collection.title}" title="{$collection.title}" class="img-responsive" id="photo_{$collection.ci_id}" src="{$first_col_thumb}">
</a>
</div>
<div class="collection-info">
<span>{$collection.total_objects}</span>Photo(s)
</div>
<img src="{$theme}/images/photo-bg.png" alt="" class="photo-bg">
</div>
<span>{$collection.collection_name}</span>
</div>
{/foreach}
</div>
{else}
<div class="well well-info">No Collection</div>
{/if}
</div>
{/if}
</aside>
{*section name=list loop=$uphotos}
{include file="$style_dir/blocks/photo.html" display_type="related_photos" photo=$uphotos[list]}
{/section*}
</div>
</div>

6
upload/styles/cb_28/layout/watch_video.html
View file

@ -13,7 +13,7 @@
<div class="clearfix leaderboard-ad ad">
{AD place='ad_728x90'}
</div>
<div class="video-details clearfix">
<section class="video-details clearfix">
<header class="clearfix details">
<h1>{$video.title|truncate:55}</h1>
<div class="user-video-info clearfix">
@ -120,7 +120,7 @@
</div>
</div>
</div>
</div>
</section>
<div class="clearfix comments-block" id="comments-block">
<div id="test1"></div>
@ -145,7 +145,7 @@
<aside id="sidebar">
<div class="box-ad ad">{AD place='ad_300x250'}</div>
<h2>Popular Videos</h2>
<div class="clearfix sidebar-videos">
<div class="clearfix sidebar-items">
{if $smarty.get.play_list}
{section name=plist loop=$items}
{include file="$style_dir/blocks/manage/account_video.html" video=$items[plist] control="onWatch" pid=$playlist.playlist_id}

88
upload/styles/cb_28/theme/css/all.css
View file

@ -696,7 +696,8 @@
.sidebar-items {
background: #fff;
padding: 16px 16px 0; }
padding: 16px 16px 0;
margin: 0 0 16px; }
.sidebar-items .featured-video {
font-size: 14px;
line-height: 14px; }
@ -1730,59 +1731,76 @@ h1 {
.video_player {
height: inherit; }
.view-details,
.video-details {
background: #fff;
padding: 16px;
margin: 0 0 16px; }
.view-details header.details,
.video-details header.details {
margin: 0 0 20px; }
.view-details header.details h1,
.video-details header.details h1 {
font-size: 25px;
line-height: 25 px;
margin: 0 0 16px;
font-weight: 600;
color: #333; }
.view-details header.details .user-video-info,
.video-details header.details .user-video-info {
margin: 0 0 12px;
display: table;
width: 100%; }
.view-details header.details .user-video-info .views-counter,
.view-details header.details .user-video-info .avatar,
.view-details header.details .user-video-info .user-title,
.video-details header.details .user-video-info .views-counter,
.video-details header.details .user-video-info .avatar,
.video-details header.details .user-video-info .user-title {
display: table-cell;
vertical-align: middle; }
.view-details header.details .user-video-info .avatar,
.video-details header.details .user-video-info .avatar {
width: 58px; }
.view-details header.details .user-video-info .avatar img,
.video-details header.details .user-video-info .avatar img {
width: 58px;
height: 58px;
border-radius: 29px; }
.view-details header.details .user-video-info .user-title,
.video-details header.details .user-video-info .user-title {
font-size: 18px;
line-height: 20px;
font-weight: 400;
margin: 0;
padding: 0 0 0 16px; }
.view-details header.details .user-video-info .user-title a,
.video-details header.details .user-video-info .user-title a {
color: #000; }
.view-details header.details .user-video-info .views-counter,
.video-details header.details .user-video-info .views-counter {
text-align: right;
width: 166px;
font-size: 25px;
line-height: 25px;
padding: 12px 0 11px 16px; }
.view-details header.details .user-video-info .views-counter span,
.video-details header.details .user-video-info .views-counter span {
display: inline-block;
vertical-align: top;
border-bottom: 3px solid #e7e7e7;
width: 100%;
height: 34px; }
.view-details .user-likes-sub,
.video-details .user-likes-sub {
margin: 0 -15px; }
.view-details .user-likes-sub .like-rating .rating,
.video-details .user-likes-sub .like-rating .rating {
padding: 3px 0 2px; }
.view-details .user-likes-sub .subscribe-col,
.video-details .user-likes-sub .subscribe-col {
text-align: right; }
.view-details .user-likes-sub .btn-subscribe,
.video-details .user-likes-sub .btn-subscribe {
font-size: 14px;
line-height: 14px; }
@ -2026,17 +2044,48 @@ h1 {
color: #0080b4; }
/**/
.custom-container {
max-width: 1170px;
padding: 0 15px;
margin: 0 auto; }
.custom-container.small-container {
max-width: 550px;
color: #000; }
.photos-block .heading {
margin: 0 0 10px; }
/* view photo */
.photo-view {
position: relative;
background: #fff;
margin: 0 0 16px; }
.photo-view img {
margin: 0 auto; }
.photo-view .btn-holder {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 4;
width: 112px; }
.photo-view .view-photo-nxt,
.photo-view .view-photo-pre {
border: none;
width: 48px;
height: 48px;
padding: 12px;
font-size: 24px;
line-height: 24px;
background: #f3f3f3;
border-radius: 50%;
text-align: center;
float: left; }
.photo-view .view-photo-nxt i,
.photo-view .view-photo-pre i {
font-size: 0;
line-height: 0; }
.photo-view .view-photo-nxt:focus, .photo-view .view-photo-nxt:hover,
.photo-view .view-photo-pre:focus,
.photo-view .view-photo-pre:hover {
background: #f3f3f3;
box-shadow: none;
color: #0080b4; }
.photo-view .view-photo-nxt {
float: right; }
/**/
.search-page.inner-block {
padding: 0; }
.search-page.inner-block .heading {
@ -2386,7 +2435,7 @@ textarea#comment_box {
margin: 0 0 5px; }
/* end of channels block */
/* tune pk ended */
/* cutomization ended */
/**/
.manageVid_thumb {
display: block;
@ -3104,25 +3153,6 @@ textarea#comment_box {
background: #fff;
padding: 10px; }
.view-photo-nxt,
.view-photo-pre {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0;
left: 0;
padding: 0;
text-align: center; }
.view-photo-nxt i,
.view-photo-pre i {
font-size: 0;
line-height: 0; }
.view-photo-nxt {
left: auto;
right: 0; }
.view-photo-thumbs {
margin: 0 -10px; }

2
upload/styles/cb_28/theme/css/all.css.map
View file

File diff suppressed because one or more lines are too long

2
upload/styles/cb_28/theme/js/custom-elements.js → upload/styles/cb_28/theme/js/ui_plugins.js
View file

@ -18,7 +18,7 @@ function initCarousel() {
pagerLinks: '.slider-pagination li',
stretchSlideToMask: true,
maskAutoSize: true,
autoRotation: true,
autoRotation: false,
switchTime: 3000,
animSpeed: 500,
step: 1

1
upload/styles/cb_28/theme/scss/_sidebar.scss
View file

@ -75,6 +75,7 @@
.sidebar-items{
background: $white;
padding: 16px 16px 0;
margin: 0 0 16px;
.featured-video{
font-size: 14px;
line-height: 14px;

78
upload/styles/cb_28/theme/scss/all.scss
View file

@ -916,6 +916,7 @@ h1{
.video_player{
height: inherit;
}
.view-details,
.video-details{
background: $white;
padding: 16px;
@ -1282,16 +1283,6 @@ h1{
}
}
/**/
.custom-container{
max-width: 1170px;
padding: 0 15px;
margin: 0 auto;
&.small-container{
max-width: 550px;
color: #000;
}
}
.photos-block .heading{
margin: 0 0 10px;
h2,
@ -1299,7 +1290,49 @@ h1{
@extend %heading;
}
}
/* view photo */
.photo-view{
position: relative;
background: $white;
margin: 0 0 16px;
img{
margin: 0 auto;
}
.btn-holder{
position: absolute;
bottom: 20px;
right: 20px;
z-index: 4;
width: 112px;
}
.view-photo-nxt,
.view-photo-pre{
border:none;
width: 48px;
height: 48px;
padding: 12px;
font-size: 24px;
line-height: 24px;
background: #f3f3f3;
border-radius:50%;
text-align: center;
float: left;
i{
font-size: 0;
line-height: 0;
}
&:focus,
&:hover{
background: #f3f3f3;
box-shadow: none;
color: $blue;
}
}
.view-photo-nxt {
float: right;
}
}
/**/
.search-page{
&.inner-block{
padding: 0;
@ -1747,7 +1780,7 @@ textarea#comment_box{
/* end of channels block */
/* tune pk ended */
/* cutomization ended */
/**/
.manageVid_thumb{
display:block;
@ -1926,7 +1959,6 @@ textarea#comment_box{
}
}
}
.shadow{
position: absolute;
z-index: 1;
@ -2534,25 +2566,7 @@ textarea#comment_box{
background: #fff;
padding: 10px;
}
.view-photo-nxt,
.view-photo-pre{
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0;
left: 0;
padding: 0;
text-align: center;
i{
font-size: 0;
line-height: 0;
}
}
.view-photo-nxt {
left: auto;
right: 0;
}
.view-photo-thumbs{