This commit is contained in:
rulingcom 2024-08-11 22:48:38 +08:00
parent 349d862baf
commit 6a12f220ad
7 changed files with 270 additions and 383 deletions

View File

@ -76,6 +76,7 @@
padding: 2px 15px 2px 15px; padding: 2px 15px 2px 15px;
font-size: 1em; font-size: 1em;
border-radius: 5px; border-radius: 5px;
behavior: url("/assets/ie_support/PIE2/PIE.htc");
color: #333; color: #333;
font-weight: 400; font-weight: 400;
letter-spacing: 0; letter-spacing: 0;

View File

@ -1,154 +1,109 @@
<style> <style>
.universal-th-text{ .universal-dropdown-menu {
overflow: hidden; padding: 15px 18px;
display: -webkit-box; white-space: nowrap;
-webkit-line-clamp: 2; }
white-space: normal; .universal-th-text {
} padding: 8px 0 0 0;
.universal-dropdown-menu { display: inline;
padding: 15px 18px; margin-right: 5px;
white-space: nowrap; color: #888;
} }
.universal-th-text { .universal-dropdown {
padding: 8px 0 0 0; display: inline-block;
display: inline; }
margin-right: 5px; a.universal-btn {
color: #888; vertical-align: baseline;
} color: #fff;
.universal-dropdown { }
display: inline-block; .universal-table-index {
} border-collapse: collapse;
a.universal-btn { border: 1px solid #eee;
vertical-align: baseline; table-layout: fixed;
color: #fff; word-wrap: break-word;
} }
.universal-table-index { .universal-table-index h3 {
border-collapse: collapse; float: left;
border: 1px solid #eee; margin: 0;
table-layout: fixed; }
word-wrap: break-word; .universal-table-index.table td{
} padding: 15px 18px;
.universal-table-index h3 { }
float: left; .universal-table-index thead th:last-child .dropdown-menu {
margin: 0; left: auto;
} right: 0;
.universal-table-index.table td{ }
padding: 15px 18px; .universal-th-icon {
} border: 1px solid #eee;
.universal-table-index thead th:last-child .dropdown-menu { padding: 5px 8px;
left: auto; margin-right: 5px;
right: 0; color: gray;
} cursor: pointer;
.universal-th-icon { }
border: 1px solid #eee; .universal-th-text.no-sort.no-search {
padding: 5px 8px; position: relative;
margin-right: 5px; top: -6px;
color: gray; }
cursor: pointer; .image-preview {
} width: 120px;
.universal-th-text.no-sort.no-search { }
position: relative; </style>
top: -6px; <table class="table table-hover table-striped universal-table-index">
} <caption>
.image-preview { <h3>{{table-name}}</h3>
width: 120px; <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
} </caption>
</style> <thead>
<table class="table table-hover table-striped universal-table-index" style="position:relative;"> <tr data-list="head-columns" data-level="0">
<div class="searchbtn ken-click"><div class="searchbtn2"><i class="fa-solid fa-magnifying-glass"></i>查詢</div></div> <th class="col-md-3">
<div class="searchbox"> <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<thead class="theadsearch2"> <div class="universal-th-text {{title-class}}">{{title}}</div>
<tr data-list="head-columns" data-level="0"> <div class="dropdown universal-dropdown {{search}}">
<th class="col-sm-3"> <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="universal-th-text {{title-class}}">{{title}}</div> <i class="fa fa-search"></i>
<span class="caret"></span>
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> </button>
<div class="dropdown universal-dropdown {{search}}"> <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <form class="form-inline universal-form-inline" action="{{url}}" method="get">
<i class="fa fa-search"></i> <div class="form-group">
<span class="caret"></span> {{form-field}}
</button> <input type="hidden" value="{{key}}" name="column" >
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> </div>
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
<div class="form-group"> </form>
{{form-field}} </div>
<input type="hidden" value="{{key}}" name="column" > </div>
</div> </th>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button> </tr>
</form> </thead>
</div> <tbody data-level="0" data-list="rows">
</div> <tr data-level="1" data-list="columns">
</th> <td>{{text}}</td>
</tr> </tr>
</thead></diV> </tbody>
<caption> </table>
<h3>{{table-name}}</h3> <div>{{total_entries}}</div>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a> <div>{{export_button}}</div>
</caption> {{pagination_goes_here}}
<thead class="theadsearch"> <script>
<tr data-list="head-columns" data-level="0"> $('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p');
<th class="col-sm-3"> $('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
<div class="universal-th-text {{title-class}}">{{title}}</div> $('.universal-table-index').each(function(){
if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> $(this).DataTable({
<div class="dropdown universal-dropdown {{search}}"> searching: false,
<button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> paging: false,
<i class="fa fa-search"></i> ordering: false,
<span class="caret"></span> info: false,
</button> order: false,
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> autoWidth: false,
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> responsive: true
<div class="form-group"> });
{{form-field}} }
<input type="hidden" value="{{key}}" name="column" > });
</div> </script>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button> <style>
</form> .universal-table-index.dtr-inline.collapsed td.dtr-control{
</div> vertical-align: middle;
</div> }
</th> </style>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
// $('.universal-table-index th').eq(1).attr('class', 'desktop tablet-l tablet-p');
// $('.universal-table-index th').filter(':gt(1)').attr('class', 'desktop tablet-l tablet-p mobile-l');
// $('.universal-table-index').each(function(){
// if($(this).find('thead').length!=0 && $(this).find('td').length!=0 && !$(this).hasClass('dataTable')){
// $(this).DataTable({
// searching: false,
// paging: false,
// ordering: false,
// info: false,
// order: false,
// autoWidth: false,
// responsive: true
// });
// }
// });
$(document).ready(function(){
$("tr>th:first-child").removeClass("col-sm-3");
$("tr>th:first-child").addClass("col-sm-4");
$("tr>th:nth-child(2)").removeClass("col-sm-3");
$("tr>th:nth-child(2)").addClass("col-sm-2");
$("tr>th:nth-child(3)").removeClass("col-sm-3");
$("tr>th:nth-child(3)").addClass("col-sm-2");
$("tr>th:nth-child(4)").removeClass("col-sm-3");
$("tr>th:nth-child(4)").addClass("col-sm-2");
$("tr>th:nth-child(5)").removeClass("col-sm-3");
$("tr>th:nth-child(5)").addClass("col-sm-2");
});
</script>
<style>
.universal-table-index.dtr-inline.collapsed td.dtr-control{
vertical-align: middle;
}
</style>

