update module templates

This commit is contained in:
chihyux 2020-06-15 15:01:25 +08:00
parent 7c8a0a90f4
commit 09ef19ba8c
13 changed files with 383 additions and 140 deletions

View File

@ -421,6 +421,28 @@
}
}
// Widget-17
.widget-announcement-17 {
.w-annc__item {
margin-bottom: 0.8em;
padding-bottom: 0.8em;
border-bottom: 0.0625em dashed lighten($theme-gray, 65%);
}
.w-annc__entry-title {
margin: 0;
}
.w-annc__postdate-wrap {
font-size: 0.8125em;
}
.w-annc__status {
display: inline-block;
font-size: 0.75rem;
}
}
// Announcement index
// ## General style for index pages
.i-annc {
@ -730,6 +752,38 @@ table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td:first-child:before, tabl
}
}
// Index-17
.index-announcement-17 {
.i-annc__item {
margin-bottom: 0.8em;
padding-bottom: 0.8em;
border-bottom: 0.0625em dashed lighten($theme-gray, 65%);
}
.i-annc__title {
font-size: 0.95rem;
font-weight: 600;
&:before {
content: "";
color: #cccccc;
font-size: 1rem;
padding: 0 0.5em;
}
}
.i-annc__entry-title {
margin: 0;
}
.i-annc__category-wrap,
.i-annc__postdate-wrap {
font-size: 0.8125rem;
color: #666666;
}
.i-annc__status {
font-size: 0.8125rem;
display: inline-block;
}
}
// Announcement show
.s-annc {

View File

@ -1,60 +1,83 @@
@charset "utf-8";
@import "../initial";
.header-banner img[src*='epaper'] {
position: absolute;
top: 0;
transform: translateX(50%);
right: 50%;
top: 3em;
}
.row.epaper-container {
display: flex;
flex-wrap: wrap;
position: relative;
}
.criteria_list {
thead {
border-left: 6px solid rgb(105, 150, 171);
background: rgb(74, 42, 36);
color: rgb(255, 255, 255);
font-size: 14px;
font-family: ;
//lastes-criteria
.epaper-index2 {
h3 {
margin: 50px -15px 0;
background: #96210f;
padding: 20px 10px;
text-align: center;
font-weight: 700;
border-radius: 10px 10px 0 0;
a { color: #fff; }
}
tbody {
background-color: transparent;
tr {
border-bottom: 1px dotted #4a2a24;
padding: 5px 0;
}
td {
border-top: transparent;
}
div[data-list='topics'][data-level='1'] {
.epaper-index2-container { margin-top: 0; }
}
}
// slider-fullscreen
.latest-fullslider {
margin-bottom: 2em;
.epaper-container {
display: flex;
margin: 0;
align-items: center;
justify-content: center;
}
.right-fullslider {
white-space: normal;
padding: 0 2em 2em;
h3 {
font-size: 2em;
font-size: 1.8em;
text-align: center;
font-weight: 600;
}
}
.left-fullslider { padding-right: 0; text-align: center;}
.epaper-description { white-space: normal; }
.epaper-container {
min-height: 400px;
.left-fullslider {
padding-right: 0;
text-align: center;
display: flex;
margin: 0;
align-items: center;
justify-content: center;
@media(max-width: 800px) {
height: unset;
max-height: unset;
}
}
.epaper-description { white-space: normal; }
.banner-Container { background: #fff;}
}
@media(min-width: 768px){
.latest-fullslider{
.right-fullslider{
.right-box{
h3,h4,div{
text-align: center;
color: #333;
margin-top: 20px;
}
h3{
font-size: 1.8rem;
}
h4{
font-size: 1.2rem;
}
}
}
.left-fullslider {
img {
width: 100%;
overflow: hidden;
}
}
}
}
@media(max-width: 768px){
.latest-fullslider{
.epaper-container{
@ -64,35 +87,31 @@
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
a { color: $theme-white; }
background-color: rgba(60, 16, 15, 0.8784313725490196);
.epaper-description {
color: #fff;
}
h3, h4 {
font-size: 1em;
color: #ffaa26;
&:hover {
color: lighten($color: #ffaa26, $amount: 10)
}
}
}
.left-fullslider{
padding: 20px 0;
img{
width: 100%;
max-height: 417px;
overflow: hidden;
min-height: 250px;
}
}
}
}
//slider
.latest_slider {
display: flex;
flex-direction: column;
h3 { margin-bottom: 0; }
.banner-Container { background: #fff; min-height: 300px; padding: 0 1rem 2rem; }
.epaper-container {
white-space: normal;
flex-direction: column;
h4 { white-space: normal; }
img { width: 20em; }
.epaper-description { white-space: normal; padding-top: 1em;}
}
.e-paper.btn { font-size: 0.65rem; }
}
// epaper-show page
@ -142,9 +161,9 @@
}
}
.epaper-rightContent{
width: 50%;
}
// .epaper-rightContent{
// width: 50%;
// }
@media(min-width: 768px){
position: relative;
@ -162,7 +181,6 @@
}
}
// epaper-index2
.epaper-index2-container{
border-style: solid;
border-color: #ccc;
@ -171,15 +189,18 @@
border-bottom: 1px solid #ccc;//#e1e1e1;
margin: 0;
padding: 10px 0 10px 10px;
span{
float:right;
margin-right:10px;
color: #0e5c92;
border: 1px solid #d1d1d1;
background: #f0f0f0;
padding: 4px 6px;
font-size: 14px;
margin-top:-3px;
> span {
float:right;
span {
margin-right:10px;
color: #0e5c92;
border: 1px solid #d1d1d1;
background: #f0f0f0;
padding: 4px 6px;
font-size: 14px;
margin-top:-3px;
}
}
}
margin-top: 15px;

View File

@ -0,0 +1,31 @@
<div class="w-annc widget-announcement-17">
<div class="search_block">
<p>Search</p>
<form accept-charset="UTF-8" action="{{more_url}}" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"></div>
<p>
<input id="search_query" name="keywords" placeholder="搜尋" type="text">
<input type="submit" value="搜尋">
</p>
</form>
</div>
<h3 class="w-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<ul class="w-annc__list" data-level="0" data-list="announcements">
<li class="w-annc__item row">
<span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
<i class="fa fa-calendar-o"></i>
<span class="w-annc__postdate">{{postdate}}</span>
</span>
<h4 class="w-annc__entry-title col-sm-9">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
</span>
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
</li>
</ul>
<div class="w-annc__more-wrap clearfix">
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div>
</div>

View File

@ -0,0 +1,27 @@
<div class="i-annc index-announcement-17 {{display}}">
<h1 class="i-annc__page-title">{{page-title}}</h1>
<table class="i-annc__table table table-striped">
<thead>
<tr>
<th class="i-annc__th i-annc__th--category">{{category-head}}</th>
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
<th class="i-annc__th i-annc__th--department">{{department-head}}</th>
</tr>
</thead>
<tbody data-level="0" data-list="announcements">
<tr>
<td class="i-annc__category">{{category}}</td>
<td class="i-annc__content">
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
</span>
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
</td>
<td class="i-annc__postdate"><span class="i-annc__postdate-content" date-format="%Y-%m-%d">{{postdate}}</span></td>
<td class="i-annc__department"><span class="i-annc__department-content">{{department}}</span></td>
</tr>
</tbody>
</table>
</div>
{{pagination_goes_here}}

View File

@ -127,6 +127,14 @@
"en" : "16. Table List including Links and attachments (widget-title, category, status, title, view-count)"
},
"thumbnail" : "annc_index16_thumbs.png"
},
{
"filename" : "annc_index17",
"name" : {
"zh_tw" : "17. 標準標題列表-1A ( 類別, 標題, 日期, 張貼人 )",
"en" : "1. Standard Title List-1 ( category, title, postdate, department)"
},
"thumbnail" : "annc_index1_thumbs.png"
}
],
"widgets" : [
@ -257,6 +265,14 @@
"en" : "16. Image + Text slide (widget-title, image, status, postdate, category, title)"
},
"thumbnail" : "annc_widget1_thumbs.png"
},
{
"filename" : "annc_widget17",
"name" : {
"zh_tw" : "17. 含搜尋功能之精簡標題列表-2 ( 模組標題, 日期, 狀態, 標題 )",
"en" : "17. Simple Title List-2 (widget-title, postdate, status, title), including search"
},
"thumbnail" : "annc_widget11_thumbs.png"
}
]
}

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>
<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>
<div class="latest-criteria-description">{{description}}</div>
<img src="{{img_url_thumb}}" alt="{{title}}">
<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> -->
<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}}">
</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>

