From 265c954b66cdf6ea3320cff1623f24c071cbaada Mon Sep 17 00:00:00 2001 From: ken Date: Thu, 25 Jun 2026 16:51:34 +0800 Subject: [PATCH] universal --- .../template/modules/universal-table.scss | 292 +++++++++++++++++- modules/universal_table/index.html.erb | 5 +- modules/universal_table/index2.html.erb | 5 +- modules/universal_table/index3.html.erb | 8 +- modules/universal_table/index4.html.erb | 9 +- modules/universal_table/index5.html.erb | 197 ++++++++++++ modules/universal_table/index6.html.erb | 197 ++++++++++++ modules/universal_table/index7.html.erb | 154 +++++++++ modules/universal_table/index8.html.erb | 146 +++++++++ modules/universal_table/info.json | 34 ++ 10 files changed, 1032 insertions(+), 15 deletions(-) create mode 100644 modules/universal_table/index5.html.erb create mode 100644 modules/universal_table/index6.html.erb create mode 100644 modules/universal_table/index7.html.erb create mode 100644 modules/universal_table/index8.html.erb diff --git a/assets/stylesheets/template/modules/universal-table.scss b/assets/stylesheets/template/modules/universal-table.scss index fd40597..6789b2c 100644 --- a/assets/stylesheets/template/modules/universal-table.scss +++ b/assets/stylesheets/template/modules/universal-table.scss @@ -1,7 +1,12 @@ @charset "utf-8"; @import "../initial"; - +.universal-th-text{ + white-space: pre; +} +.universal-table-index h3 { + padding: 0; +} .universal-form-inline{ position: relative; } @@ -119,11 +124,11 @@ padding: 2px 15px 2px 15px; font-size: 1em; border-radius: 5px; - behavior: url("/assets/ie_support/PIE2/PIE.htc"); color:#fff; font-weight: 400; letter-spacing: 0; margin-left: 1em; + i { color: #fff; @@ -140,7 +145,6 @@ background-position: 10px center; display: inline-block; background-color: $theme-color-second; - behavior: url("/assets/ie_support/PIE2/PIE.htc"); text-align: center; border: 0; &:hover{ @@ -376,4 +380,284 @@ transform: scale(1.1); } } -} \ No newline at end of file +} + +img.image-preview { + max-width: 100px; +} +.universal-form-inline5{ + .tdken{ + @media(min-width:820px){ + width: calc(50% - 1em) !important; + } + @media(min-width:768px)and(max-width:820px){ + width: calc(50% - 1em) !important; + } + &:hover{ + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-transition: all .3sease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3sease; + .fa-thumbtack{ + transform: scale(1.1) rotate(45deg); + } + i{ + color:$theme-color-second; + transform: scale(1.1) ; + -webkit-transition: all .3sease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3sease; + } + } + } + .universal-table-index{ + border:0; + } + .theadsearch{ + display: none; + } + .universal-th-text{ + padding: 0; + } + .image-preview { + width: 80px; + } + td,th{ + width: 100%!important; + } + .kentbody{ + display: flex; + flex-wrap: wrap; + } + tbody{ + // display: flex; + // flex-wrap: wrap; + justify-content: center; + tr{ + padding:18px 20px 25px 20px; + background-color: #fff; + box-shadow: 0 2px 8px 0px #999; + border-radius:30px; + margin: 0.5em; + position: relative; + min-height: 12em; + } + td{ + border:0!important; + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-bottom: 0 !important; + color: #0757A0; + font-size: 1.4rem; + a{ + color: #2D9349; + font-size:medium; + } + &:nth-child(2){ + font-size: 1.5rem; + color: #333; + font-weight: 500; + margin-bottom: 0.5em; + } + &:nth-child(5){ + color: #00F; + } + } + } + .fa-thumbtack{ + transform: rotate(45deg);position: absolute;right: 2em; + } +} +.universal-form-inline6{ + .tdken{ + @media(min-width:820px){ + width: calc(33.3% - 1em) !important; + } + @media(min-width:768px)and(max-width:820px){ + width: calc(50% - 1em) !important; + } + &:hover{ + -webkit-transform: translateY(-6px); + -ms-transform: translateY(-6px); + transform: translateY(-6px); + box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-box-shadow: 0 12px 24px #0000004d, 0 10px 10px #00000033; + -webkit-transition: all .3sease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3sease; + .fa-thumbtack{ + transform: scale(1.1) rotate(45deg); + } + i{ + color:$theme-color-second; + transform: scale(1.1) ; + -webkit-transition: all .3sease; + -moz-transition: all .3s ease; + -ms-transition: all .3s ease; + -o-transition: all .3s ease; + transition: all .3sease; + } + } + } + .universal-table-index{ + border:0; + } + .theadsearch{ + display: none; + } + .universal-th-text{ + padding: 0; + } + .image-preview { + width: 80px; + } + td,th{ + width: 100%!important; + } + .kentbody{ + display: flex; + flex-wrap: wrap; + } + tbody{ + // display: flex; + // flex-wrap: wrap; + justify-content: center; + tr{ + padding:18px 20px 25px 20px; + background-color: #fff; + box-shadow: 0 2px 8px 0px #999; + border-radius:30px; + margin: 0.5em; + position: relative; + min-height: 12em; + } + td{ + border:0!important; + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-bottom: 0 !important; + color: #0757A0; + font-size: 1.4rem; + a{ + color: #2D9349; + font-size:medium; + } + &:nth-child(2){ + font-size: 1.5rem; + color: #333; + font-weight: 500; + margin-bottom: 0.5em; + } + &:nth-child(5){ + color: #00F; + } + } + } + .fa-thumbtack{ + transform: rotate(45deg);position: absolute;right: 2em; + } +} + +// .universal-table-show { + +// border-collapse: collapse; +// .table-content{ +// table{ +// border: 0; +// } +// tbody > tr:nth-of-type(even) { +// background-color: #cccccc30; +// } +// td{ +// border-bottom: 1px #333 solid; +// } +// } +// td{ +// border-top:0!important; +// min-width: 7em; +// border-left: 0 !important; +// border-right: 0 !important; +// } +// .universal-table-show.table td{ +// padding: 15px 18px; +// } +// tbody>tr:nth-of-type(odd){ +// background-color:transparent; +// } +// .table-content{ +// min-width: 100%!important; +// } +// .universal-table-tr{ +// display: flex; +// flex-wrap: wrap; +// justify-content: center; +// width: 100%; +// &:first-child{ +// display:none; +// } +// &:nth-child(2){ +// .table-title{ +// display: none; +// } +// .table-content{ +// padding-top: 1em; +// width: 100%; +// color: #173463; +// font-size: 2.2rem; +// font-weight: 900; +// text-align: center; +// padding-bottom: 0; +// } +// } +// &:nth-child(3){ +// .table-title{ +// display: none; +// } +// .table-content{ +// width: 100%; +// color: #e66b28; +// font-size: 2.2rem; +// font-weight: 900; +// text-align: center; +// padding-top: 0; +// } +// } +// &:nth-child(4){ +// .table-title{ +// display: none; +// } +// .table-content{ +// margin-bottom: 1em; +// } +// } +// &:nth-child(5){ +// .table-title{ +// display: none; +// } +// } + +// } +// .table-content{ +// background-color: #fff; +// padding: 0; +// } +// .table-title{ +// width: 100%; +// padding: 30px 0; +// color: #2D9349; +// font-size: 1.8rem; +// font-weight: 600; +// } +// } diff --git a/modules/universal_table/index.html.erb b/modules/universal_table/index.html.erb index 6cce456..7568a7e 100644 --- a/modules/universal_table/index.html.erb +++ b/modules/universal_table/index.html.erb @@ -96,7 +96,7 @@
- @@ -120,7 +120,8 @@ - +
{{total_entries}}
+
{{export_button}}
{{pagination_goes_here}} diff --git a/modules/universal_table/index6.html.erb b/modules/universal_table/index6.html.erb new file mode 100644 index 0000000..087deec --- /dev/null +++ b/modules/universal_table/index6.html.erb @@ -0,0 +1,197 @@ + +
+ + + +
+
+ Reset + +
+
+
+
+
+
+ +
{{title}}
+
+
+
+ {{form-field}} + +
+
+
+
+
+
+ +
+
+
+ + + + + + + + + + + + + +
+

