調整 page 參數

builder/lists/index.html

@@ -183,7 +183,7 @@
               <input type="text" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="page = 1; dataSearch();" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
             </div>

cases/lists/index.html

@@ -183,7 +183,7 @@
               <input type="text" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="page = 1; dataSearch();" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
 
@@ -229,7 +229,7 @@
     <div class="row w-100 mt-5 filter-list">
       <div class="col-12">
         <p class="mb-3 text-muted">
-          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆室內裝潢設計符合條件
+          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4"></span> 筆室內裝潢設計符合條件
         </p>
 
         <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
@@ -726,14 +726,14 @@
         </div>
 
         <!-- 讀取圖示 -->
-        <div class="text-center my-5" id="designerSpinner">
+        <div class="text-center my-5" id="dataSpinner">
           <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
           </div>
         </div>
 
         <!-- 設計師列表 -->
-        <div class="row mt-5" id="designerList">
+        <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>
 

cases/lists/js/main.js

@@ -22,8 +22,8 @@ let isFirstLoad = true; // 初始載入
 // 列表篩選
 async function dataSearch() {
   let url;
-  $('#designerSpinner').show();
-  $('#designerList').hide();
+  $('#dataSpinner').show();
+  $('#dataList').hide();
 
   if (isFirstLoad) {
     // 第一次載入使用本地 JSON 文件
@@ -185,11 +185,11 @@ async function dataSearch() {
       resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
     }
 
-    $('#designerList').html(resultHtml);
+    $('#dataList').html(resultHtml);
 
     setTimeout(() => {
-      $('#designerList').show();
-      $('#designerSpinner').hide();
+      $('#dataList').show();
+      $('#dataSpinner').hide();
     }, 100)
 
     // 更新初始載入狀態

css/lists.css

@@ -103,6 +103,10 @@
 .filter-list .lists-card {
   height: 100%;
 }
+.filter-list .lists-card:hover .title,
+.filter-list .lists-card:hover .video-title {
+  opacity: 0.7;
+}
 .filter-list .lists-card .person-img {
   width: 100%;
   height: 80px;
@@ -194,6 +198,7 @@
   font-weight: bold;
   color: #43484C;
   -webkit-line-clamp: 2;
+  transition: all 0.3s;
 }
 .filter-list .lists-card .card-body .tags-container span {
   display: inline-block;
@@ -208,8 +213,13 @@
 .filter-list .lists-card .card-body .tags-container span:hover {
   opacity: 0.7;
 }
+.filter-list .lists-card .card-body .tags-container.columns-tag {
+  height: 30px;
+  overflow: hidden;
+}
 .filter-list .lists-card .card-body .title {
   font-weight: 500;
+  transition: all 0.3s;
 }
 
 #builderList .card h5 {
@@ -257,4 +267,8 @@
 .autocomplete-active {
   background-color: DodgerBlue !important;
   color: #ffffff;
+}
+
+#columnLoading {
+  display: none;
 }/*# sourceMappingURL=lists.css.map */

css/lists.scss

@@ -126,6 +126,14 @@
   .lists-card {
     height: 100%;
 
+    &:hover {
+
+      .title,
+      .video-title {
+        opacity: .7;
+      }
+    }
+
     .person-img {
       width: 100%;
       height: 80px;
@@ -186,6 +194,7 @@
     }
 
     .card-body {
+
       h5,
       h6,
       p,
@@ -215,6 +224,7 @@
         font-weight: bold;
         color: #43484C;
         -webkit-line-clamp: 2;
+        transition: all .3s;
       }
 
       .tags-container {
@@ -232,10 +242,16 @@
             opacity: .7;
           }
         }
+
+        &.columns-tag {
+          height: 30px;
+          overflow: hidden;
+        }
       }
 
       .title {
         font-weight: 500;
+        transition: all .3s;
       }
     }
   }
@@ -296,4 +312,8 @@
 .autocomplete-active {
   background-color: DodgerBlue !important;
   color: #ffffff;
+}
+
+#columnLoading {
+  display: none;
 }

designers/lists/index.html

@@ -183,7 +183,7 @@
               <input type="text" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="page = 1; dataSearch();" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
 
@@ -229,7 +229,7 @@
     <div class="row w-100 mt-5 filter-list">
       <div class="col-12">
         <p class="mb-3 text-muted">
