file upload fix

lib/tasks/universal_table_tasks.rake

@@ -128,15 +128,15 @@ namespace :universal_table_tasks do
           site_locales.each_with_index do |locale, locale_idx|
             file_titles[locale.to_s] = row[col_idx + locale_idx + 1]&.value.to_s.split(";").map(&:strip)
           end
-          ce.column_entry_files.destroy_all
+          # ce.column_entry_files.destroy_all
-          ce.column_entry_files = []
+          # ce.column_entry_files = []
+          cef_ids = ce.column_entry_files.pluck(:id)
 
           file_urls.each_with_index do |remote_url, file_idx|
             if remote_url.blank?
               skip = site_locales.size
             end
             next if remote_url.blank?
-            debugger
             file = ColumnEntryFile.new
             file.remote_file_url = remote_url
             titles = {}
@@ -147,6 +147,7 @@ namespace :universal_table_tasks do
             file.save!
             ce.column_entry_files << file
           end
+          ColumnEntryFile.where(:id.in => cef_ids).destroy_all
 
         when "date"
           ce.date = val

modules/universal_table/_tag_cloud.html.erb

@@ -1 +1,112 @@
-hi
+<ul id="hashtag-list" data-list="hashtags" data-level="0" style="display:none;">
+  <li class="tag-weight-{{count}}"><a href="{{url_to_show}}" title="{{title}}">#{{title}}</a></li>
+</ul>
+<div id="hashtag-wordcloud-wrapper">
+<div id="hashtag-wordcloud" style="  "></div>
+</div>
+
+<script>
+function generateWordCloud() {
+  const container = $('#hashtag-wordcloud');
+  const containerWidth = container.width();
+  const containerHeight = container.height();
+  const placedRects = [];
+
+  function isOverlap(r1, r2, padding = 4) {
+    return !(r2.left > r1.right + padding ||
+             r2.right < r1.left - padding ||
+             r2.top > r1.bottom + padding ||
+             r2.bottom < r1.top - padding);
+  }
+
+  function hasCollision(rect) {
+    return placedRects.some(r => isOverlap(r, rect));
+  }
+
+  function getRandomColor() {
+    const hue = Math.floor(Math.random() * 360);
+    const saturation = Math.floor(Math.random() * 20) + 10;
+    const lightness = Math.floor(Math.random() * 20) + 45;
+    return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+  }
+
+  container.empty();
+
+  $('#hashtag-list li').each(function () {
+    const $li = $(this);
+    const weightClass = $li.attr('class');
+    const weightMatch = weightClass.match(/tag-weight-(\d+)/);
+    const weight = weightMatch ? parseInt(weightMatch[1], 10) : 1;
+
+    const $a = $li.find('a');
+    let text = $a.text();
+    if (text.startsWith('#')) {
+      text = text.substring(1);
+    }
+    const href = $a.attr('href');
+    const title = $a.attr('title');
+
+    const fontSize = Math.min(36, Math.max(16, weight / 100 * 36));
+
+    const $word = $('<a></a>')
+      .attr('href', href)
+      .attr('title', title)
+      .text(text)
+      .css({
+        position: 'absolute',
+        fontSize: fontSize + 'px',
+        color: getRandomColor(),
+        whiteSpace: 'nowrap',
+        cursor: 'pointer',
+        userSelect: 'none',
+        textDecoration: 'none',
+        visibility: 'hidden',
+        display: 'inline-block'
+      });
+
+    container.append($word);
+
+    const width = $word.outerWidth();
+    const height = $word.outerHeight();
+
+    let maxAttempts = 1000;
+    let placed = false;
+
+    while (!placed && maxAttempts > 0) {
+      const left = Math.random() * (containerWidth - width);
+      const top = Math.random() * (containerHeight - height);
+
+      const rect = {
+        left: left,
+        top: top,
+        right: left + width,
+        bottom: top + height
+      };
+
+      if (!hasCollision(rect)) {
+        $word.css({
+          left: left + 'px',
+          top: top + 'px',
+          visibility: 'visible'
+        });
+        placedRects.push(rect);
+        placed = true;
+      }
+      maxAttempts--;
+    }
+
+    if (!placed) {
+      $word.remove(); // 放不下就不強塞
+    }
+  });
+}
+
+$(function() {
+  generateWordCloud();
+
+  // RWD時重新生成文字雲
+  $(window).on('resize', function() {
+    generateWordCloud();
+  });
+});
+</script>