{{table-name}}

+
+
{{title}}
+
{{title}}
+
+ +
+ +
+ {{form-field}} + +
+ + +
+
+
{{text}}
+ +
{{total_entries}}
+
{{export_button}}
+{{pagination_goes_here}} + diff --git a/modules/universal_table/index7.html.erb b/modules/universal_table/index7.html.erb new file mode 100644 index 0000000..c8edd53 --- /dev/null +++ b/modules/universal_table/index7.html.erb @@ -0,0 +1,154 @@ + +
+ +
+
+ Reset + +
+
+
+
+
+
+ +
{{title}}
+
+
+
+ {{form-field}} + +
+
+
+
+
+
+ +
+
+
+ + + + + + + + + + + +
+

{{table-name}}

+
+ +
{{title}}
+
+ +
+ +
+ {{form-field}} + +
+ + +
+
+
{{text}}
+ +
{{total_entries}}
+
{{export_button}}
+{{pagination_goes_here}} + diff --git a/modules/universal_table/index8.html.erb b/modules/universal_table/index8.html.erb new file mode 100644 index 0000000..ea07d15 --- /dev/null +++ b/modules/universal_table/index8.html.erb @@ -0,0 +1,146 @@ + +
+ +
+
+ Reset + +
+
+
+
+
+
+ +
{{title}}
+
+
+
+ {{form-field}} + +
+
+
+
+
+
+ +
+
+
+ + + + + + + + + + + +
+

{{table-name}}

+
+ +
{{title}}
+
+ +
+ +
+ {{form-field}} + +
+ + +
+
+
{{text}}
+ +
{{total_entries}}
+
{{export_button}}
+{{pagination_goes_here}} + diff --git a/modules/universal_table/info.json b/modules/universal_table/info.json index 99d7285..70b9418 100644 --- a/modules/universal_table/info.json +++ b/modules/universal_table/info.json @@ -33,7 +33,41 @@ }, "thumbnail" : "thumb.png", "default": true + }, + { + "filename" : "index5", + "name" : { + "zh_tw" : "5. 卡片兩欄單純表格列表 + 多欄位搜尋", + "en" : "5. card 2-col Pure index table+ Multiple Field Search" + }, + "thumbnail" : "thumb.png" } + , + { + "filename" : "index6", + "name" : { + "zh_tw" : "6. 卡片三欄單純表格列表 + 多欄位搜尋", + "en" : "6. card 3-col Pure index table+ Multiple Field Search" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "index7", + "name" : { + "zh_tw" : "7.rwd左右 單純表格列表 + 多欄位搜尋", + "en" : "7.rwd左右 col Pure index table+ Multiple Field Search" + }, + "thumbnail" : "thumb.png" + }, + { + "filename" : "index8", + "name" : { + "zh_tw" : "8.rwd左右 含序號表格列表 + 多欄位搜尋", + "en" : "8.rwd左右 col Index Table with serial number + Multiple Field Search" + }, + "thumbnail" : "thumb.png", + "default": true + } ], "widgets" : [ {