update template style

This commit is contained in:
chihyux 2020-06-15 11:50:03 +08:00
parent e46db67df3
commit 159b0529f2
4 changed files with 113 additions and 10 deletions

View File

@ -1,10 +1,31 @@
<div class="latest-criteria" data-list="categories" data-level="0"> <!-- <div class="latest-criteria" data-list="categories" data-level="0">
<h3><a href="{{category-link}}">{{category_title}}</a></h3> <h3><a href="{{category-link}}">{{category_title}}</a></h3>
<div data-list="topics" data-level="1"> <div data-list="topics" data-level="1">
<div class="latest-riteria-content"> <div class="latest-criteria-content" style='margin-bottom: 30px;'>
<h4 class="latest-criteria-title"><a href="{{link_to_show}}">{{title}}</a></h4> <h4 class="latest-criteria-title"><a href="{{link_to_show}}">{{title}}</a></h4>
<div class="latest-criteria-description">{{description}}</div> <div class='latest-cr-inner row'>
<div class='latest-cr-img col-lg-4 col-sm-4 col-xs-12' style='text-align: center;'><img src="{{img_url_thumb}}" alt="{{title}}"></div>
<div class="latest-criteria-description col-lg-8 col-sm-8 col-xs-12">{{description}}</div>
</div>
</div>
</div>
</div> -->
<div class="latest-criteria epaper-index2" data-list="categories" data-level="0">
<h3><a href="{{category-link}}">{{category_title}}</a></h3>
<div data-list="topics" data-level="1">
<div class='epaper-index2-container row'>
<h4>
<a href="{{link_to_show}}">{{title}}</a>
<a href="{{link_to_show}}"><span>{{category_title}}</span></a>
</h4>
<div class="epaper-leftimg col-lg-5 col-xs-12">
<img src="{{img_url_thumb}}" alt="{{title}}"> <img src="{{img_url_thumb}}" alt="{{title}}">
</div> </div>
<div class="epaper-rightContent col-lg-7 col-xs-12" >
<div class="epaper-description"><a href="{{link_to_show}}">{{description}}</a></div>
</div>
</div> </div>
</div> </div>

View File

@ -1,3 +1,7 @@
<%= javascript_include_tag "plugin/owl.carousel.min.js"%>
<link rel="stylesheet" type="text/css" href="/assets/template/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="/assets/template/owl.theme.default.min.css">
<div class="latest_slider" data-list="categories" data-level="0"> <div class="latest_slider" data-list="categories" data-level="0">
<div class="banner-Container owl-carousel owl-theme" data-list="topics" data-level="1"> <div class="banner-Container owl-carousel owl-theme" data-list="topics" data-level="1">
<div class="item"> <div class="item">
@ -6,9 +10,36 @@
<a href="{{link_to_show}}"> <a href="{{link_to_show}}">
<h4>{{title}}</h4> <h4>{{title}}</h4>
<img src="{{img_url_thumb}}" alt="{{title}}"> <img src="{{img_url_thumb}}" alt="{{title}}">
<div>{{description}}</div> <div class='epaper-description'>{{description}}</div>
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script>
$(".owl-carousel").owlCarousel({
loop: true,
center: true,
items: 1,
autoplay: true,
autoplayHoverPause: true,
responsiveClass:true,
responsive:{
600:{
items: 1,
nav:false
}
}
});
$(function(){
var len = 50;
$(".latest_slider .epaper-description").each(function(i){
if($(this).text().length>len){
$(this).attr("title",$(this).text());
var text= $(this).text().substring(0,len-1)+" ...";
$(this).text(text);
}
});
});
</script>

View File

@ -1,17 +1,20 @@
<%= javascript_include_tag "plugin/owl.carousel.min.js"%>
<link rel="stylesheet" type="text/css" href="/assets/template/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="/assets/template/owl.theme.default.min.css">
<div class="latest-fullslider" data-list="categories" data-level="0"> <div class="latest-fullslider" data-list="categories" data-level="0">
<div class="banner-Container owl-carousel owl-theme" data-list="topics" data-level="1"> <div class="banner-Container owl-carousel owl-theme" data-list="topics" data-level="1">
<div class="item"> <div class="item">
<div class="row epaper-container"> <div class="row epaper-container">
<div class="left-fullslider col-lg-8 col-xs-12"> <div class="left-fullslider col-lg-7 col-md-7 col-xs-12">
<a href="{{link_to_show}}"> <a href="{{link_to_show}}">
<img src="{{img_url_thumb}}" alt="{{title}}"> <img src="{{img_url_thumb}}" alt="{{title}}">
</a> </a>
</div> </div>
<div class="right-fullslider col-lg-4 col-xs-12"> <div class="right-fullslider col-lg-5 col-md-5 col-xs-12">
<div class="right-box"> <div class="right-box">
<a href="{{link_to_show}}"> <a href="{{link_to_show}}">
<h3>{{category_title}}</h3> <h3>{{category_title}}</h3>
@ -28,6 +31,47 @@
</div> </div>
</div> </div>
<script>
$(".owl-carousel").owlCarousel({
loop: true,
center: true,
items: 1,
autoplay: true,
autoplayHoverPause: true,
responsiveClass:true,
responsive:{
600:{
items: 1,
nav:false
}
}
});
$(function(){
var len = 200;
$(".latest-fullslider .epaper-description").each(function(i){
if($(this).text().length>len){
$(this).attr("title",$(this).text());
var text=$(this).text().substring(0,len-1)+" ...";
$(this).text(text);
}
});
});
if ($(window).width() < 768) {
$(function(){
var len = 30;
$(".latest-fullslider .epaper-description").each(function(i){
if($(this).text().length>len){
$(this).attr("title",$(this).text());
var text=$(this).text().substring(0,len-1)+" ...";
$(this).text(text);
}
});
});
}
</script>
<!-- <div data-list="categories" data-level="0"> <!-- <div data-list="categories" data-level="0">
<h3><a href="{{category_link}}">{{category_title}}</a></h3> <h3><a href="{{category_link}}">{{category_title}}</a></h3>
<div data-list="topics" data-level="1"> <div data-list="topics" data-level="1">

View File

@ -9,9 +9,15 @@
<div class="epaper-index2" data-list="topics" data-level="0"> <div class="epaper-index2" data-list="topics" data-level="0">
<!-- <div class="banner-Container "> </div> --> <!-- <div class="banner-Container "> </div> -->
<div class="epaper-index2-container row"> <div class="epaper-index2-container row">
<h4><a href="{{link_to_show}}">{{title}}</a> <h4>
<a href="{{link_to_show}}"><span>{{category_title}}</span></a> <a href="{{link_to_show}}">{{title}}</a>
<span class='data-status'>
<span date-format="%Y-%m-%d">{{publish_date}}</span>
<span>{{criteria_title}}</span>
<span>{{category_title}}</span>
</span>
</h4> </h4>
<div class="epaper-leftimg col-lg-5 col-xs-12"> <div class="epaper-leftimg col-lg-5 col-xs-12">
<img src="{{img_url_thumb}}" alt="{{title}}"> <img src="{{img_url_thumb}}" alt="{{title}}">
</div> </div>
@ -20,3 +26,4 @@
</div> </div>
</div> </div>
</div> </div>