View File

@ -1,46 +1,39 @@
<div class="latest_slider">
<h3 class="e-annc__widget-title">
<span>{{widget-title}}</span>
<a class="e-paper btn btn-default pull-right" href="/zh_tw/epapers?method=papers"><%= (I18n.locale.to_s =="zh_tw") ? "更多 +" : "More NEWS" %></a>
</h3>
<div class="e-paper cycle-slideshow"
data-level="0"
data-list="categories"
data-cycle-slides=".banner-Container"
data-cycle-fx="carousel"
data-cycle-log="false"
data-cycle-carousel-fluid=true
data-cycle-pause-on-hover="true"
data-cycle-speed="100"
data-cycle-carousel-visible="1"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next"
data-cycle-swipe=true
data-cycle-swipe-fx="carousel"
>
<div class="banner-Container" data-list="topics" data-level="1">
<div class="item">
<div class="row epaper-container">
<h3>{{category_title}}</h3>
<a href="{{link_to_show}}">
<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="item">
<h3>{{category_title}}</h3>
<div>
<a href="{{link_to_show}}">
<h4>{{title}}</h4>
<img src="{{img_url_thumb}}" alt="{{title}}">
</a>
<div class="epaper-description">{{description}}</div>
</div>
<div class='epaper-description'>{{description}}</div>
</a>
</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 = 80;
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)+" ...";
var text= $(this).text().substring(0,len-1)+" ...";
$(this).text(text);
}
});

