387 lines
12 KiB
Plaintext
387 lines
12 KiB
Plaintext
|
<%
|
||
|
|
height = 140
|
||
|
|
%>
|
||
|
|
<style type="text/css">
|
||
|
|
#ad-banner-wrap{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.ad-banner{
|
||
|
|
border: 0px solid #DDD;
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.ad-banner a{
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.ad-banner-edit{
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: -37px;
|
||
|
|
z-index: 998;
|
||
|
|
background: #000;
|
||
|
|
width: 100%;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
.ad-banner-edit-btn{
|
||
|
|
font-size: 13px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 6px 0;
|
||
|
|
display: inline-block;
|
||
|
|
width: 32%;
|
||
|
|
}
|
||
|
|
.ad-banner-edit-btn:hover{
|
||
|
|
background: #222;
|
||
|
|
}
|
||
|
|
.ad-banner-edit a{
|
||
|
|
color: #EEE;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.ad-banner-edit a:hover{
|
||
|
|
color: #FFF;
|
||
|
|
}
|
||
|
|
.ad-banner-images{
|
||
|
|
width: 100%;
|
||
|
|
height: <%= height %>px;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #555;
|
||
|
|
display: inline-block;
|
||
|
|
box-shadow: 0px 2px 7px #888;
|
||
|
|
}
|
||
|
|
.slide-img{
|
||
|
|
overflow: hidden;
|
||
|
|
-webkit-transition:-webkit-filter 0.3s ease-in-out;
|
||
|
|
-moz-transition:-webkit-filter 0.3s ease-in-out;
|
||
|
|
-o-transition:-webkit-filter 0.3s ease-in-out;
|
||
|
|
-ms-transition:-webkit-filter 0.3s ease-in-out;
|
||
|
|
transition:-webkit-filter 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
.grayscale{
|
||
|
|
-webkit-filter: grayscale(100%) brightness(60%);
|
||
|
|
-moz-filter: grayscale(100%) brightness(60%);
|
||
|
|
-o-filter: grayscale(100%) brightness(60%);
|
||
|
|
-ms-filter: grayscale(100%) brightness(60%);
|
||
|
|
filter: grayscale(100%) brightness(60%);
|
||
|
|
}
|
||
|
|
.grayscale-blur{
|
||
|
|
-webkit-filter: grayscale(70%) brightness(60%) blur(2px);
|
||
|
|
-moz-filter: grayscale(70%) brightness(60%) blur(2px);
|
||
|
|
-o-filter: grayscale(70%) brightness(60%) blur(2px);
|
||
|
|
-ms-filter: grayscale(70%) brightness(60%) blur(2px);
|
||
|
|
filter: grayscale(70%) brightness(60%) blur(2px);
|
||
|
|
}
|
||
|
|
.slide-img{
|
||
|
|
width: 100%;
|
||
|
|
height: <%= height %>px;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.ad-banner-title{
|
||
|
|
color: #FFF;
|
||
|
|
background: #000;
|
||
|
|
font-size: 1.5em;
|
||
|
|
padding: 3px 15px;
|
||
|
|
margin-top: 10px;
|
||
|
|
z-index: 998;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
.ad-banner-subtitle{
|
||
|
|
color: #FFF;
|
||
|
|
background: #000;
|
||
|
|
font-size: 1.5em;
|
||
|
|
padding: 3px 15px;
|
||
|
|
margin-top: 10px;
|
||
|
|
z-index: 998;
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0.7;
|
||
|
|
left: 15px;
|
||
|
|
}
|
||
|
|
.ad-banner-info{
|
||
|
|
display: none;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: -100px;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 998;
|
||
|
|
background-color: #111;
|
||
|
|
color: #FFF;
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
.ad-banner-info .table{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.ad-banner-info .table td{
|
||
|
|
border-top: none;
|
||
|
|
text-align: left;
|
||
|
|
padding: 8px 0;
|
||
|
|
}
|
||
|
|
.ad-banner-info .table th{
|
||
|
|
border-top: none;
|
||
|
|
text-align: right;
|
||
|
|
padding: 8px 0;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
.bottomnav{
|
||
|
|
/*z-index: 999;*/
|
||
|
|
}
|
||
|
|
.ad-banner-detail{
|
||
|
|
display: none;
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
z-index: 999;
|
||
|
|
margin: 0px auto 70px auto;
|
||
|
|
}
|
||
|
|
.ad-banner-images-wrap-arrow{
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-left: 5px solid transparent;
|
||
|
|
border-right: 5px solid transparent;
|
||
|
|
border-bottom: 5px solid #000;
|
||
|
|
margin: -5px auto 0 auto;
|
||
|
|
}
|
||
|
|
.ad-banner-images-wrap{
|
||
|
|
z-index: 999;
|
||
|
|
background: #333;
|
||
|
|
box-shadow: inset 0 5px 10px #000;
|
||
|
|
padding: 5px 15px 1px 15px;
|
||
|
|
margin: 0 auto;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
.ad-banner-images-wrap table{
|
||
|
|
width: 100%;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.ad-banner-images-wrap table td, .ad-banner-images-wrap table th{
|
||
|
|
border: none;
|
||
|
|
padding: 4px 5px;
|
||
|
|
}
|
||
|
|
.ad-banner-images-wrap table th{
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
.ad-banner-image-wrap{
|
||
|
|
margin: 0 0 10px 0;
|
||
|
|
}
|
||
|
|
.ad-banner-image{
|
||
|
|
width: 100%;
|
||
|
|
height: 120px;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 2px 10px #000;
|
||
|
|
}
|
||
|
|
.ad-image-info-wrap{
|
||
|
|
display: none;
|
||
|
|
padding: 5px 0;
|
||
|
|
}
|
||
|
|
.ad-image-info{
|
||
|
|
background: #DDD;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.ad-image-btn{
|
||
|
|
padding: 2px 20px;
|
||
|
|
line-height: 22px;
|
||
|
|
color: #FFF;
|
||
|
|
background: #000;
|
||
|
|
margin-top: 94px;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
.ad-image-item{
|
||
|
|
padding: 2px 20px;
|
||
|
|
line-height: 22px;
|
||
|
|
color: #FFF;
|
||
|
|
background: #000;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
.ad-image-new-btn{
|
||
|
|
padding: 4px 10px;
|
||
|
|
border-radius: 3px;
|
||
|
|
line-height: 22px;
|
||
|
|
display: block;
|
||
|
|
text-align: center;
|
||
|
|
margin: 3px 0 10px 0;
|
||
|
|
background: #0088cc;
|
||
|
|
color: #FFF;
|
||
|
|
box-shadow: 0 0 10px #000;
|
||
|
|
}
|
||
|
|
.ad-image-new-btn:hover{
|
||
|
|
color: #FFF;
|
||
|
|
background: #009EEC;
|
||
|
|
}
|
||
|
|
.ad-image-expired{
|
||
|
|
background: #000;
|
||
|
|
opacity: 0.7;
|
||
|
|
color: #FFF;
|
||
|
|
padding: 5px 10px;
|
||
|
|
margin-bottom: -30px;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
@media all and (max-width: 1000px) {
|
||
|
|
.ad-banner-info table{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media all and (max-width: 767px) {
|
||
|
|
.ad-banner-detail{
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="ad-banner-wrap">
|
||
|
|
<% @banners.each_with_index do |banner,i| %>
|
||
|
|
<% if (i+1)%3==1 %><div class="row-fluid"><% end %>
|
||
|
|
<div class="ad-banner span4">
|
||
|
|
<div class="ad-banner-title"><%= banner.title %></div>
|
||
|
|
<div class="cycle-slideshow ad-banner-images "
|
||
|
|
data-cycle-slides=".slide-img"
|
||
|
|
data-cycle-fx="fade"
|
||
|
|
data-cycle-speed="1"
|
||
|
|
data-cycle-timeout="5000"
|
||
|
|
>
|
||
|
|
<% if !banner.ad_images.can_display.blank? %>
|
||
|
|
<% banner.ad_images.can_display.each do |image| %>
|
||
|
|
<% if image.exchange_item == '1' %>
|
||
|
|
<div class="slide-img" style=" background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;"></div>
|
||
|
|
<% elsif image.exchange_item == '2' %>
|
||
|
|
<div class="slide-img" style=" background: url('http://img.youtube.com/vi/<%= image.youtube.to_s[-11,11] %>/hqdefault.jpg'); background-size: cover; background-position: center;"></div>
|
||
|
|
<% end %>
|
||
|
|
<% end %>
|
||
|
|
<% else %>
|
||
|
|
<div class="slide-img" style="background: url('http://placehold.it/<%= banner.width %>x<%= banner.height %>/888&text=A'); background-size: cover; background-position: center;"></div>
|
||
|
|
<div class="slide-img" style="background: url('http://placehold.it/<%= banner.width %>x<%= banner.height %>/666&text=B'); background-size: cover; background-position: center;"></div>
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<% if can_edit_or_delete?(banner) %>
|
||
|
|
<div class="ad-banner-edit">
|
||
|
|
<a data-title="<%= t("ad_banner.setting") %>"
|
||
|
|
data-id="<%= banner.id.to_s %>"
|
||
|
|
data-fx="<%= banner.ad_fx %>"
|
||
|
|
data-form="<%= banner.data_attribute_hash.to_s %>"
|
||
|
|
class="open-slide"
|
||
|
|
href="#">
|
||
|
|
<div class="ad-banner-edit-btn">
|
||
|
|
<i class="icons-cog"></i>
|
||
|
|
<%= t("ad_banner.setting") %>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a class="" href="#" onclick="toggleBannerDetail('<%= banner.id.to_s %>'); return false;">
|
||
|
|
<div class="ad-banner-edit-btn">
|
||
|
|
<i class="icons-pictures"></i>
|
||
|
|
<%= t(:images) %>
|
||
|
|
<i class="icons-video"></i>
|
||
|
|
<%= t(:video) %>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
<a href="#" class="delete text-error" rel="/admin/ad_banners/<%= banner.id.to_s %>">
|
||
|
|
<div class="ad-banner-edit-btn">
|
||
|
|
<i class="icons-trash"></i>
|
||
|
|
<%= t(:delete_) %>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
<div class="ad-banner-info">
|
||
|
|
<table class="table">
|
||
|
|
<tr>
|
||
|
|
<th><%= t("ad_banner.size") %> : </th>
|
||
|
|
<td><%= banner.size %></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<% if can_edit_or_delete?(banner) %>
|
||
|
|
<div id="ad-banner-<%= banner.id.to_s %>" class="ad-banner-detail">
|
||
|
|
<div class="ad-banner-images-wrap-arrow"></div>
|
||
|
|
<div class="ad-banner-images-wrap">
|
||
|
|
<a href="<%= new_admin_ad_image_path(banner: banner.id.to_s) %>" class="ad-image-new-btn">
|
||
|
|
<i class="icon-plus"></i> <%= t("new_image") %>
|
||
|
|
</a>
|
||
|
|
<% banner.ad_images.each_with_index do |image,idx| %>
|
||
|
|
<div class="ad-banner-image-wrap">
|
||
|
|
<% if image.exchange_item == '1' %>
|
||
|
|
<div class="ad-banner-image <%= image.expired? ? "grayscale" : "" %>" style="background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;">
|
||
|
|
<% if image.expired? %>
|
||
|
|
<div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
|
||
|
|
<% end %>
|
||
|
|
<% if (image.postdate > Time.now rescue false) %>
|
||
|
|
<div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
|
||
|
|
<% end %>
|
||
|
|
<span class="ad-banner-subtitle"><i class="icons-pictures"><%= t('image') %></i></span>
|
||
|
|
<a class="ad-image-btn pull-left" href="<%= edit_admin_ad_image_path(image) %>"><i class="icon-edit"></i><%= t(:edit) %></a>
|
||
|
|
<a class="ad-image-btn pull-right delete text-error" href="#" class="delete text-error" rel="/admin/ad_images/<%= image.id.to_s %>"><i class="icons-trash"></i><%= t(:delete_) %></a>
|
||
|
|
</div>
|
||
|
|
<% else %>
|
||
|
|
<div class="ad-banner-image <%= image.expired? ? "grayscale" : "" %>" style="background: url('http://img.youtube.com/vi/<%= image.youtube.to_s[-11,11] %>/hqdefault.jpg'); background-size: cover; background-position: center;">
|
||
|
|
<% if image.expired? %>
|
||
|
|
<div class="ad-image-expired"><%= t("ad_banner.expired") %></div>
|
||
|
|
<% end %>
|
||
|
|
<% if (image.postdate > Time.now rescue false) %>
|
||
|
|
<div class="ad-image-expired"><%= t("start_date")+': '+(format_value image.postdate) %></div>
|
||
|
|
<% end %>
|
||
|
|
<span class="ad-banner-subtitle"><i class="icons-video"><%= t('video') %></i></span>
|
||
|
|
<a class="ad-image-btn pull-left" href="<%= edit_admin_ad_image_path(image) %>"><i class="icon-edit"></i><%= t(:edit) %></a>
|
||
|
|
<a class="ad-image-btn pull-right delete text-error" href="#" class="delete text-error" rel="/admin/ad_images/<%= image.id.to_s %>"><i class="icons-trash"></i><%= t(:delete_) %></a>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
<div class="ad-image-info-wrap">
|
||
|
|
<table class="ad-image-info table table-striped">
|
||
|
|
<tr>
|
||
|
|
<th><%= t("title") %> : </th>
|
||
|
|
<td><%= image.title %></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><%= t("start_date") %> : </th>
|
||
|
|
<td><%= format_value image.postdate %></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><%= t("end_date") %> : </th>
|
||
|
|
<td><%= format_value image.deadline %></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<th><%= t("link") %> : </th>
|
||
|
|
<td><%= image.out_link rescue " " %></td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<% end %>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<% if ((i+1)%3==0) or (i+1 == @banners.count) %></div><br/ ><% end %>
|
||
|
|
<% end %>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(".ad-banner").on("mouseover",function(){
|
||
|
|
$(this).find(".slide-img").addClass("grayscale-blur");
|
||
|
|
$(this).find(".ad-banner-edit").stop().fadeIn(100);
|
||
|
|
$(this).find(".ad-banner-info").stop().fadeIn(100);
|
||
|
|
});
|
||
|
|
$(".ad-banner").on("mouseleave",function(){
|
||
|
|
$(this).find(".slide-img").removeClass("grayscale-blur");
|
||
|
|
$(this).find(".ad-banner-edit").stop().fadeOut(100);
|
||
|
|
$(this).find(".ad-banner-info").stop().fadeOut(100);
|
||
|
|
});
|
||
|
|
|
||
|
|
function toggleBannerDetail(banner){
|
||
|
|
$.each($('.ad-banner-detail'),function(){
|
||
|
|
if(this.id!="ad-banner-"+banner){
|
||
|
|
$(this).stop().hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if(!$('#ad-banner-'+banner).is(":visible")){
|
||
|
|
$('html, body').stop().animate({
|
||
|
|
scrollTop: $('#ad-banner-'+banner).parent().offset().top-50
|
||
|
|
}, 300, 'swing');
|
||
|
|
}
|
||
|
|
$('#ad-banner-'+banner).stop().slideToggle(300);
|
||
|
|
}
|
||
|
|
</script>
|