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

Updated:front End video design

Browse source
This commit is contained in:
IMRAN HASSAN 2014-03-18 14:25:57 +00:00
parent 8ba9fa52b7
commit c72fc55fd4
4 changed files with 240 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
upload/styles/cb_2014/layout/blocks/category_list.html
View file

@ -1,8 +1,67 @@
<div class="category_list marginTop">
<h3 class="cat_heading">{lang code='categories'}</h3>
<div class="categories">
<div class="categories tree">
<ul class="catigoriesList">
{cbCategories type=$type echo="TRUE" list_style="collapsed" output="a" with_all="TRUE"}
</ul>
</div>
</div>
</div>
<!--<div class="tree">
<ul>
<li>
<span><i class="icon-folder-open"></i> Parent</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-minus-sign"></i> Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-minus-sign"></i> Grand Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-minus-sign"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-leaf"></i> Great great Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
</li>
<li>
<span><i class="icon-leaf"></i> Great Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
<li>
<span><i class="icon-leaf"></i> Grand Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<span><i class="icon-folder-open"></i> Parent2</span> <a href="">Goes somewhere</a>
<ul>
<li>
<span><i class="icon-leaf"></i> Child</span> <a href="">Goes somewhere</a>
</li>
</ul>
</li>
</ul>
</div>-->

15
upload/styles/cb_2014/layout/blocks/pagination.html
View file

@ -1,8 +1,17 @@
<div class="pagination" align="center">
<ul class="pagination">
{if $pagination}
{if !$commentPagination}
{lang code='Pages'} : {if $first_link !=''}<a {$first_link}>&laquo;</a>{/if} {if $pre_link !=''}<a {$pre_link} >&#8249;</a>{/if} {$pagination} {if $next_link !=''}<a {$next_link}>&#8250;</a>{/if} {if $last_link !=''}<a {$last_link}>&raquo;</a>{/if}
{if $first_link ==''}
<li><span>1</span></li>
{/if}
{if $first_link !=''}<li class="previous">
<a {$first_link}><span class="glyphicon glyphicon-fast-backward"></span></a></li>{/if} {if $pre_link !=''}<li><a {$pre_link} ><span class="glyphicon glyphicon-step-backward"></span></i></a></li>{/if}
{$pagination}
{if $next_link !=''}<li><a {$next_link}><span class="glyphicon glyphicon-step-forward"></span></i></a></li>{/if} {if $last_link !=''}<li class="next"><a {$last_link}><span class="glyphicon glyphicon-fast-forward"></a></li>{/if}
{else}
@ -25,4 +34,4 @@
{/if}
{/if}
</div>
</ul>

31
upload/styles/cb_2014/layout/blocks/videos/video.html
View file

@ -1,4 +1,31 @@
<div class="row text-center">
<div class="cb_item item_video">
<div class="cb_item_container">
<div class="item_title">
<a href="{videoLink($video)}">{$video.title|title|truncate:20}</a>
</div>
<div class="item_user">
<a href="{$userquery->profile_link($video)}">{$video.username}</a>
</div>
<div class="item_text">
{$vide.description}
</div>
<span class="item_icon item_video"></span>
<span class="item_date">{$video.date_added|niceTime}</span>
</div>
<div class="cb_item_thumb video_thumb">
<a href="{videoLink($video)}" title="{$video.title|title}">
<img class="" src="{getThumb vdetails=$video}"/>
</a>
</div>
</div>
<!--<div class="row text-center">
<div class="col-md-10 col-md-offset-1 videoThumbBox">
<div class="text-center">
<h4>
@ -16,4 +43,4 @@
<img class="" src="{getThumb vdetails=$video}"/>
</a>
</div>
</div>
</div>-->

145
upload/styles/cb_2014/layout/videos.html
View file

@ -1,17 +1,148 @@
<div class="container">
<div class="row cb-box marginBottom">
<div class="col-md-3">
sidebar
<style type="text/css">
.tree {
}
.tree li {
list-style-type:none;
margin:0;
padding:10px 5px 0 5px;
position:relative
}
.tree li::before, .tree li::after {
content:'';
left:-20px;
position:absolute;
right:auto
}
.tree li::before {
border-left:1px solid #999;
bottom:50px;
height:100%;
top:0;
width:1px
}
.tree li::after {
border-top:1px solid #999;
height:20px;
top:25px;
width:25px
}
.tree li span {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #999;
border-radius:5px;
display:inline-block;
text-decoration:none
}
.tree li.parent_li>span {
cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
border:0
}
.tree li:last-child::before {
height:30px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
background:#eee;
border:1px solid #94a0b4;
color:#000
}
</style>
<script type="text/javascript">
$(function () {
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('glyphicon-plus').removeClass('glyphicon-minus');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('glyphicon-minus').removeClass('glyphicon-plus');
}
e.stopPropagation();
});
});
</script>
{$myAccountLinks = $userquery->my_account_links()}
{$leftMenuLinks = array_slice($myAccountLinks, 7)}
<div class="container marginBottom">
{include file="$style_dir/blocks/manage/account_menu.html"}
<div class="row">
{*include file="$style_dir/blocks/manage/left_side_bar.html"*}
<!-- Listing Categories -->
<div class="col-md-3 cb-box">
{include file="$style_dir/blocks/category_list.html" type='video'}
</div>
<!-- Listing Categories End -->
<div class="col-md-9">
<h2>Latest Videos</h2>
<div class="cb-box clearfix">
<div class="page-header" style="height: 30px; border-bottom: 3px solid #47A3DA;
padding-bottom: 10px;
">
{assign var=sorting_links value=sorting_links()}
<h3 class="smaller lighter pull-left">Videos
<small>
{if isset($smarty.get.sort)}
{foreach from=$sorting_links item=name key=sort}
{if $smarty.get.sort==$sort}
<span class="glyphicon glyphicon-sort"></span> Most {$name}
{/if}
{/foreach}
{/if}
</small>
</h3>
<div class="pull-right ">
<div class="btn-group">
<ul Style="list-style:none">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">{lang code='sort_by'}<b class="caret"></b></a>
<ul class="dropdown-menu">
{foreach from=$sorting_links item=name key=sort}
<li><a href="{link name=sort sort=$sort type=videos}" >{$name}</a></li>
{/foreach}
</ul>
</li>
</ul>
</div>
<a href="#" id="list" onclick="ToggleView(this);" title="Change To List Style"><span class="glyphicon glyphicon-th-list"></span>&nbsp;</a>
<a href="#" id="grid" onclick="ToggleView(this);" title="Change to Grid Style"><span class="glyphicon glyphicon-th"></span>&nbsp;</a>
<div class="time_cont">
{assign var=time_links value=time_links()}
{foreach from=$time_links item=name key=sort name=times}
{if !$smarty.foreach.times.last}{/if}
{/foreach}
</div>
</div>
</div>
<div class="row">
{foreach $videos as $video}
<div class="col-md-3 marginBottom">
<div class="col-md-3 marginBottom grid_view list_view">
{include file="$style_dir/blocks/videos/video.html"}
</div>
{/foreach}
</div>
<!--Pagination-->
<div class="pull-right">
{include file="$style_dir/blocks/pagination.html"}
</div>
<!-- /Pagination-->
</div>
</div>
</div>
</div>
</div>
<div style="height:20px"> </div>