View File

@ -1,39 +1,17 @@
<div class="latest-fullslider" >
<h3 class="e-annc__widget-title">
<span>{{widget-title}}</span>
</h3>
<div class="slide-button">
<button class="cycle-prev btn btn-default"> <i class="fa fa-angle-left"></i></button>
<button class="cycle-next btn btn-default"> <i class="fa fa-angle-right"></i></button>
<a class="e-paper btn btn-default pull-right" href="/zh_tw/epapers?method=papers"><%= (I18n.locale.to_s =="zh_tw") ? "更多 +" : "More NEWS" %></a>
</div>
<div class="e-paper cycle-slideshow"
data-level="0"
data-list="categories"
data-cycle-slides=".banner-Container"
data-cycle-fx="carousel"
data-cycle-log="false"
data-cycle-carousel-fluid=true
data-cycle-pause-on-hover="true"
data-cycle-speed="100"
data-cycle-carousel-visible="1"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next"
data-cycle-swipe=true
data-cycle-swipe-fx="carousel"
>
<div class="banner-Container" data-list="topics" data-level="1">
<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="item">
<div class="row epaper-container">
<div class="left-fullslider col-lg-7 col-xs-12">
<div class="left-fullslider col-lg-7 col-md-7 col-xs-12">
<a href="{{link_to_show}}">
<img src="{{img_url_thumb}}" alt="{{title}}">
</a>
</div>
<div class="right-fullslider col-lg-5 col-xs-12">
<div class="right-fullslider col-lg-5 col-md-5 col-xs-12">
<div class="right-box">
<a href="{{link_to_show}}">
<h3>{{category_title}}</h3>
@ -41,13 +19,31 @@
<div class="epaper-description">{{description}}</div>
</a>
</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 = 200;
$(".latest-fullslider .epaper-description").each(function(i){
@ -61,7 +57,7 @@ $(function(){
if ($(window).width() < 768) {
$(function(){
var len = 80;
var len = 30;
$(".latest-fullslider .epaper-description").each(function(i){
if($(this).text().length>len){
$(this).attr("title",$(this).text());
@ -71,4 +67,15 @@ if ($(window).width() < 768) {
});
});
}
</script>
</script>
<!-- <div data-list="categories" data-level="0">
<h3><a href="{{category_link}}">{{category_title}}</a></h3>
<div data-list="topics" data-level="1">
<div>
<h4><a href="{{link_to_show}}">{{title}}</a></h4>
<div>{{description}}</div>
<img src="{{img_url_thumb}}" alt="{{title}}">
</div>
</div>
</div> -->

View File

@ -9,9 +9,15 @@
<div class="epaper-index2" data-list="topics" data-level="0">
<!-- <div class="banner-Container "> </div> -->
<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>
<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>
<div class="epaper-leftimg col-lg-5 col-xs-12">
<img src="{{img_url_thumb}}" alt="{{title}}">
</div>
@ -20,3 +26,4 @@
</div>
</div>
</div>

View File

@ -39,6 +39,14 @@
"en" : "5. four Columns (category title, photo and customized profile data)"
},
"thumbnail" : "member_index5_thumb.png"
},
{
"filename" : "member_index_search",
"name" : {
"zh_tw" : "6. 搜尋表格列表 ( 類別標題, 個人資料等自訂欄位 )",
"en" : "6. Search Table List (category title and customized profile data)"
},
"thumbnail" : "member_index1_thumb.png"
}
]
}

View File

@ -0,0 +1,51 @@
<div class="i-member index-member-1">
<form>
<span class="member_search" data-list="fields_to_show" data-level="0">
<span style="display: inline-block;">
<label for="members_{{key}}">{{title}}</label>
<input name="keywords[{{type}}][{{key}}]" type="text" id="members_{{key}}" value="{{value}}" size="10"><input type="submit" name="Submit" value="送出">
<span class="split_text">/</span>
</span>
</span>
</form>
<div style="clear: both;"></div>
<button class="btn btn-primary" onclick="window.location.search = '';"><%=t(:clear)%></button>
<% if !OrbitHelper.params[:keywords].nil? %>
<div class="i-member-group" data-list="roles" data-level="0">
<div class="index-member-status" data-level="1" data-list="status-list">
<h2 class="i-member__status-title">{{status-title}}</h2>
<div class="index-member-list" >
<table class="i-member__table table table-striped">
<thead data-level="2" data-list="members">
<tr class="i-member-tr-head" data-list="profile_data" data-level="3">
<th class="members_{{key}}">{{title}}</th>
</tr>
</thead>
<tbody data-level="2" data-list="members">
<tr data-list="profile_data" data-level="3">
<td class="{{value_class}}">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<% end %>
</div>
{{pagination_goes_here}}
<style>
.index-member-1 .search_block:nth-child(1n+2) {
display: none;
}
.split_text:last-child{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$els = $('.search_block');
for(var i = 1;i < $els.length; i++){
$els.eq(i).remove();
}
});
</script>

View File

@ -9,9 +9,12 @@
<link rel="stylesheet" media="print" type="text/css" href="/assets/template/print.css">
<%= javascript_include_tag "plugin/modernizr.js"%>
<%= javascript_include_tag "plugin/picturefill.min.js"%>
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"%>
<!-- <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"%> -->
<%= javascript_include_tag "jquery.min"%>
<%= javascript_include_tag "plugin/jquery.mobile.custom.min.js"%>
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"%>
<%= javascript_include_tag "bootstrap.min"%>
<!-- <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"%> -->
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"%>
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.carousel.min.js"%>
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.scrollVert.min.js"%>
@ -19,6 +22,10 @@
<%= javascript_include_tag "plugin/jquery.cycle2.video.min.js"%>
<%= javascript_include_tag "plugin/jquery-bullseye-min.js"%>
<%= javascript_include_tag "plugin/jquery.scrolling-tabs.min.js"%>
<%= 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">
<%= javascript_include_tag "//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"%>
<%= javascript_include_tag "//cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"%>

View File

@ -1,4 +1,4 @@
{
"title" : "newOrbit2.0",
"key" : "newOrbit2.0",
"title" : "orbit_bootstrap2.1",
"key" : "orbit_bootstrap2.1",
"author" : "chihyu"}