Home page Updated.

This commit is contained in:
IMRAN HASSAN 2014-04-09 08:21:21 +00:00
parent 453d9cb0e7
commit 001c02745a
5 changed files with 120 additions and 38 deletions

View file

@ -1,5 +1,7 @@
<div onclick="get_ep_video('{$video.videoid}')" class="featured_vid_con clearfix">
<div class="video_thumb">
<span class="glyphicon glyphicon-play-circle white paly_on"></span>
<img src="{getThumb vdetails=$video}" width="135" height="75" border="0" {ANCHOR place="video_thumb" data=$video} />
</div> <!--VIDEO_THUMB END-->
@ -10,9 +12,10 @@
<div class="title" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; font-weight:normal;">
{$video.description|description|truncate:30}
</div>
<div style="padding-top: 20px; font-size:11px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:normal;">
{$video.duration|SetTime}
<div class="small" style="padding-top: 20px; font-size:11px; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:normal;">
{$video.date_added|niceTime}
</div>
</div>
</div> <!--DETAILS_BLOCK END-->

View file

@ -2,13 +2,13 @@
<div id="slide1">
{foreach from=$videos_06_da item=video_06_da}
<div class="col-md-2 text-center nopadding">
<div class="col-md-2 text-center nopadding mouse_hover">
<div class="col-md-11 text-center nopadding">
<a href="{videoLink vdetails=$video_06_da}" title="{$video_06_da.title}">
<img class="cb_img_thum" src="{getThumb vdetails=$video_06_da}" width="135" height="75" {ANCHOR place="video_thumb" data=$video_06_da} />
<div class="cbHomeVidTitle cbHomeVidTitle_slid-title">{$video_06_da.title|truncate:10}</div>
<div class="cbHomeVidTitle cbHomeVidTitle_slid-title mouse_hover_on">{$video_06_da.title|truncate:10}</div>
</a>
<div class="cbHomeVidDuration cbHomeVidDuration_slide">
<div class="cbHomeVidDuration cbHomeVidDuration_slide mouse_hover_on">
{$video_06_da.duration|number_format}
</div>
</div>

View file

@ -1,6 +1,25 @@
{if $slider3 !=''}
<div style="height: 18px;" class="clearfix"></div>
<div id="slide3">
<div id="myCarousel" class="carousel slide">
<!-- Dot Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="active item"><img src="assets/img/slide1.jpg" alt="" /></div>
<div class="item"><img src="assets/img/slide2.jpg" alt="" /></div>
<div class="item"><img src="assets/img/slide3.jpg" alt="" /></div>
</div>
<!-- Navigation -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<div style="height: 18px;" class="clearfix"></div>
<!--<div id="slide3">
{foreach from=$videos_06_da item=video_06_da}
<div class="col-md-2 text-center nopadding">
<div class="col-md-11 text-center nopadding">
@ -22,6 +41,6 @@
<a href="#" class="circle" id="slide_next3">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>-->
{/if}

View file