modules/universal_table/index.html.erb

@@ -1,4 +1,43 @@
-  <style>
+<style>
+
+  .universal-dropdown{
+    float:left;
+  }
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .col-ken{
+        min-width: 4em;
+    &:first-child{
+      min-width: unset!important;
+    }
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+    .universal-th-icon{
+      margin:0;
+    }
+    .universal-th-text {
+      margin: 0;
+      .universal-th-icon{
+        margin:0;
+      }
+      .universal-th-text {
+        margin: 0;
+      }
+    }
+
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -7,7 +46,6 @@
     padding: 8px 0 0 0;
     display: inline;
     margin-right: 5px;
-      color: #888;
   }
   .universal-dropdown {
     display: inline-block;
@@ -47,30 +85,32 @@
   .image-preview {
     width: 120px;
   }
-  </style>
+</style>
-  <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index1">
-  <table class="table table-hover table-striped universal-table-index">
   <caption>
     <h3>{{table-name}}</h3>
     <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
   </caption>
   <thead>
     <tr data-list="head-columns" data-level="0">
-        <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-          <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
           <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <i class="fa fa-search"></i>
             <span class="caret"></span>
           </button>
           <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
               <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>
+                <div class="universal-th-text {{title-class}}">{{title}}</div>
       </th>
     </tr>
   </thead>
@@ -79,33 +119,15 @@
       <td>{{text}}</td>
     </tr>
   </tbody>
-  </table>
+</table>
-  </form>
+<div>{{total_entries}}</div>
-  <div>{{total_entries}}</div>
+<div>{{export_button}}</div>
-  <div>{{export_button}}</div>
+{{pagination_goes_here}}
-  {{pagination_goes_here}}
+<script>
-<script type="text/javascript">
+
-  $('.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).on('click', '.universal-table-index .dropdown-menu', function (e) {
-    e.stopPropagation();
-  });
 </script>
 <style>
-  .universal-table-index.dtr-inline.collapsed td.dtr-control{
+.universal-table-index.dtr-inline.collapsed td.dtr-control{
   vertical-align: middle;
-  }
+}
 </style>

modules/universal_table/index2.html.erb

@@ -1,4 +1,21 @@
-  <style>
+<style>
+
+  .universal-dropdown{
+    float:left;
+  }
+  .col-ken{
+        min-width: 4em;
+    &:first-child{
+      min-width: unset!important;
+    }
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -7,11 +24,9 @@
     padding: 8px 0 0 0;
     display: inline;
     margin-right: 5px;
-      color: #fff;
   }
   .universal-dropdown {
     display: inline-block;
-      color: gray;
   }
   a.universal-btn {
     vertical-align: baseline;
@@ -34,17 +49,11 @@
     left: auto;
     right: 0;
   }
