update

assets/stylesheets/template/modules/archives.scss

@@ -7,6 +7,15 @@
 //
 // Widget
 // ## gerenral styles
+.i-archive{
+  dd{
+    margin-bottom: 0.5em;
+        width: 100%;
+  }
+}
+.i-archive__file-wrap{
+      font-size: 1.2em;
+}
 .i-archive__list{
   .date-thead{
     min-width: 4em;
@@ -18,6 +27,7 @@
   }
 }
 .i-items{
+      border: 1px solid #ccc;
   @media(min-width: 768px){
       background-color: #fff;
   }
@@ -42,9 +52,6 @@
     @extend .unity-title;
   }
 }
-.i-archive-item-title{
-  font-weight: normal;
-}
 .panel-title{
   @extend .i-title;
 }
@@ -144,6 +151,7 @@
 .i-archive-title {
   @extend .unity-title;
 }
+/* 2. 對應的檔案顏色 (轉為 iOS 半透明色調) */
 .link { background-color: #1368d4 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
 .txt  { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
 .xlsx { background-color: #9e3050 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
@@ -156,18 +164,17 @@
 .rar  { background-color: #9e5000 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
 .xls  { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
 .odt  { background-color: #767676 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
-.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
-    // border-top: 0.0625em solid #ddd;
-}
 // Archive index 1
 .index-archive-1 {
   font-family: $main-font;
 
   .i-archive__item-wrap{
-    border: 1px solid #ccc;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
-    padding: 15px;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 1em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom: 0;
+    }
   }
 
   .i-archive__archive-title {
@@ -187,7 +194,6 @@
     list-style: none;
   }
 
-  .i-archive__category-list {}
 
   .i-archive__category-title {
     padding-bottom: 0.3125em;
@@ -199,13 +205,12 @@
   }
 
   .i-archive__file-list {
-    display: block;
     margin-bottom: 0;
   }
 
   .i-archive__file-wrap {
     margin:0;
-    padding:0.5em 0 0;
+    padding:0 0 0.5em 0;
     border-radius: 0.125em;
   }
 
@@ -343,23 +348,11 @@
   }
 
   .i-archive__file-name {
-    font-size: 1.2em;
+    font-size: 1em;
   }
 
   .i-archive__file-wrap {
     margin-bottom: 0.625em;
-    background: #eaecf0;
-    padding: 5px;
-    box-sizing: border-box;
-    transition: all 0.5s ease;
-    border: 0;
-    border-radius: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    .label{
-      line-height: unset;
-    }
   }
 
   .i-archive__item-wrap {
@@ -415,7 +408,6 @@
     margin-bottom: 1.5em;
     position: relative;
     background: #fff;
-    border-radius: 5px;
   }
   .head{
     @media(min-width: 821px){
@@ -547,7 +539,6 @@
   }
   li{
     list-style: none;
-    margin-bottom: 0.5em;
   }
 }
 .index-archive-15{

modules/archive/_archive_widget2.html.erb

@@ -6,7 +6,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#widget-archive-group" href="#collapse" class="collapsed">
+          <a data-bs-toggle="collapse" data-bs-parent="#widget-archive-group" href="#collapse" class="collapsed">
             {{category-title}}
           </a>
         </h4>

modules/archive/_archive_widget3.html.erb

@@ -10,7 +10,7 @@
               <ul class="w-archive__list level-4" data-list="files" data-level="2">
                 <li class="w-archive__item level-4">
                   <a href="{{file-url}}" class="widget-archive-files-item w-archive__link" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                  <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                  <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
                 </li>
               </ul>
             </li>

modules/archive/_archive_widget4.html.erb

@@ -7,7 +7,7 @@
       <div class="panel-heading" style="padding: 0.625em 0.9375em;">
         <h4 class="panel-title">
           <i class="fa fa-file-text" aria-hidden="true"></i>
-          <a data-toggle="collapse" data-parent="#widget-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+          <a data-bs-toggle="collapse" data-bs-parent="#widget-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
             {{category-title}}
             <i class="fa fa-chevron-down" aria-hidden="true"></i>
           </a>

modules/archive/archive_index1.html.erb

@@ -18,7 +18,7 @@
             <dd class="i-archive__file-wrap">
               <i class="fa-solid fa-file"></i>
               <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-              <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
             </dd>
           </dl>
         </div>
@@ -26,3 +26,19 @@
     </li>
   </ul>
 </div>
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+  .i-archive__item-wrap {
+      background: #eaeef0;
+  }
+  .index-archive-1 .i-archive__file-list{
+        display: flex;
+    flex-wrap: wrap;
+  }
+</style>

modules/archive/archive_index10.html.erb

@@ -16,13 +16,14 @@
           <tr class="archive-items">
             <td class="i-archive__serial_number col-sm-2">{{idx}}</td>
             <td class="head col-sm-7">
-               {{archive-title}}
+               <span class="i-archive__archive-title">{{archive-title}}</span>
                <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
                <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-             </span>
+               </span>
+               <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
             </td>
             <td class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
             </td>
           </tr>
         </tbody>
@@ -30,3 +31,23 @@
     </table>
   </div>
 </div>
+<style>
+.index-archive-10{
+  .i-archive__archive-title {
+    font-weight: bold;
+  }
+  .thead{
+  @media(max-width:768px){
+    display:none;
+  }
+  }
+  .table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{
+    border:0;
+  }
+  .archive-items:nth-child(odd) {
+      background-color: #F3F3F3;
+  }
+} 
+
+
+</style>

modules/archive/archive_index11.html.erb

@@ -1,4 +1,4 @@
-<div class="i-archive index-archive-9">
+<div class="i-archive index-archive-11">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
@@ -8,7 +8,7 @@
       <thead class="thead">
         <tr>
           <th class="col-sm-2 title-thead">{{serial_number-head}}</th>
-          <th class="col-sm-7 title-thead file-name-wrapper">{{title-head}}</th>
+          <th class="col-sm-7 title-thead">{{title-head}}</th>
           <th class="col-sm-3 file-thead">{{file-head}}</th>
         </tr>
       </thead>
@@ -19,11 +19,11 @@
               <td class="col-sm-2">
                 <span class="i-archive__serial_number">{{serial_number}}</span>
               </td>
-              <td class="col-sm-7 file-name-wrapper">
+              <td class="col-sm-7">
                 <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
               </td>
               <td class="col-sm-3">
-                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
               </td>
             </tr>
           </span>
@@ -33,8 +33,22 @@
   </div>
 </div>
 <style>
-.file-name-wrapper{
-      text-align: justify !important;
-}
+.index-archive-11{
+  .i-archive__archive-title {
+    font-weight: bold;
+  }
+  .thead{
+  @media(max-width:768px){
+    display:none;
+  }
+  }
+  .table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{
+    border:0;
+  }
+  .archive-items:nth-child(odd) {
+      background-color: #F3F3F3;
+  }
+} 
+
 
 </style>

modules/archive/archive_index12.html.erb

@@ -1,44 +1,69 @@
-<div class="i-archive index-archive-2 index-archive-12">
+<div class="i-archive index-archive-12">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
   <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
     <div class="panel panel-default">
-      <div class="panel-heading" style="padding: 0.625em 0.9375em;">
+      <div class="panel-heading">
         <h4 class="panel-title">
-          <i class="fa fa-file-text" aria-hidden="true"></i>
-          <a role="button" data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
-            {{category-title}}
-            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+          <a data-bs-toggle="collapse" data-bs-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
+             <i class="fa fa-th-list"></i>
+             {{category-title}}
+             <i class="faright fa fa-chevron-down" aria-hidden="true"></i>
           </a>
-
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
-          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list">
-              <sapn class="i-archive-item-title">{{archive-title}}</span>
+          <div class="div-horizontal i-archive-item-group" data-list="archives" data-level="1">
+          <div class="i-archive-item-wrap">
+            <div class="i-archive-item-list col-sm-12">
+              <span class="i-archive-item-title">{{archive-title}}</span>
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
-            </dt>
-            <dl class="i-archive-files-list" data-list="files"  data-level="2">
+              <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
+            </div>
+            <div class="i-archive-files-list col-sm-12" data-list="files"  data-level="2">
               <dd>
                 <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </dd>
-            </dl>
-          </dl>
+            </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
         {{link_to_edit}}
   </div>
   <style>
-    .index-archive-12 dt.i-archive-item-list{
-      float: none;
-      width: auto;
+  .panel-heading{
+    padding:0;
+  }
+  .panel-title a {
+    display: block;
+    padding: 0.625em 0.9375em;
+  }
+  .i-archive-item-title{
+    font-weight:bold;
+  }
+  .i-archive-item-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom:0;
+    }
+  }
+    @media (min-widivh: 769px){
+      .index-archive-2 .div-horizontal div.col-sm-3{
+        widivh: 25%;
+      }
     }
   </style>
-</div>
+</div>

modules/archive/archive_index13.html.erb

@@ -11,20 +11,20 @@
     <div class="tab-pane {{active_class}}" id="{{category-id}}" role="tabpanel" aria-labelledby="{{category-id}}-tab">
       <ul class="archives-ul" data-list="archives" data-level="1">
         <li class="archive-li">
-          <p>
-            <span data-list="statuses" data-level="2">
-              <span class="label status {{status-class}}">{{status}}</span>
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
-            <a href="{{archive-file-url}}" target="{{target}}" title="{{archive-title}}">
-              {{archive-title}}
-            </a>
-            <span class="i-archive-files-list" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
-              </a>
-            </span>
-          </p>
-          <div class="archive-description">{{description}}</div>
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
+        </div>
         </li>
       </ul>
       {{link_to_edit}}
@@ -32,9 +32,34 @@
   </div>
 </div>
 <style>
-  .i-archive.index-archive-13 .i-archive-files-item{
-    white-space: inherit;
+.index-archive-13{
+  .i-archive__status-wrap {
+    display: block;
+    width: 100%;
   }
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    display:flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+  .archives-ul {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+  }
+} 
+.i-archive__file-wrap {
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0.5em 0 0;
+    border-radius: 0.125em;
+}
+
+
   .index-archive-13 .archives-ul .archive-li{
     list-style-type: disc;
   }

modules/archive/archive_index14.html.erb

@@ -6,18 +6,17 @@
     <div class="panel panel-default default-collapse" data-list="archives" data-level="1">
       <div class="panel-heading" style="padding: 0.625em 0.9375em;">
         <h4 class="panel-title">
-          <i class="fa fa-file-text" aria-hidden="true"></i>
-          <a role="button" data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
-            {{archive-title}}
+          <a data-bs-toggle="collapse" data-bs-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+           <i class="fa fa-file-text" aria-hidden="true"></i> {{archive-title}}
             <i class="fa fa-chevron-down" aria-hidden="true"></i>
           </a>
-
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
           <ul class="i-archive-files-list" data-list="files"  data-level="2">
             <li>
+              <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
               <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
               <span class="label label-primary {{file-type}}">{{file-type}}</span>
             </li>
@@ -28,6 +27,17 @@
         {{link_to_edit}}
   </div>
   <style>
+  .fa-file-text:before {
+    content: "\f15c"!important;
+  }
+    .panel-heading{
+    padding:0;
+  }
+  .panel-title a {
+    display: block;
+    padding: 0.625em 0.9375em;
+    width: 100%;
+  }
     .index-archive-12 dt.i-archive-item-list{
       float: none;
       width: auto;

modules/archive/archive_index15.html.erb

@@ -1,4 +1,4 @@
-<div class="i-archive index-archive-13 index-archive-15">
+<div class="i-archive index-archive-15">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
@@ -11,20 +11,22 @@
     <div class="tab-pane {{active_class}}" id="{{category-id}}" role="tabpanel" aria-labelledby="{{category-id}}-tab">
       <ul class="archives-ul" data-list="archives" data-level="1">
         <li class="archive-li">
-          <p>
-            <span data-list="statuses" data-level="2">
-              <span class="label status {{status-class}}">{{status}}</span>
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
-            <a href="{{archive-file-url}}" target="{{target}}" title="{{archive-title}}">
-              {{archive-title}}
-            </a>
-            <span class="i-archive-files-list" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}" data-toggle="tooltip" data-placement="bottom">
-                {{file-name}}<span class="label label-primary {{file-type}}">{{file-type}}</span>
-              </a>
-            </span>
-          </p>
-          <div class="archive-description">{{description}}</div>
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <i class="fa-solid fa-file"></i>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
+        </div>
         </li>
       </ul>
       {{link_to_edit}}
@@ -32,10 +34,41 @@
   </div>
 </div>
 <style>
-  .index-archive-13 .archives-ul .archive-li{
-    list-style-type: disc;
+  .i-archive__archive-title {
+    font-size: 1.2em;
+}
+.index-archive-15{
+  .i-archive__status-wrap {
+    display: block;
+    width: 100%;
   }
-  .index-archive-13 .archive-description{
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+
+  .archives-ul {
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+  }
+} 
+.i-archive__file-wrap {
+    font-size: 1.2em;
+    margin: 0;
+    padding: 0.5em 0 0;
+    border-radius: 0.125em;
+}
+.archive-li{
+      list-style: none;
+}
+    .archives-ul {
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+        background: #eaeef0;
+        padding: 1em;
+        border: 1px solid #ccc;
+    }
+  .index-archive-15 .archive-description{
     color: #9b9b9b;
   }
 </style>

modules/archive/archive_index16.html.erb

@@ -8,7 +8,7 @@
         <h4 class="panel-title">
           <div class="date col-sm-2">{{created_at}}</div>
           <i class="fa fa-file-text" aria-hidden="true"></i>
-          <a role="button" data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+          <a data-bs-toggle="collapse" data-bs-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
             {{archive-title}}
             <i class="fa fa-chevron-down" aria-hidden="true"></i>
           </a>

modules/archive/archive_index17.html.erb

@@ -0,0 +1,47 @@
+<div class="i-archive  index-archive-1 index-archive-17">
+    <h3 class="i-archive-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
+    <li class="i-archive__item">
+      <h4 class="i-archive__category-title">{{category-title}}</h4>
+      <dl class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+            </span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <i class="fa-solid fa-file"></i>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
+        </div>
+      </dl>
+    </li>
+  </ul>
+</div>
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+.index-archive-8{
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    display:flex;
+    justify-content: space-between;
+  }
+}
+
+</style>

modules/archive/archive_index2.html.erb

@@ -6,37 +6,56 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}" role="button">
+          <a data-bs-toggle="collapse" data-bs-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
              <i class="fa fa-th-list"></i>
              {{category-title}}
+             <i class="faright fa fa-chevron-down" aria-hidden="true"></i>
           </a>
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
-          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list col-sm-3">
+          <div class="div-horizontal i-archive-item-group" data-list="archives" data-level="1">
+          <div class="i-archive-item-wrap">
+            <div class="i-archive-item-list col-sm-3">
               <span class="i-archive-item-title">{{archive-title}}</span>
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
-            </dt>
-            <dl class="i-archive-files-list col-sm-9" data-list="files"  data-level="2">
+              <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
+            </div>
+            <div class="i-archive-files-list col-sm-9" data-list="files"  data-level="2">
               <dd>
                 <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </dd>
-            </dl>
-          </dl>
+            </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
         {{link_to_edit}}
   </div>
   <style>
-    @media (min-width: 769px){
-      .index-archive-2 .dl-horizontal dt.col-sm-3{
-        width: 25%;
+  .i-archive-item-title{
+    font-weight:bold;
+  }
+  .i-archive-item-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom:0;
+    }
+  }
+    @media (min-widivh: 769px){
+      .index-archive-2 .div-horizontal div.col-sm-3{
+        widivh: 25%;
       }
     }
   </style>

modules/archive/archive_index3.html.erb

@@ -11,15 +11,29 @@
             <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
               <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
           </dt>
           <dl class="i-archive__file-list" data-list="files"  data-level="2">
             <dd class="i-archive__file-wrap">
               <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-              <span class="i-archive__file-type  label label-primary {{file-type}}">{{file-type}}</span>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
             </dd>
           </dl>
         </div>
       </dl>
     </li>
   </ul>
-</div>
+</div>
+<style>
+.i-archive__item-wrap {
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 1em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom: 0;
+    }
+}
+.i-archive__file-list {
+    margin: 0;
+}
+</style>

modules/archive/archive_index4.html.erb

@@ -6,29 +6,54 @@
     <div class="panel panel-default">
       <div class="panel-heading">
         <h4 class="panel-title">
-          <a data-toggle="collapse" data-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}" role="button">
-            <i class="fa fa-th-list"></i>{{category-title}}
+          <a data-bs-toggle="collapse" data-bs-parent="#index-archive-group" href="#collapse" class="collapsed" title="{{category-title}}">
+             <i class="fa fa-th-list"></i>
+             {{category-title}}
+             <i class="faright fa fa-chevron-down" aria-hidden="true"></i>
           </a>
         </h4>
       </div>
       <div id="collapse" class="panel-collapse collapse {{in_class}}">
         <div class="panel-body">
-          <dl class="dl-horizontal i-archive-item-group" data-list="archives" data-level="1">
-            <dt class="i-archive-item-list col-sm-5">
+          <div class="div-horizontal i-archive-item-group" data-list="archives" data-level="1">
+          <div class="i-archive-item-wrap">
+            <div class="i-archive-files-list col-sm-12" data-list="files"  data-level="2">
               <span data-list="statuses" data-level="2">
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
-            </dt>
-            <dl class="i-archive-files-list col-sm-7" data-list="files"  data-level="2">
+              <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
               <dd>
                 <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                <span class="label label-primary {{file-type}}">{{file-type}}</span>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </dd>
-            </dl>
-          </dl>
+            </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    {{link_to_edit}}
+        {{link_to_edit}}
   </div>
-</div>
+  <style>
+  .i-archive-item-title{
+    font-weight:bold;
+  }
+  .i-archive-item-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    clear: both;
+    width: 100%;
+    border-bottom: 1px solid #ccc;
+    padding-bottom: 0.5em;
+    padding-top: 1em;
+    &:last-child{
+      border-bottom:0;
+    }
+  }
+    @media (min-widivh: 769px){
+      .index-archive-2 .div-horizontal div.col-sm-3{
+        widivh: 25%;
+      }
+    }
+  </style>
+</div>

modules/archive/archive_index5.html.erb

@@ -15,13 +15,14 @@
           <div class="archive-items clearfix">
               <div class="date col-sm-2">{{created_at}}</div>
               <div class="head col-sm-7">
-                 {{archive-title}}
+                 <span class="i-archive__archive-title">{{archive-title}}</span>
                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                 <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-               </span>
+                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+                 </span>
+                 <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
               </div>
               <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
               </div>
               </div>
           </div>
@@ -37,4 +38,22 @@ if( window.location.href.indexOf('/en/') > -1 ) {
   $('.title-thead').replaceWith('<div class="col-sm-7 title-thead-en">Title</div>')
   $('.file-thead').replaceWith('<div class="col-sm-3 file-thead-en">Download file</div>')
 }
-</script>
+</script>
+<style>
+.i-archive__archive-title{
+  font-weight:bold;
+}
+.index-archive-5 .archive-items{
+  @media(max-width:768px){
+    padding:1em;
+  }
+}
+.link{margin-right: 0.5em;}
+.txt { background-color: #6dbb73;     margin-right: 0.5em;}
+.xlsx { background-color: #bb6d7f;     margin-right: 0.5em;}
+.pdf { background-color: #3b8347;     margin-right: 0.5em;}
+.docx { background-color: #846dbb;     margin-right: 0.5em;}
+.pptx { background-color: #6d77bb;     margin-right: 0.5em;}
+.jpg { background-color: #bb6d6d;     margin-right: 0.5em;}
+.zip { background-color: #dcb957;     margin-right: 0.5em;}
+</style>

modules/archive/archive_index6.html.erb

@@ -1,46 +1,48 @@
-<div class="i-archive index-archive-6">
-  <h3 class="i-archive-title">
+<div class="i-archive  index-archive-1 index-archive-6">
+    <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <div class="i-items">
-        <div class="thead row">
-          <div class="col-sm-2 date-thead">上傳日期</div>
-          <div class="col-sm-7 title-thead">標題</div>
-          <div class="col-sm-3 file-thead">檔案下載</div>
-          </div>
-        <div class="tbody">
-          <div class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
-          <div class="archive-items clearfix">
-              <div class="date col-sm-2">{{created_at}}</div>
-              <div class="head col-sm-7">
-                <dl class="i-archive__file" data-list="files"  data-level="2">
-                <div class="file-name">
-                  <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
-                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-                  </span>
-                </div>
-                </dl>
-              </div>
-              <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <div class="file-item">
-                <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
-              </div>
-              </div>
-            </div>
-          </div>
+  <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
+    <li class="i-archive__item">
+      <h4 class="i-archive__category-title">{{category-title}}</h4>
+      <dl class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <div class="date ">{{created_at}}</div>
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+            </span>
+          </dt>
+          <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <i class="fa-solid fa-file"></i>
+              <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
         </div>
-      </div>
-    </div>
-  </div>
+      </dl>
+    </li>
+  </ul>
 </div>
-
-<script>
-if( window.location.href.indexOf('/en/') > -1 ) {
-  $('.date-thead').replaceWith('<div class="col-sm-2 date-thead-en">Updated At</div>')
-  $('.title-thead').replaceWith('<div class="col-sm-7 title-thead-en">Title</div>')
-  $('.file-thead').replaceWith('<div class="col-sm-3 file-thead-en">Download file</div>')
+<style>
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
 }
-</script>
+.index-archive-1{
+  .date {
+    font-size: 1.2rem;
+    font-weight: normal;
+  }
+}
+  .i-archive__item-wrap {
+      background: #eaeef0;
+  }
+
+</style>

modules/archive/archive_index7.html.erb

@@ -1,54 +1,51 @@
-<div class="i-archive index-archive-7">
+<div class="i-archive index-archive-2 index-archive-7">
   <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <table class="i-items table table-bordered">
-        <thead class="thead row">
-        <tr>
-          <th class="col-sm-2">{{date-head}}</th>
-          <th class="col-sm-4">{{title-head}}</th>
-          <th class="col-sm-3">{{description-head}}</th>
-          <th class="col-sm-3">{{file-head}}</th>
-        </tr>
-        </thead>
-        <tbody class="tbody i-archive__category-list" data-list="archives" data-level="1">
-          <tr class="archive-items">
-
-            <td class="date col-sm-2">{{created_at}}</td>
-            <td class="head col-sm-4">{{archive-title}}</td>
-              <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-               <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-              </span>
-            <td class="description col-sm-3">{{description}}</td>
-            <td class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
-            </td>
-          </tr>
-        </tbody>
-    </table>
+  
+  <div class="panel-group" id="index-archive-group" data-list="categories" data-level="0">
+  <h4 class="i-archive__category-title">{{category-title}}</h4>
+    <div class="panel panel-default default-collapse" data-list="archives" data-level="1">
+      <div class="panel-heading" style="padding: 0.625em 0.9375em;">
+        <h4 class="panel-title">
+          <a data-bs-toggle="collapse" data-bs-parent="#index-archive-group" href="#collapse" class="collapsed" style="padding: 0;display: inline-block;">
+           <i class="fa fa-file-text" aria-hidden="true"></i> {{archive-title}}
+            <i class="fa fa-chevron-down" aria-hidden="true"></i>
+          </a>
+        </h4>
+      </div>
+      <div id="collapse" class="panel-collapse collapse {{in_class}}">
+        <div class="panel-body">
+          <ul class="i-archive-files-list" data-list="files"  data-level="2">
+            <li>
+              <span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
+              <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
+              <span class="label label-primary {{file-type}}">{{file-type}}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+        {{link_to_edit}}
   </div>
+  <style>
+    .fa-file-text:before {
+    content: "\f15c"!important;
+  }
+    .panel-heading{
+    padding:0;
+  }
+  .panel-title a {
+    display: block;
+    padding: 0.625em 0.9375em;
+    width: 100%;
+  }
+    .index-archive-7 dt.i-archive-item-list{
+      float: none;
+      width: auto;
+    }
+    li{
+      list-style:none;
+    }
+  </style>
 </div>
-
-
-<script>
-$(document).ready(function(){
-  if(window.innerWidth >= 768){
-    $(".archive-items .date").each(function(i,d){
-      $(d).parent().eq(0).children().css("min-height",$(d).parent().height());
-    })
-  }else{
-    $(".archive-items >").css("min-height","");
-  }
-})
-$(window).resize(function(){
-  if(window.innerWidth >= 768){
-    $(".archive-items .date").each(function(i,d){
-      $(d).parent().eq(0).children().css("min-height",$(d).parent().height());
-    })
-  }else{
-    $(".archive-items >").css("min-height","");
-  }
-})
-</script>

modules/archive/archive_index8.html.erb

@@ -1,40 +1,48 @@
-<div class="i-archive index-archive-6">
-  <h3 class="i-archive-title">
+<div class="i-archive  index-archive-1 index-archive-8">
+    <h3 class="i-archive-title">
     <span>{{page-title}}</span>
   </h3>
-  <div class="i-archive__list list-unstyled" id="index-archive-group" data-list="categories" data-level="0">
-   <h4 class="i-archive__category-title">{{category-title}}</h4>
-    <div class="i-items">
-        <div class="thead row">
-          <div class="col-sm-2 date-thead">{{date-head}}</div>
-          <div class="col-sm-4 title-thead">{{title-head}}</div>
-          <div class="col-sm-3 description-thead">{{description-head}}</div>
-          <div class="col-sm-3 file-thead">{{file-head}}</div>
-          </div>
-        <div class="tbody">
-          <div class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
-          <div class="archive-items clearfix">
-              <div class="date col-sm-2">{{created_at}}</div>
-              <div class="head col-sm-4">
-                <dl class="i-archive__file" data-list="files"  data-level="2">
-                <div class="file-name">
-                  <a class="i-archive__file-name" href="{{file-url}}" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
-                  <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-                  <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
-                  </span>
-                </div>
-                </dl>
-              </div>
-              <div class="description col-sm-3">{{description}}</div>
-              <div class="i-archive__file-list col-sm-3" data-list="files" data-level="2">
-              <div class="file-item">
-                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
-              </div>
-              </div>
-            </div>
-          </div>
+  <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
+    <li class="i-archive__item">
+      <h4 class="i-archive__category-title">{{category-title}}</h4>
+      <dl class="i-archive__category-list list-unstyled" data-list="archives" data-level="1">
+        <div class="i-archive__item-wrap">
+          <dt class="i-archive__category-item">
+            <span class="i-archive__archive-title">{{archive-title}}</span>
+            <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
+            </span>
+            <span class="description" style="margin-top: 0.5em;clear: both;width: 100%;position: relative;display: block;">{{description}}</span>
+          </dt>
+          <dl class="i-archive__file-list" data-list="files"  data-level="2">
+            <dd class="i-archive__file-wrap">
+              <a href="{{file-url}}" class="i-archive-files-item" target="_blank"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary">{{file-type}}</span></a>
+            </dd>
+          </dl>
         </div>
-      </div>
-    </div>
-  </div>
-</div>
+      </dl>
+    </li>
+  </ul>
+</div>
+<style>
+.i-archive__file-list{
+  display:flex;
+}
+.i-archive__category-list{
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    background: #eaeef0;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-radius: 0.5em;
+}
+.index-archive-8{
+  .i-archive__status-wrap {
+    width: 100%;
+  }
+  .i-archive__item-wrap{
+    display:flex;
+    justify-content: space-between;
+  }
+}
+
+</style>

modules/archive/archive_index9.html.erb

@@ -19,7 +19,7 @@
                 {{file-name}}
               </td>
               <td class="col-sm-4">
-                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
+                <a href="{{file-url}}" class="i-archive-files-item" target="{{target}}"  data-bs-toggle="tooltip" data-placement="bottom" title="{{file-name}}"><span class="label label-primary {{file-type}}">{{file-type}}</span></a>
               </td>
             </tr>
           </span>
@@ -28,3 +28,20 @@
     </table>
   </div>
 </div>
+<style>
+.index-archive-9{
+.thead{
+ @media(max-width:768px){
+  display:none;
+ }
+}
+.table-bordered>tbody>tr>td,.table-bordered>thead>tr>th{
+  border:0;
+}
+.archive-items:nth-child(odd) {
+    background-color: #F3F3F3;
+}
+} 
+
+
+</style>

modules/archive/info.json

@@ -1,73 +1,97 @@
 {
   "frontend": [
-    {
-      "filename": "archive_index1",
-      "name": {
-        "zh_tw": "1. 列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-        "en": "1. List (widget-title, category, filename, download link)"
-      },
-      "thumbnail": "ar1.png"
-    },
     {
       "filename": "archive_index2",
       "name": {
-        "zh_tw": "2. 手風琴式列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
+        "zh_tw": "A1. 手風琴式列表 ( 類別折疊,（左）檔案室標題與說明,（右）檔名及Icon)",
         "en": "2. Accordion list (widget-title, category, filename, download link)"
       },
       "thumbnail": "ar2.png"
-    },
+    },    
     {
-      "filename": "archive_index3",
+      "filename": "archive_index12",
       "name": {
-        "zh_tw": "3. 列表( 無檔案名稱 ) ( 模組標題, 類別標題, 下載連結 )",
-        "en": "3. List(no filename) (widget-title, category, download link)"
+        "zh_tw": "A1-1. 手風琴式列表 ( 類別折疊,（上）檔案室標題與說明,（下）檔名及Icon)",
+        "en": "12. Accordion list - with drop down  (widget-title, category, filename, download link)"
       },
-      "thumbnail": "ar3.png"
+      "force_cover": "true",
+      "thumbnail": "ar12.png"
     },
     {
       "filename": "archive_index4",
       "name": {
-        "zh_tw": "4. 手風琴式列表( 無檔案名稱  ( 模組標題, 類別標題, 下載連結 )",
+        "zh_tw": "A2. 手風琴式列表 ( 類別折疊, 檔案室說明, 檔名Icon)",
         "en": "4. Accordion list(no filename) (widget-title, category, download link)"
       },
       "thumbnail": "ar4.png"
     },
     {
-      "filename": "archive_index5",
+      "filename": "archive_index14",
       "name": {
-        "zh_tw": "5. 表格列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-        "en": "5. Table list (widget-title, category, filename, download link)"
+        "zh_tw": "A3. 手風琴式列表 ( 類別折疊, 檔案室說明, 檔名Icon)",
+        "en": "14. Accordion list - with drop down - For every data  (widget-title, title, filename, download link)"
       },
-      "thumbnail": "ar5.png"
-    },
-    {
-      "filename": "archive_index6",
-      "name": {
-        "zh_tw": "6. 表格列表 ( 模組標題, 檔案名稱, 下載連結 )",
-        "en": "6. Table list (widget-title, filename, download link)"
-      },
-      "thumbnail": "ar5.png"
-    },
+      "force_cover": "true",
+      "thumbnail": "ar14.png"
+    },    
     {
       "filename": "archive_index7",
       "name": {
-        "zh_tw": "7. 表格列表 ( 模組標題, 類別標題, 上傳日期, 檔案名稱, 檔案簡介, 下載連結 )",
+        "zh_tw": "A4. 手風琴式列表 ( 類別區塊, 檔案室標題折疊, 檔案室說明, 檔名Icon)",
         "en": "7. Table list (widget-title, category, Updated At, filename, download link)"
       },
-      "thumbnail": "ar5.png"
+      "thumbnail": "ar7.png"
+    },
+    
+
+    
+    {
+      "filename": "archive_index1",
+      "name": {
+        "zh_tw": "L1. 條列式列表 ( 類別區塊, 檔案室標題, 檔案室說明, 檔名Icon )",
+        "en": "1. List (widget-title, category, filename, download link)"
+      },
+      "thumbnail": "ar1.png"
+    },
+    {
+      "filename": "archive_index3",
+      "name": {
+        "zh_tw": "L2. 條列式列表 ( 類別區塊, 檔案室說明, 檔名Icon )",
+        "en": "3. List(no filename) (widget-title, category, download link)"
+      },
+      "thumbnail": "ar3.png"
     },
     {
       "filename": "archive_index8",
       "name": {
-        "zh_tw": "8. 表格列表 ( 模組標題, 上傳日期, 檔案名稱, 檔案簡介, 下載連結 )",
+        "zh_tw": "L3. 條列式列表 ( 類別區塊, 檔案室標題及說明, Icon)",
         "en": "8. Table list (widget-title, Updated At, filename, download link)"
       },
+      "thumbnail": "ar8.png"
+    },
+    {
+      "filename": "archive_index6",
+      "name": {
+        "zh_tw": "L4. 條列式列表 ( 類別區塊, 檔案室日期, 檔名Icon檔案室說明)",
+        "en": "6. Table list (widget-title, filename, download link)"
+      },
+      "thumbnail": "ar6.png"
+    },
+    
+
+
+    {
+      "filename": "archive_index5",
+      "name": {
+        "zh_tw": "G1. 表格式列表 ( 類別區塊, 檔案室日期, 檔案室標題, 檔案室說明, Icon)",
+        "en": "5. Table list (widget-title, category, filename, download link)"
+      },
       "thumbnail": "ar5.png"
     },
     {
       "filename": "archive_index9",
       "name": {
-        "zh_tw": "9. 表格列表 - 簡約 ( 模組標題, 檔案名稱, 下載連結 )",
+        "zh_tw": "G2. 表格式列表 ( 類別區塊, 檔名, Icon )",
         "en": "9. Table list - Simple (widget-title, filename, download link)"
       },
       "force_cover": "true",
@@ -76,32 +100,25 @@
     {
       "filename": "archive_index10",
       "name": {
-        "zh_tw": "10. 表格列表 ( 模組標題, 類別標題, 編號,  檔案名稱, 下載連結 )",
+        "zh_tw": "G3. 表格式列表 ( 類別區塊, 編號, 檔案室標題, 檔案室說明, Icon)",
         "en": "10. Table list (widget-title, category, Serial Number, filename, download link)"
       },
-      "thumbnail": "ar5.png"
+      "thumbnail": "ar10.png"
     },
     {
       "filename": "archive_index11",
       "name": {
-        "zh_tw": "11. 表格列表 - 簡約 - 展開檔案 ( 模組標題, 類別標題, 編號,  檔案名稱, 下載連結 )",
+        "zh_tw": "G4. 表格式列表 ( 類別區塊, 編號, 檔名, Icon)",
         "en": "11. Table list - Simple - Unfold Files (widget-title, category, Serial Number, filename, download link)"
       },
-      "thumbnail": "ar9.png"
-    },
-    {
-      "filename": "archive_index12",
-      "name": {
-        "zh_tw": "12. 手風琴式列表 - 有下拉 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-        "en": "12. Accordion list - with drop down  (widget-title, category, filename, download link)"
-      },
-      "force_cover": "true",
-      "thumbnail": "ar2.png"
+      "thumbnail": "ar11.png"
     },
+
+
     {
       "filename": "archive_index13",
       "name": {
-        "zh_tw": "13. 頁籤式 ( 模組標題, 類別標題, 標題, 下載連結, 描述 )",
+        "zh_tw": "T1. 頁籤式 ( 類別頁籤, 檔案室標題, 檔案室說明, Icon)",
         "en": "13. Tab list  (widget-title, category, title, download link, description)"
       },
       "old_name": {
@@ -109,34 +126,16 @@
         "en": "13. Tab list  (widget-title, category, title, filename, download link, description)"
       },
       "force_cover": "true",
-      "thumbnail": "ar-tab1.png"
-    },
-    {
-      "filename": "archive_index14",
-      "name": {
-        "zh_tw": "14. 手風琴式列表 - 有下拉 - 針對各筆資料 ( 模組標題, 標題, 檔案名稱, 下載連結 )",
-        "en": "14. Accordion list - with drop down - For every data  (widget-title, title, filename, download link)"
-      },
-      "force_cover": "true",
-      "thumbnail": "ar2.png"
+      "thumbnail": "ar13.png"
     },
     {
       "filename": "archive_index15",
       "name": {
-        "zh_tw": "15. 頁籤式 ( 模組標題, 類別標題, 標題, 完整檔案名稱, 下載連結, 描述 )",
+        "zh_tw": "T2. 頁籤式 ( 類別頁籤, 檔案室標題, 檔案室說明, 檔名Icon)",
         "en": "15. Tab list  (widget-title, category, title, full filename, download link, description)"
       },
       "force_cover": "true",
-      "thumbnail": "ar-tab1.png"
-    },
-    {
-      "filename": "archive_index16",
-      "name": {
-        "zh_tw": "16. 手風琴式列表 - 有下拉 - 針對各筆資料 ( 模組標題, 標題, 檔案名稱, 下載連結 )",
-        "en": "16. Accordion list - with drop down - For every data  (date,widget-title, title, filename, download link)"
-      },
-      "force_cover": "true",
-      "thumbnail": "ar2.png"
+      "thumbnail": "ar15.png"
     }
   ],
   "widgets": [