View File

@ -1,146 +1,108 @@
<style> <style>
.universal-dropdown-menu { .universal-dropdown-menu {
padding: 15px 18px; padding: 15px 18px;
white-space: nowrap; white-space: nowrap;
} }
.universal-th-text { .universal-th-text {
padding: 8px 0 0 0; padding: 8px 0 0 0;
display: inline; display: inline;
margin-right: 5px; margin-right: 5px;
color: #888; color: #888;
} }
.universal-dropdown { .universal-dropdown {
display: inline-block; display: inline-block;
} }
a.universal-btn { a.universal-btn {
vertical-align: baseline; vertical-align: baseline;
color: #fff; color: #fff;
} }
.universal-table-index { .universal-table-index {
border-collapse: collapse; border-collapse: collapse;
border: 1px solid #eee; border: 1px solid #eee;
table-layout: fixed; table-layout: fixed;
word-wrap: break-word; word-wrap: break-word;
} }
.universal-table-index h3 { .universal-table-index h3 {
float: left; float: left;
margin: 0; margin: 0;
} }
.universal-table-index.table td{ .universal-table-index.table td{
padding: 15px 18px; padding: 15px 18px;
} }
.universal-table-index thead th:last-child .dropdown-menu { .universal-table-index thead th:last-child .dropdown-menu {
left: auto; left: auto;
right: 0; right: 0;
} }
.universal-table-index tbody { .universal-table-index tbody {
counter-reset: item; counter-reset: item;
} }
.universal-table-index tbody > tr > td:first-child:before { .universal-table-index tbody > tr > td:first-child:before {
content: counter(item); content: counter(item);
counter-increment: item; counter-increment: item;
} }
.universal-table-index thead > tr > th:first-child:before { .universal-table-index thead > tr > th:first-child:before {
content: "No."; content: "No.";
} }
.universal-table-index thead > tr > th:first-child {
.universal-th-icon { width: 4em;
border: 1px solid #eee; }
padding: 5px 8px;
margin-right: 5px; .universal-th-icon {
color: gray; border: 1px solid #eee;
cursor: pointer; padding: 5px 8px;
} margin-right: 5px;
.universal-th-text.no-sort.no-search { color: gray;
position: relative; cursor: pointer;
top: -6px; }
} .universal-th-text.no-sort.no-search {
.image-preview { position: relative;
width: 120px; top: -6px;
} }
</style> .image-preview {
<table class="table table-hover table-striped universal-table-index" style="position:relative;"> width: 120px;
<div class="searchbtn ken-click"><div class="searchbtn2"><i class="fa-solid fa-magnifying-glass"></i>查詢</div></div> }
<div class="searchbox"> </style>
<thead class="theadsearch2"> <form class="form-inline universal-form-inline" action="{{url}}" method="get">
<tr data-list="head-columns" data-level="0"> <table class="table table-hover table-striped universal-table-index">
<th class="col-md-3"> <caption>
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> <h3>{{table-name}}</h3>
<div class="universal-th-text {{title-class}}">{{title}}</div> <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
<div class="dropdown universal-dropdown {{search}}"> </caption>
<button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <thead>
<i class="fa fa-search"></i> <tr data-list="head-columns" data-level="0">
<span class="caret"></span> <th class="col-md-3">
</button> <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> <div class="universal-th-text {{title-class}}">{{title}}</div>
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> <div class="dropdown universal-dropdown {{search}}">
<div class="form-group"> <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{form-field}} <i class="fa fa-search"></i>
<input type="hidden" value="{{key}}" name="column" > <span class="caret"></span>
</div> </button>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button> <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
</form> <div class="form-group">
</div> {{form-field}}
</div> </div>
</th> <button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</tr> </div>
</thead> </div>
</div> </th>
<caption> </tr>
<h3>{{table-name}}</h3> </thead>
<a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a> <tbody data-level="0" data-list="rows">
</caption> <tr data-level="1" data-list="columns">
<thead class="theadsearch"> <td>{{text}}</td>
<tr data-list="head-columns" data-level="0"> </tr>
<th class="col-md-3"> </tbody>
<a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a> </table>
<div class="universal-th-text {{title-class}}">{{title}}</div> </form>
<div class="dropdown universal-dropdown {{search}}"> <div>{{total_entries}}</div>
<button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <div>{{export_button}}</div>
<i class="fa fa-search"></i> {{pagination_goes_here}}
<span class="caret"></span> <script>
</button> $('.universal-table-index thead tr').prepend('<th></th>')
<div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel"> $('.universal-table-index tbody tr').prepend('<td></td>')
<form class="form-inline universal-form-inline" action="{{url}}" method="get"> </script>
<div class="form-group">
{{form-field}}
<input type="hidden" value="{{key}}" name="column" >
</div>
<button class="btn btn-primary" type="submit" class="btn btn-default">Go</button>
</form>
</div>
</div>
</th>
</tr>
</thead>
<tbody data-level="0" data-list="rows">
<tr data-level="1" data-list="columns">
<td>{{text}}</td>
</tr>
</tbody>
</table>
<div>{{total_entries}}</div>
<div>{{export_button}}</div>
{{pagination_goes_here}}
<script>
$(document).ready(function(){
$('.universal-table-index thead tr').prepend('<th></th>')
$('.universal-table-index tbody tr').prepend('<td></td>')
$("tr>th:first-child").removeClass("col-md-3");
$("tr>th:first-child").addClass("col-md-1");
$("tr>th:nth-child(2)").removeClass("col-md-3");
$("tr>th:nth-child(2)").addClass("col-md-6");
$("tr>th:nth-child(3)").removeClass("col-md-3");
$("tr>th:nth-child(3)").addClass("col-md-3");
$("tr>th:nth-child(4)").removeClass("col-md-3");
$("tr>th:nth-child(4)").addClass("col-md-2");
$("tr>th:nth-child(5)").removeClass("col-md-3");
$("tr>th:nth-child(5)").addClass("col-md-3");
});
// $('.universal-table-index thead tr').prepend('<th></th>')
// $('.universal-table-index tbody tr').prepend('<td></td>')
</script>