@ -113,19 +113,19 @@
<div class="col-md-12 nopadding">
<div class="col-md-12 text-center nopadding ">
<div class="col-md-8 text-center nopadding" style=" margin-bottom:10px;">
<div class="col-md-8 text-center nopadding mouse_hover" style=" margin-bottom:10px;">
{foreach from=$videos_01 item=video_01}
<div class="col-md-12 text-center nopadding ">
<a href="{videoLink vdetails=$video_01}" title="{$video_01.title}">
<img class="cb_img_thum" src="{getThumb vdetails=$video_01}" width="500" height="285" border="0" {ANCHOR place="video_thumb" data=$video_01} />
</a>
<div class="cbHomeVidTitle cbHomeVidTitle_Big">{$video_01.title|truncate:30}</div>
<div class="cbHomeVidTitle cbHomeVidTitle_Big mouse_hover_on">{$video_01.title|truncate:30}</div>
</div>
<div class="cbHomeVidDuration">
<div class="cbHomeVidDuration mouse_hover_on">
{$video_01.duration|number_format}
</div>
<div class="cbHomeVidDuration_left">
<div class="cbHomeVidDuration_left mouse_hover_on">
By: {$video_01.username}
</div>
@ -134,13 +134,13 @@
<div class="col-md-4 hidden-sm hidden-xs text-center nopadding-right" style="padding-left:8px;">
{foreach from=$videos_02 item=video_02}
<div class="col-md-12 text-center nopadding">
<div class="col-md-12 text-center nopadding mouse_hover1">
<a href="{videoLink vdetails=$video_02}" title="{$video_02.title}">
<img class="cb_img_thum" src="{getThumb vdetails=$video_02}" width="240" height="130" {ANCHOR place="video_thumb" data=$video_03} />
<div class="cbHomeVidTitle" style="margin-bottom:8px;">{$video_02.title|truncate:10}</div>
<img class="cb_img_thum" src="{getThumb vdetails=$video_02}" width="240" height="133" {ANCHOR place="video_thumb" data=$video_03} />
<div class="cbHomeVidTitle mouse_hover_on1" style="margin-bottom:8px;">{$video_02.title|truncate:10}</div>
</a>
<div class="cbHomeVidDuration">
<div class="cbHomeVidDuration mouse_hover_on1">
{$video_02.duration|number_format}
</div>
@ -155,13 +155,13 @@
<div class="col-md-12 text-center nopadding">
{foreach from=$videos_03 item=video_03}
<div class="col-md-4 hidden-sm hidden-xs text-center nopadding-left" style="margin-bottom:15px; padding-right:4px;">
<div class="col-md-4 hidden-sm hidden-xs text-center nopadding-left mouse_hover" style="margin-bottom:15px; padding-right:4px;">
<a href="{videoLink vdetails=$video_03}" title="{$video_02.title}">
<img src="{getThumb vdetails=$video_03}" width="242" height="120" style="border:1px solid #CCC;" {ANCHOR place="video_thumb" data=$video_03} />
<div class="cbHomeVidTitle cbHomeVidTitle_small">{$video_03.title|truncate:10}</div>
<div class="cbHomeVidTitle cbHomeVidTitle_small mouse_hover_on">{$video_03.title|truncate:10}</div>
</a>
<div class="cbHomeVidDuration cbHomeVidDuration_more">
<div class="cbHomeVidDuration cbHomeVidDuration_more mouse_hover_on">
{$video_03.duration|number_format}
</div>
@ -175,7 +175,7 @@
<!-- ************ LATEST VIDEOS END ************ //-->
<!-- ******************************************* //-->
<div class="clearfix"></div><BR />
<div class="clearfix"></div>
<!-- ******************************************* //-->
<!-- *************** VIDEOS START ************** //-->
@ -193,27 +193,26 @@
{include file="$style_dir/blocks/videos/video-home-sliders.html" video_06_da=$videos_06_da slider='slider'}
</div>
<div id="being_viewed" class="tab-pane fade">
{foreach from=$videos_06_da item=video_06_da}
{include file="$style_dir/blocks/videos/video-home-sliders2.html" video_06_da=$video_06_da slider3='slider3'}
{/foreach}
</div>
</div>
</div>
<div style="height: 18px;" class="clearfix"></div>
</div>
</div>
<!-- ******************************************* //-->
<!-- *************** VIDEOS END ************** //-->
<!-- ******************************************* //-->
<div class="clearfix"></div><BR />
<div class="clearfix"></div>
<!-- ******************************************* //-->
<!-- *********** FIRST PHOTOS START ************ //-->
<!-- ******************************************* //-->
<div class="row nopadding">
<div class="col-md-12 nopadding ">
<h3 class="theme_color">{lang code="Featured Photos"}</h3>
<hr>
<h2 class="myHeading theme_color">{lang code="Featured Photos"}</h2>
<!-- *********** FIRST PHOTOS START ************ //-->
<div class="col-md-12 fill-background" style="display:block; height:320px; padding:5px;">
<div class="col-md-8" style="display:block; height:320px; border:1px solid #CCC; padding:10px;">
@ -319,15 +318,15 @@
<div class="pull-left small">{$result_users[result_users].profile_hits|number_format} {lang code='views'}</div>
<div class="pull-right small">{$result_users[result_users].total_videos|number_format}{lang code='Videos'}</div>
</div>
<div class="col-md-12 nopadding progress no-border-radius">
<!--<div class="col-md-12 nopadding progress no-border-radius">
<div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>-->
</div>
<div style="position:absolute; top: 25%; right:5px;">
<a href="{$userquery->profile_link($result_users[result_users])}">
<img src="{$baseurl}/styles/cb_2014/images/user_next_icon.png" width="25" height="25" />
<img class="opacity_low" src="{$baseurl}/styles/cb_2014/images/user_next_icon.png" width="25" height="25" />
</a>
</div>
</div>
@ -370,12 +369,13 @@
</div>
<div class="body clearfix">
<div class="text">{$comment.comment|truncate:150}</div>
<div class="text min-height-35">{$comment.comment|truncate:150}</div>
<div class="time pull-left">
<span class="small"> Updated: {$comment.date_added|niceTime}</span>
</div>
<div class=" pull-right">
<span class="small">{$result_comments[result_comments].total_comments|number_format}</span>
<span class="small red">{$result_comments[result_comments].total_comments|number_format}
<span class="glyphicon glyphicon-comment"></span></span>
</div>
</div>
</div>

View file

@ -1211,13 +1211,13 @@ background-color: #f8f8f8;
}
/*// New One for Home Page///*/
.cbHomeVidTitle {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
color: #FFFFFF;
font-size: 11px;
margin-left: 1.5px;
margin-top: -23px;
padding: 3px 5px;
position: relative;
position: absolute;
text-align: left;
width: 98.8%;
z-index: 100;
@ -1237,8 +1237,10 @@ background-color: #f8f8f8;
}
.cbHomeVidTitle_slid-title{
font-size: 7px;
margin-top: -20px;
margin-left: 2px;
margin-top: -16px;
padding: 2px 5px;
width: 97.8%;
}
.cbHomeVidDuration {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
@ -1279,11 +1281,10 @@ right: 15px;
h2.myHeading {
border-bottom: 1px solid #DDDDDD;
color: #0099CC;
font-size: 20px;
line-height: 30px;
margin-bottom: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-top: 0;
padding-bottom: 10px;
}
h2.myHeadingBLK {
@ -1353,3 +1354,62 @@ margin-right: 10px;
border: 0px none;
background-color:#F0F0F0;
}
/*Bootstrap slider*/
.carousel {
height: 400px;
overflow: hidden;
}
.carousel .item {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.carousel .active.left, .carousel .active.right {
left:0;
opacity:0;
z-index:2;
}
.carousel .next, .carousel .prev {
left:0;
opacity:1;
z-index:1;
}
.mouse_hover:hover .mouse_hover_on{
display: block;
}
.mouse_hover_on{
display: none;
}
.mouse_hover1:hover .mouse_hover_on1{
display: block;
}
.mouse_hover_on1{
display: none;
}
.opacity_low {
opacity: 0.8;
}
.opacity_low:hover {
opacity: 1;
}
.comment_home .body .text{
margin-bottom: 5px;
}
.red{
color: #f00 !important;
}
.details_block .title{
color: #696969;
}
.paly_on{
font-size: 22px;
left: 16%;
position: absolute;
top: 40%;
display: none;
}
.featured_vid_con:hover .paly_on{
display: block;
}