-    .universal-table-index tbody {
-       counter-reset: item;
-    }
-    .universal-table-index thead > tr > th:first-child {
-       width: 4em;
-    }
   .universal-th-icon {
     border: 1px solid #eee;
     padding: 5px 8px;
     margin-right: 5px;
-      color: #fff;
+    color: gray;
     cursor: pointer;
   }
   .universal-th-text.no-sort.no-search {
@@ -54,30 +63,32 @@
   .image-preview {
     width: 120px;
   }
-  </style>
+</style>
-  <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index2">
-  <table class="table table-hover table-striped universal-table-index">
   <caption>
     <h3>{{table-name}}</h3>
     <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
   </caption>
   <thead>
     <tr data-list="head-columns" data-level="0">
-        <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
-          <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
           <button class="btn btn-sm" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <i class="fa fa-search"></i>
             <span class="caret"></span>
           </button>
           <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
               <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>
+                <div class="universal-th-text {{title-class}}">{{title}}</div>
       </th>
     </tr>
   </thead>
@@ -86,14 +97,15 @@
       <td>{{text}}</td>
     </tr>
   </tbody>
-  </table>
+</table>
-  </form>
+<div>{{total_entries}}</div>
-  <div>{{total_entries}}</div>
+<div>{{export_button}}</div>
-  <div>{{export_button}}</div>
+{{pagination_goes_here}}
-  {{pagination_goes_here}}
+<script>
 
-  <script type="text/javascript">
+</script>
-    $(document).on('click', '.universal-table-index .dropdown-menu', function (e) {
+<style>
-      e.stopPropagation();
+.universal-table-index.dtr-inline.collapsed td.dtr-control{
-    });
+  vertical-align: middle;
-  </script>
+}
+</style>

modules/universal_table/index3.html.erb

@@ -1,4 +1,24 @@
-  <style>
+<style>
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
   .universal-dropdown-menu {
     padding: 15px 18px;
     white-space: nowrap;
@@ -7,7 +27,6 @@
     padding: 8px 0 0 0;
     display: inline;
     margin-right: 5px;
-      color: #888;
   }
   .universal-dropdown {
     display: inline-block;
@@ -33,9 +52,9 @@
     left: auto;
     right: 0;
   }
-    .universal-table-index tbody {
+  /* .universal-table-index tbody {
      counter-reset: item;
-    }
+  } */
   .universal-th-icon {
     border: 1px solid #eee;
     padding: 5px 8px;
@@ -50,9 +69,9 @@
   .image-preview {
     width: 120px;
   }
-  </style>
+</style>
-  <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
-  <table class="table table-hover table-striped universal-table-index">
+<table class="table table-hover table-striped universal-table-index universal-table-index3">
   <div class="searchbtn">
     <div class="ken-click">
       <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
@@ -85,7 +104,7 @@
   </caption>
   <thead class="theadsearch">
     <tr data-list="head-columns" data-level="0">
-        <th class="col-md-3">
+      <th class="col-ken">
         <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
         <div class="universal-th-text {{title-class}}">{{title}}</div>
         <div class="dropdown universal-dropdown {{search}}">
@@ -111,8 +130,24 @@
       <td>{{text}}</td>
     </tr>
   </tbody>
-  </table>
+</table>
-  </form>
+</form>
-  <div>{{total_entries}}</div>
+<div>{{total_entries}}</div>
-  <div>{{export_button}}</div>
+<div>{{export_button}}</div>
-  {{pagination_goes_here}}
+{{pagination_goes_here}}
+<script>
+// $(document).ready(function(){
+//   $("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>

modules/universal_table/index4.html.erb

@@ -0,0 +1,147 @@
+<style>
+  .universal-table-index4{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline " action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index4">
+  <div class="searchbtn">
+    <div class="ken-click">
+      <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>查詢</div>
+      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+    </div>
+  </div>
+  <div class="searchbox">
+  <div class="theadsearch2">
+    <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+      <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <div class="form-group">
+              {{form-field}}
+              <input type="hidden" value="{{key}}" name="column" >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-1 col-xs-12 submit-btn-wrap">
+      <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
+    </div>
+  </div>
+  </div>
+  <caption>
+    <h3>{{table-name}}</h3>
+  </caption>
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}"><i class="universal-th-icon fa fa-{{sort-class}}"></i></a>
+        <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <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>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+// $(document).ready(function(){
+//   $("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>

modules/universal_table/index5.html.erb

@@ -0,0 +1,214 @@
+<style>
+.combined-search-inner{
+   border: 1px solid #d5d5d5;
+    background: #f6f6f6;
+    padding: 0.5em;
+    border-radius: 0.5em;
+}
+.input-group2{
+    display: flex;
+    justify-content: space-between;
+}
+.more-btn {
+    background-color: #c93a42;
+    color: #fff;
+    font-size: 1rem;
+    border-radius: 5px;
+    &:hover{
+      color:#fff!important;
+    }
+}
+#combined-search{
+    max-width:250px;
+    flex: 0 0 75%;
+    width: auto;
+    display: block;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+  tr>th:first-child{
+    display: none!important;
+  }
+  tr>td:first-child{
+    display: none!important;
+  }
+  .universal-table-index3{
+    table-layout: auto!important;
+  }
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text{
+    white-space: pre!important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: normal;
+}
+  .universal-dropdown-menu {
+    padding: 15px 18px;
+    white-space: nowrap;
+  }
+  .universal-th-text  {
+    padding: 8px 0 0 0;
+    display: inline;
+    margin-right: 5px;
+  }
+  .universal-dropdown {
+    display: inline-block;
+  }
+  a.universal-btn {
+    vertical-align: baseline;
+    color: #fff;
+  }
+  .universal-table-index {
+    border-collapse: collapse;
+    border: 1px solid #eee;
+    table-layout: fixed;
+    word-wrap: break-word;
+  }
+  .universal-table-index h3 {
+    float: left;
+    margin-left: 0;
+  }
+  .universal-table-index.table td{
+    padding: 15px 18px;
+  }
+  .universal-table-index thead th:last-child .dropdown-menu {
+    left: auto;
+    right: 0;
+  }
+  /* .universal-table-index tbody {
+     counter-reset: item;
+  } */
+  .universal-th-icon {
+    border: 1px solid #eee;
+    padding: 5px 8px;
+    margin-right: 5px;
+    color: gray;
+    cursor: pointer;
+  }
+  .universal-th-text.no-sort.no-search {
+    position: relative;
+    top: -6px;
+  }
+  .image-preview {
+    width: 120px;
+  }
+</style>
+<form class="form-inline universal-form-inline universal-form-inline5 universal-index5" action="{{url}}" method="get">
+<table class="table table-hover table-striped universal-table-index universal-table-index3">
+
+
+  <caption>
+    <h3>{{table-name}}</h3>
+  <div class="row col-md-12 col-xs-12 combined-search-row">
+      <div class="col-md-12 combined-search-inner">
+        <label for="combined-search" class="sr-only">整合搜尋</label>
+        <div class="input-group2">
+          <input type="text" id="combined-search" class="form-control" placeholder="輸入欲揣的詞，揤送出" aria-label="搜揣" title="輸入欲揣的詞，揤送出">
+          <div class="input-group-btn2">
+            <button id="combined-search-btn" type="button" class="btn btn-warning2 more-btn">
+              送出<i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+          <div class="searchbtn">
+    <div class="ken-click">
+      <div class="searchbtn2 pull-right"><i class="fa-solid fa-magnifying-glass"></i>進階</div>
+      <a href="{{url}}" class="universal-btn btn btn-info pull-right {{reset}}"><i class="fa fa-refresh"></i> Reset</a>
+    </div>
+  </div>
+  <div class="searchbox">
+    <div class="theadsearch2">
+      <div class="row col-md-11 col-xs-12" data-list="searchable-columns" data-level="0">
+        <div class="{{col-class}}">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
+          <div class="dropdown universal-dropdown {{search}}">
+            <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+              <div class="form-group">
+                {{form-field}}
+                <input type="hidden" value="{{key}}" name="column" >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-1 col-xs-12 submit-btn-wrap">
+        <button class="btn btn-primary pull-right" type="submit" class="btn btn-default">Go</button>
+      </div>
+
+    </div>
+  </div>
+      </div>
+      
+  </div>
+  </caption>
+
+
+  <thead class="theadsearch">
+    <tr data-list="head-columns" data-level="0">
+      <th class="col-ken">
+        <a href="{{sort-url}}" class="{{sort}}" aria-label="重新排序{{title}}"><i class="universal-th-icon fa fa-{{sort-class}}" aria-hidden="true"></i></a><div class="universal-th-text {{title-class}}">{{title}}</div>
+          <div class="universal-th-text {{title-class}}">{{title}}</div>
+        <div class="dropdown universal-dropdown {{search}}">
+          <button class="btn btn-md" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-search"></i>
+            <span class="caret"></span>
+          </button>
+          <div class="dropdown-menu universal-dropdown-menu" aria-labelledby="dLabel">
+            <form class="form-inline universal-form-inline" action="{{url}}" method="get">
+              <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">送出<i class="fa fa-arrow-right" aria-hidden="true"></i></button>
+            </form>
+          </div>
+        </div>
+      </th>
+    </tr>
+  </thead>
+  <tbody data-level="0" data-list="rows">
+    <tr class="tdken" data-level="1" data-list="columns">
+      <td>{{text}}</td>
+    </tr>
+  </tbody>
+</table>
+</form>
+<div>{{total_entries}}</div>
+<div>{{export_button}}</div>
+{{pagination_goes_here}}
+<script>
+
+
+$(document).ready(function(){
+  $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
+  $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
+  $(".universal-th-text").append(" :");
+  # $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
+  $('.voice-player').each(function () {
+    // 取得 <i> 元素
+    const icon = $(this).find('i')[0];
+    if (icon) {
+        // 取得 <i> 前面的節點
+        const prevNode = icon.previousSibling;
+        // 如果是文字節點，則移除
+        if (prevNode && prevNode.nodeType === 3) {
+            prevNode.remove();
+        }
+    }
+});
+});
+
+
+</script>

modules/universal_table/info.json

@@ -12,19 +12,36 @@
             "filename" : "index2",
             "name" : {
                 "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
           },
           {
               "filename" : "index3",
               "name" : {
-                "zh_tw" : "3. 含序號表格列表 + 多欄位搜尋",
+                  "zh_tw" : "3. 單純表格列表 + 多欄位搜尋",
-                "en" : "3. Index Table with serial number + Multiple Field Search"
+                  "en" : "3. col Pure index table+ Multiple Field Search"
+                  },
+              "thumbnail" : "thumb.png"
+          },
+          {
+              "filename" : "index4",
+              "name" : {
+                  "zh_tw" : "4.含序號表格列表 + 多欄位搜尋",
+                  "en" : "4. col Index Table with serial number + Multiple Field Search"
                   },
               "thumbnail" : "thumb.png",
               "default": true
             },
+            {
+                "filename" : "index5",
+                "name" : {
+                    "zh_tw" : "5. 卡片單純表格列表 + 多欄位搜尋",
+                    "en" : "5. card-col Pure index table+ Multiple Field Search"
+                    },
+                "thumbnail" : "thumb.png"
+            },
             {
                 "filename" : "mindmap",
                 "name" : {
@@ -33,5 +50,15 @@
                     },
                 "thumbnail" : "thumb.png"
             }
+    ],
+    "widgets" : [
+        {
+            "filename" : "tag_cloud",
+            "name" : {
+                "zh_tw" : "0. Tag Cloud",
+                "en" : "0. Tag Cloud"
+                },
+            "thumbnail" : "_tag_cloud_thumb.png"
+        }
     ]
 }

modules/universal_table/mindmap.html.erb

@@ -1,10 +1,25 @@
 <style>
+.fa-diagram-project{
+    box-shadow: 0 0 0 2px white, 0 0 0 4px #0f5293;
+    background: #f0f0f0;
+    border: 2px solid #145494;
+    color: #145494;
+    padding: 0.5em;
+    border-radius: 3em;
+    position: absolute;
+    right: 2em;
+}
+.midmap-universal-table-index{
+  border:0!important;
+}
+
   tr>th:first-child{
     display: none!important;
   }
   /* tr>td:first-child{
     display: none!important;
   } */
+
   .universal-table-index3{
     table-layout: auto!important;
   }
@@ -70,8 +85,8 @@
     width: 120px;
   }
 </style>
