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

qlist styled

Browse source
This commit is contained in:
IMRAN HASSAN 2014-12-29 09:13:24 +00:00
parent 37756a76c7
commit 91a3bc8e02
4 changed files with 154 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
upload/styles/cb_27/images/cancel.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

55
upload/styles/cb_27/layout/blocks/quicklist/block.html
View file

@ -1,29 +1,28 @@
<div class="quicklist_box">
<div class="quicklist_box_head">
<a href="javascript:void(0)" onClick="quick_show_hide_toggle('#quicklist_cont')">{lang code='show_hide'}</a> - {lang code='quicklists'}({$cbvid->total_quicklist()}) - <a href="javascript:void(0)" onClick="clear_quicklist()" >{lang code='remove'}</a></div>
<div id="quicklist_cont" style="display:none">
{assign var=quicklist value=$cbvid->get_quicklist()}
{if $quicklist}
<div id="my_quicklist" class="my_quicklist">
<!-- Getting Playlist Items-->
{assign var='bg' value='fff'}
{foreach from=$quicklist item=vid}
{assign var=item value=$cbvid->get_video_details($vid)}
{include file="$style_dir/blocks/quicklist/video_block.html" video=$item bg=$bg show_delete='yes' unique_id="quicklist_"}
{if $bg=='fff'}
{assign var='bg' value='EFF5F8'}
{else}
{assign var='bg' value='fff'}
{/if}
{/foreach}
<div class="clearfix"></div>
</div>
{/if}
</div></div>
<div class="quicklist_box_head">
<a class="ql_show-hide" href="javascript:void(0)" onClick="quick_show_hide_toggle('#quicklist_cont')">{lang code='show_hide'}</a>
<a class="ql_rem" href="javascript:void(0)" onClick="clear_quicklist()" >{lang code='remove'}</a>
<h1>{lang code='quicklists'}({$cbvid->total_quicklist()})</h1>
</div>
<div id="quicklist_cont" class="quicklist_cont">
{assign var=quicklist value=$cbvid->get_quicklist()}
{if $quicklist}
<div id="my_quicklist" class="my_quicklist">
<!-- Getting Playlist Items-->
{assign var='bg' value='fff'}
{foreach from=$quicklist item=vid}
{assign var=item value=$cbvid->get_video_details($vid)}
{include file="$style_dir/blocks/quicklist/video_block.html" video=$item bg=$bg show_delete='yes' unique_id="quicklist_"}
{if $bg=='fff'}
{assign var='bg' value='EFF5F8'}
{else}
{assign var='bg' value='fff'}
{/if}
{/foreach}
<div class="clearfix"></div>
</div>
{/if}
</div>
</div>

29
upload/styles/cb_27/layout/blocks/quicklist/video_block.html
View file

@ -1,18 +1,23 @@
{if !$videoLink}
{videoLink vdetails=$video assign='videoLink'}
{/if}
<div class="playlist_item" style="background-color:#{$bg}; {if $selected==$video.videoid} border:1px solid #999{/if}" id="{$unique_id}playlist_cont_{$video.videoid}">
<div class="pl_num">{$smarty.section.item.iteration}</div>
<div class="pl_thumb"><a href="{$videoLink}"><img src="{getThumb vdetails=$video}" width="45" height="27" border="0" /></a></div>
<div class="pl_details" onclick="window.location='{$videoLink}'"><a href="{$videoLink}">{$video.title|truncate:30}</a></div>
{if $show_delete=='yes'}
<div class="pl_delete">
<img src="{$imageurl}/dot.gif" class="cross_icon" onclick="remove_qucklist('#{$unique_id}playlist_cont_{$video.videoid}','{$video.videoid}')" title="remove {$video.title} from qucklist" alt="quicklist"></div>
{/if}
<div class="pl_duration">{$video.duration|SetTime}</div>
<div class="clearfix"></div>
<div class="qlist_item" style="background-color:#{$bg}; {if $selected==$video.videoid} border:1px solid #999{/if}" id="{$unique_id}playlist_cont_{$video.videoid}">
<div class="pl_num">{$smarty.section.item.iteration}</div>
<div class="pl_thumb">
<a href="{$videoLink}">
<img src="{getThumb vdetails=$video}"/>
</a>
</div>
<div class="pl_details" onclick="window.location='{$videoLink}'">
<a href="{$videoLink}">{$video.title|truncate:25}</a>
</div>
{if $show_delete=='yes'}
<div class="ql_delete">
<img src="{$imageurl}/dot.gif" class="cross_icon" onclick="remove_qucklist('#{$unique_id}playlist_cont_{$video.videoid}','{$video.videoid}')" title="remove {$video.title} from qucklist" alt="quicklist">
</div>
{/if}
<div class="pl_duration">{$video.duration|SetTime}</div>
<div class="clearfix"></div>
</div>

