asiaH8/modules/custom_announcement/annc_index7.html.erb

84 lines
3.1 KiB
Plaintext

<div class="i-annc index-announcement-7">
<h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="i-annc__list row" data-level="0" data-list="custom_announcements">
<li class="i-annc__item col-md-4">
<div class="i-annc__img-wrap bullseye">
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
</div>
<div class="i-annc__content-wrap">
<div class="i-annc__meta">
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
<span class="i-annc__status label {{status-class}}">{{status}}</span>
</span>
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
<i class="fa fa-calendar-o"></i>
<span class="i-annc__postdate">{{postdate}}</span>
</span>
<span class="i-annc__category-wrap">
<i class="fa fa-tasks"></i>
<span class="i-annc__category">{{category}}</span>
</span>
</div>
<h4 class="i-annc__entry-title">
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="i-annc__subtitle">{{subtitle}}</p>
</div>
</li>
</ul>
</div>
{{pagination_goes_here}}
<script>
var lilength = $('.i-annc.index-announcement-7 li.i-annc__item').length;
function combineul(){
for(var i=1;i<$('.i-annc.index-announcement-7 ul.i-annc__list').length;i++)
$('.i-annc.index-announcement-7 ul.i-annc__list').eq(0).find('>li').eq(-1).after($('.i-annc.index-announcement-7 ul.i-annc__list').eq(i).html());
var ullength = $('.i-annc.index-announcement-7 ul.i-annc__list').length;
for(var i = 1;i < ullength;i++)
$('.i-annc.index-announcement-7 ul.i-annc__list').eq(-1).remove();
};
function reorganize(num){
combineul();
for(var i=1;i< Math.ceil(lilength/num);i++){
$('.i-annc.index-announcement-7 ul.i-annc__list').eq(-1).after('<ul class="i-annc__list row" data-level="0" data-list="custom_announcements"></ul>')
var lihtml="";
if(i != (Math.ceil(lilength/num)-1)){
for(var j=0;j<num;j++)
lihtml += "<li class='i-annc__item col-md-4'>"+$('.i-annc.index-announcement-7 li.i-annc__item').eq(i*num+j).html()+"</li>"
}else{
for(var j=0;j< lilength - num *(Math.ceil(lilength/num)-1) ;j++)
lihtml += "<li class='i-annc__item col-md-4'>"+$('.i-annc.index-announcement-7 li.i-annc__item').eq(i*num+j).html()+"</li>"
};
$('.i-annc.index-announcement-7 ul.i-annc__list').eq(-1).html(lihtml);
};
if(Math.ceil(lilength/num) != 1 )
for(var i=0;i< lilength -num ; i++ )
$('.i-annc.index-announcement-7 ul.i-annc__list').eq(0).find("li.i-annc__item").eq(num).remove();
$('.i-annc.index-announcement-7 ul.i-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
};
$(document).ready(function(){
if($(window).width()>1024){
reorganize(3);
num=3;
}else if($(window).width()>576){
reorganize(2);
num=2;
}else{
reorganize(1);
num=1;
}
});
$(window).resize(function(){
if($(window).width()>1024){
reorganize(3);
num=3;
}else if($(window).width()>576){
reorganize(2);
num=2;
}else{
reorganize(1);
num=1;
}
})
</script>