-<form class="form-inline universal-form-inline universal-form-inline5" action="{{url}}" method="get">
+<form class="form-inline universal-form-inline midmap" action="{{url}}" method="get">
-<table class="table table-hover table-striped universal-table-index universal-table-index3">
+<table class="table table-hover table-striped universal-table-index midmap-universal-table-index">
   <caption>
     <h3>{{table-name}}</h3>
   </caption>
@@ -88,7 +103,7 @@ $(document).ready(function(){
   $('.tdken>td:nth-child(4)').prepend($('.col-ken:nth-child(4)>.universal-th-text '));
   $('.tdken>td:nth-child(3)').prepend($('.col-ken:nth-child(3)>.universal-th-text '));
   $(".universal-th-text").append(" :");
-  $(".tdken").append('<i class="fa-solid fa-thumbtack"></i>');
+  $(".tdken td").append('<i class="fa-solid fa-diagram-project"></i>');
 });
 // $(document).ready(function(){
 //   $("tr>th:first-child").removeClass("col-md-3");

modules/universal_table/show.html.erb

@@ -1,33 +1,96 @@
 <style>
   .universal-table-show {
-    border: 1px solid #eee;
+    border: 0;
     border-collapse: collapse;
+    tr{
+      display: flex;
+      flex-wrap: wrap;
+    }
   }
   .universal-table-show.table td{
-    padding: 15px 18px;
+    padding: 0;
+    border: 0;
   }
   .table-title {
-    border-right: 1px solid #eee;
+    border-right: 0;
+    font-size: 0.8em;
   }
 
