adbanner-test/app/views/admin/ad_banners/_index.html.erb

354 lines
10 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-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-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="<%= banner.ad_fx %>"
data-cycle-speed="<%= banner.speed %>"
data-cycle-timeout="<%= banner.timeout.to_i*1000 %>"
>
<% if !banner.ad_images.can_display.blank? %>
<% banner.ad_images.can_display.each do |image| %>
<div class="slide-img" style=" background: url('<%= image.file.thumb.url %>'); background-size: cover; background-position: center;"></div>
<% 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) %>
</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>
<th><%= t("ad_banner.effect") %> : </th>
<td><%= banner.ad_fx %></td>
<th><%= t("ad_banner.transition_interval") %> : </th>
<td><%= banner.timeout %></td>
<th><%= t("ad_banner.transition_speed") %> : </th>
<td><%= banner.speed %></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("ad.new_image") %>
</a>
<% banner.ad_images.each_with_index do |image,idx| %>
<div class="ad-banner-image-wrap">
<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 %>
<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>
<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 "&nbsp;" %></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>