-          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4">254</span> 筆全國室內設計師符合條件
+          總共 <span id="totalCount" class="text-primary font-weight-bold fs-4"></span> 筆全國室內設計師符合條件
         </p>
 
         <div class="card text-dark bg-light border-0 mb-3 w-100 shadow-sm">
@@ -933,14 +933,14 @@
         </div>
 
         <!-- 讀取圖示 -->
-        <div class="text-center my-5" id="designerSpinner">
+        <div class="text-center my-5" id="dataSpinner">
           <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
           </div>
         </div>
 
         <!-- 設計師列表 -->
-        <div class="row mt-5" id="designerList">
+        <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>
 

designers/lists/js/main.js

@@ -22,8 +22,8 @@ let isFirstLoad = true; // 初始載入
 // 列表篩選
 async function dataSearch(type = "") {
   let url;
-  $('#designerSpinner').show();
-  $('#designerList').hide();
+  $('#dataSpinner').show();
+  $('#dataList').hide();
 
   if (isFirstLoad) {
     // 第一次載入使用本地 JSON 文件
@@ -155,11 +155,11 @@ async function dataSearch(type = "") {
       resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
     }
 
-    $('#designerList').html(resultHtml);
+    $('#dataList').html(resultHtml);
 
     setTimeout(() => {
-      $('#designerList').show();
-      $('#designerSpinner').hide();
+      $('#dataList').show();
+      $('#dataSpinner').hide();
     }, 100)
 
     // 更新初始載入狀態

js/lists.js

@@ -65,6 +65,7 @@ function updateSelectedOptions(id, button, radio) {
     }
   }
 
+  page = 1;
   dataSearch(); // 搜尋
 
   console.log('filterList', filterList);
@@ -110,6 +111,7 @@ function removeBtn(element, id, val) {
 // 鍵盤 Enter 輸入
 $('.keywords').on('keydown', function (event) {
   if (event.key === 'Enter') {
+    page = 1;
     dataSearch();
   }
 });
@@ -238,6 +240,7 @@ function handlePagination(item, type = "") {
 $(".search-bar-keyword a").click(function () {
   let keyword = $(this).text();
   $('.keywords').val(keyword);
+  page = 1;
   dataSearch();
 });
 
@@ -480,7 +483,7 @@ function push_GA_dtype_select(key) {
   console.log('push_GA_dtype_select', key);
   let eventLabel = '';
 
- switch (key) {
+  switch (key) {
     case '小坪數':
       eventLabel = 'small';
       break;
@@ -530,7 +533,7 @@ function push_GA_city_select(key) {
   console.log('push_GA_city_select', key);
   let eventLabel = '';
 
- switch (key) {
+  switch (key) {
     case '台北市':
       eventLabel = 'Taipei';
       break;

videos/lists/index.html

@@ -181,7 +181,7 @@
               <input type="text" id="keywordInput" placeholder="請輸入關鍵字" aria-label="請輸入關鍵字" aria-describedby="searchbar"
                 class="form-control border-primary keywords" autocomplete="off">
               <div class="input-group-append">
-                <button onclick="dataSearch()" type="button" data-ga="View_Search_Results"
+                <button onclick="page = 1; dataSearch();" type="button" data-ga="View_Search_Results"
                   class="input-group-text">搜尋</button>
               </div>
               
@@ -591,7 +591,7 @@
         </div>
 
         <!-- 設計師列表 -->
-        <div class="row mt-5" id="videoList">
+        <div class="row mt-5" id="dataList">
           <!-- 動態載入 -->
         </div>
 

videos/lists/js/main.js

@@ -23,7 +23,7 @@ let isFirstLoad = true; // 初始載入
 async function dataSearch(type = "") {
   let url;
   $('#videoSpinner').show();
-  $('#videoList').hide();
+  $('#dataList').hide();
 
   if (isFirstLoad) {
     // 第一次載入使用本地 JSON 文件
@@ -134,10 +134,10 @@ async function dataSearch(type = "") {
       resultHtml += "<p class='text-center mt-5'>找不到符合的資料，請重新搜尋。</p>"
     }
 
-    $('#videoList').html(resultHtml);
+    $('#dataList').html(resultHtml);
 
     setTimeout(() => {
-      $('#videoList').show();
+      $('#dataList').show();
       $('#videoSpinner').hide();
     }, 100)