View File

@ -1,20 +1,21 @@
{ {
"frontend": [ "frontend": [
{ {
"filename" : "index", "filename" : "index",
"name" : { "name" : {
"zh_tw" : "1. 單純表格列表", "zh_tw" : "1. 單純表格列表",
"en" : "1. Pure index table" "en" : "1. Pure index table"
}, },
"thumbnail" : "thumb.png" "thumbnail" : "thumb.png"
}, },
{ {
"filename" : "index2", "filename" : "index2",
"name" : { "name" : {
"zh_tw" : "2. 含序號表格列表", "zh_tw" : "2. 含序號表格列表",
"en" : "2. Index Table with serial number" "en" : "2. Index Table with serial number"
}, },
"thumbnail" : "thumb.png" "thumbnail" : "thumb.png",
} "default": true
] }
} ]
}

View File

@ -1,25 +1,25 @@
<style> <style>
.universal-table-show { .universal-table-show {
border: 1px solid #eee; border: 1px solid #eee;
border-collapse: collapse; border-collapse: collapse;
} }
.universal-table-show.table td{ .universal-table-show.table td{
padding: 15px 18px; padding: 15px 18px;
} }
.table-title { .table-title {
border-right: 1px solid #eee; border-right: 1px solid #eee;
} }
</style> </style>
<table class="table table-striped universal-table-show"> <table class="table table-striped universal-table-show">
<tbody data-level="0" data-list="entry"> <tbody data-level="0" data-list="entry">
<tr> <tr>
<td class="col-md-2 table-title">{{title}}</td> <td class="table-title">{{title}}</td>
<td>{{text}}</td> <td>{{text}}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="view_count pull-right"> <div class="view_count pull-right">
<i class="fa fa-eye">{{view_count_head}}:</i> <i class="fa fa-eye">{{view_count_head}}:</i>
<span class="view-count">{{view_count}}</span> <span class="view-count">{{view_count}}</span>
</div> </div>