+
 </style>
 <table class="table table-striped universal-table-show">
   <tbody data-level="0" data-list="entry">
     <tr>
-      <td class="col-md-2 table-title">{{title}}</td>
+      <td class="col-sm-12 table-title">{{title}}</td>
-      <td>{{text}}</td>
+      <td class="col-sm-12 table-txt">{{text}}</td>
     </tr>
   </tbody>
 </table>
-<div class="view_count pull-right">
+<div class="col-sm-12 table-title" style="background-color: #f8f8f8;
-  <i class="fa fa-eye">{{view_count_head}}:</i>
+    position: relative;
-  <span class="view-count">{{view_count}}</span>
+    width: 100%;
-</div>
+    color: #676767;
-
+    padding-top: 1.5em;">相關詞目</div>
-<div data-list="related_entries" data-level="0">
+<div data-list="related_entries" data-level="0" class="related_entries">
   <tbody data-level="1" data-list="related_entry">
     <tr>
       <td>{{text}}</td>
     </tr>
   </tbody>
 </div>
+<div class="view_count pull-right">
+  <i class="fa fa-eye">{{view_count_head}}:</i>
+  <span class="view-count">{{view_count}}</span>
+</div>
+<script>
+$(document).ready(function () {
+  const $tableShow = $('.universal-table-show');
+  if ($tableShow.length > 0) {
+    const firstText = $tableShow.find('tr:first .table-txt:first').text().trim();
+    if (firstText) {
+      const $li = $('<li>').text(firstText);
+      $('.breadcrumb').append($li);
+    }
+  }
+});
+$(document).ready(function () {
+  $('.related_entries').each(function () {
+    const $container = $(this);
+    const children = $container.contents();
+    let wrapper = null;
+
+    children.each(function () {
+      const $el = $(this);
+
+      if ($el.is('a') && !$el.hasClass('tag')) {
+        // 開始一個新的 wrapper
+        wrapper = $('<div class="column_entry_files_wrapper"></div>');
+        $container.append(wrapper); // 先加到底部
+        wrapper.append($el); // 把主詞條加進 wrapper
+      } else if ($el.is('ul.column_entry_files')) {
+        if (wrapper) wrapper.append($el);
+      } else if (this.nodeType === Node.TEXT_NODE && this.textContent.trim() !== '') {
+        if (wrapper) wrapper.append(this);
+      } else if ($el.is('a.tag')) {
+        if (wrapper) wrapper.append($el);
+      }
+    });
+
+    // 第二輪：移除每個 .column_entry_files_wrapper 前的 &nbsp; 空白節點
+    $container.find('.column_entry_files_wrapper').each(function () {
+      let prev = this.previousSibling;
+      while (prev && prev.nodeType === Node.TEXT_NODE) {
+        if (prev.textContent.trim() === '' || prev.textContent.includes('\u00a0')) {
+          let toRemove = prev;
+          prev = prev.previousSibling;
+          toRemove.parentNode.removeChild(toRemove);
+        } else {
+          break;
+        }
+      }
+    });
+  });
+});
+
+
+</script>