119
upload/styles/cb_27/theme/css/main.css
View file

@ -3204,15 +3204,114 @@ padding-right: 0px;
/**
* QUCKLIST ICON
*/
.quick_container{ width:1000px; margin:0px auto; padding:0px; position:relative; }
.cross_icon,.check_icon,.add_icon{background-image:url(../images/icons/quicklist_small.png); height:14px; width:14px !important; background-repeat:no-repeat; cursor:pointer;position:absolute; left:2px; bottom:2px;}
.check_icon{background-image:url(../images/icons/quicklist_check_small.png); }
.cross_icon{ background-image:url(../images/icons/cross.png);position:relative; z-index:10}
.private_video{background-image:url(../images/private.png); width:110px; height:66px;position:absolute; top:2px; left:2px; border:0px}
.quicklist_box{bottom:0px; right:0px; padding:5px; background-color:#333; width:300px; color:#fff; position:fixed; z-index:1000; border-radius:5px 5px 0px 0px;-moz-border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px}
.my_quicklist{max-height:325px; overflow:auto; padding-right:8px}
.quicklist_box_head{background-image:url(../images/simple_gradient.png); background-position:bottom; height:20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; padding:5px; line-height:20px; color:#333; font-size:11px; font-weight:bold}
.quicklist_box_head a{color:#0099cc; font-size:11px; font-weight:bold; text-decoration:none}
.quick_container{
width:1000px;
margin:0px auto;
padding:0px;
position:relative;
}
.quicklist_box{
bottom:0px;
right:0px;
background-color:#f1f1f1;
width:300px;
color:#fff;
position:fixed;
z-index:1000;
border: 1px solid #d5d5d5;
}
.quicklist_box_head{
float: left;
width: 100%;
line-height:20px;
color:#333; font-size:11px;
font-weight:bold;
padding:5px;
}
.quicklist_box_head a{
color:#0099cc;
font-size:11px;
text-decoration:none;
}
.ql_show-hide{
float: left;
}
.ql_rem{
float: right;
}
.quicklist_box_head h1{
color:#333;
font-size:14px;
font-weight:bold;
margin: 10px 0px;
width: 100%;
float: left;
}
.cross_icon,.check_icon,.add_icon{
background-image:url(../images/icons/quicklist_small.png);
height:16px;
width:16px !important;
background-repeat:no-repeat;
cursor:pointer;
position:absolute;
left:2px;
bottom:2px;
}
.check_icon{
background-image:url(../images/icons/quicklist_check_small.png);
}
.cross_icon{
background-image:url(../images/icons/cross.png);
position:relative;
z-index:10;
}
.quicklist_cont{
float: left;
width: 100%;
display: none;
}
.my_quicklist{
max-height:325px;
overflow:auto;
}
.qlist_item{
background-color: #fff;
padding: 10px 5px;
border-top: 1px solid #d5d5d5;
position: relative;
}
.pl_thumb{
width: 45px;
height: 27px;
float: left;
margin-right: 10px;
}
.pl_thumb a{
width: 100%;
height: 100%;
display: block;
}
.pl_thumb a img{
width: 100%;
height: 100%;
}
.ql_delete{
position: absolute;
right: 5px;
top: 5px;
}
.private_video{
background-image:url(../images/private.png);
width:110px;
height:66px;
position:absolute;
top:2px;
left:2px;
border:0px;
}
.cb_quickie{
padding: 1px 1px;
position: absolute;
@ -3220,7 +3319,9 @@ padding-right: 0px;
bottom: 4px;
}
/* quicklist styling start */
/* quicklist styling end */