View File

@ -1,10 +1,10 @@
<div class="i-video_data video_data-index-1"> <div class="i-video_data video_data-index-1">
<h3 class="i-annc__page-title">{{page-title}}</h3> <h3 class="i-annc__page-title">{{page-title}}</h3>
<ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0"> <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
<li class="video_data col-sm-12 row" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}"> <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
<a class=" video_link" href="{{video_show_url}}" title="{{video_title_escape}}"> <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
<img class=" col-sm-3 video_snapshot" src="{{snapshot_url}}"/> <img class="video_snapshot" src="{{snapshot_url}}"/>
<div class="col-sm-9 video_info"> <div class="video_info">
<div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div> <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
<div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div> <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
<div class="video_title"><h4>{{video_title}}</h4></div> <div class="video_title"><h4>{{video_title}}</h4></div>
@ -19,18 +19,6 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
<style> <style>
.video_data{
overflow: hidden;
margin-bottom: 1.875em;
box-shadow: #0000004d 0 0 4px;
border: 1px solid #bbb;
margin: 0.5em;
padding: 1em;
&:hover{
border: 1px solid #55bbd0;
box-shadow: #55bbd0e6 0 0 4px;
}
}
.video_data_wrap{ .video_data_wrap{
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -40,7 +28,6 @@
} }
.video_tag{ .video_tag{
color: #e4374a; color: #e4374a;
display: none;
} }
.video_title h4{ .video_title h4{
font-size: 1.6em; font-size: 1.6em;
@ -56,25 +43,6 @@
.view_info img{ .view_info img{
margin-right: 5px; margin-right: 5px;
} }
.video_group_time{
display: none;
}
.video_tags{
display: none;
}
.video_desc{
color: #333;
padding-top: 0.5em;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.video_title{
border-bottom: 2px solid #55bbd0;
padding-bottom: 0.5em;
}
</style> </style>
</div> </div>
{{pagination_goes_here}} {{pagination_goes_here}}

View File

@ -20,7 +20,7 @@
<link rel="stylesheet" type="text/css" href="/assets/template/owl.carousel.min.css"> <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"> <link rel="stylesheet" type="text/css" href="/assets/template/owl.theme.default.min.css">
<%#= javascript_include_tag "app"%> <%= javascript_include_tag "app"%>
<%= javascript_include_tag "#{@dataApi}" if @dataApi != nil%> <%= javascript_include_tag "#{@dataApi}" if @dataApi != nil%>
<script src="https://apis.google.com/js/platform.js" async defer></script> <script src="https://apis.google.com/js/platform.js" async defer></script>
<%= render_google_analytics %> <%= render_google_analytics %>