💄Listing page header UI revamp (#1966)

* 🔥 Remove breadcrumb * ✨Add arrows for tags navigation * ✨ Add random search placeholder * 🎨Add click filter handling for desktop version * 📱 Handle tags scroll bar for phone version * 🎨 Add tags to modify sorting display * 🎨 Add en search placeholder * 🎨 Update search suggestions * 💄 Fix filter dialog position for desktop * 🍱 Fix arrow right icon style * 🎨 Clean up tags container code * 🐛 Fix undefined OG title * 🐛 Fix latest book sorting * 💄 Add active tag title in header * 🐛 Fix gradient not displaying on mobile version * 💄 Adjust search border radius * 🚸 Enable drag-to-scroll for tags list * 🚸 Auto-apply first random keyword on empty search * 🚸 Improve scrolling behavior * 🚸 Auto-scroll to active tag --------- Co-authored-by: Ng Wing Tat, David <[email protected]>
likecoin · Dec 11, 2024 · 47f5c0c · 47f5c0c
1 parent e92643f
commit 47f5c0c
Show file tree

Hide file tree

Showing 8 changed files with 378 additions and 188 deletions.
diff --git a/src/components/Icon/ArrowRight.vue b/src/components/Icon/ArrowRight.vue
@@ -1,24 +1,14 @@
 <template>
   <svg
-    width="16"
-    height="16"
     viewBox="0 0 16 16"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_872_423)">
-      <path
-        d="M6 4L10 8L6 12"
-        stroke="currentColor"
-        stroke-width="1.33333"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_872_423">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.4 12.7999C5.95814 12.4686 5.86864 11.8418 6.2 11.3999L8.75 7.99994L6.2 4.5999C5.86864 4.1581 5.95814 3.5313 6.4 3.1999C6.84183 2.8686 7.46863 2.9581 7.8 3.3999L10.8 7.39994C11.0667 7.7555 11.0667 8.24439 10.8 8.59994L7.8 12.5999C7.46863 13.0418 6.84183 13.1313 6.4 12.7999Z"
+      fill="currentColor"
+    />
   </svg>
 </template>
diff --git a/src/components/ListingPage/Dialog.vue b/src/components/ListingPage/Dialog.vue
@@ -7,7 +7,7 @@
     panel-container-class="max-w-[500px] p-[0] sm:px-[12px] sm:py-[24px]"
     panel-component="CardV2"
     :scrollable-wrapper-classes="[
-      '!items-end',
+      'phone:items-end',
       'phone:pb-[12px]',
       'phone:px-[12px]',
       'phoneLg:pb-[0px]',

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
@@ -5,7 +5,13 @@
       preset="tertiary"
       @click="toggleSearch"
     >
-      <IconSearch />
+      <div class="flex flex-nowrap items-center gap-[8px]">
+        <IconSearch />
+        <p
+          class="text-medium-gray whitespace-nowrap"
+          v-text="$t('listing_page_search_label')"
+        />
+      </div>
     </ButtonV2>
     <div
       class="flex items-center justify-center cursor-pointer p-[8px] desktop:hidden"
@@ -34,19 +40,21 @@
         'gap-[12px]',
         isSearchOpen && 'pl-[16px] pr-[4px]',
         'h-full',
-        'rounded-[10px]',
+        'rounded-[0px] desktop:rounded-[10px]',
         'transition-[width]',
         'duration-[5000]',
         'ease-in-out',
       ]"
     >
       <IconSearch />
       <input
-        :value="searchQuery"
+        ref="searchInput"
         class="w-full bg-transparent border-0 focus-visible:outline-none"
         type="text"
-        :placeholder="$t('gutenberg_search_placeholder')"
+        :value="searchQuery"
+        :placeholder="placeholderText"
         @input="debouncedUpdateSearchKeyword"
+        @keyup.enter="handleEnter"
       />
       <ButtonV2
         v-if="isSearchOpen"
@@ -63,6 +71,7 @@
 
 <script>
 import debounce from 'lodash.debounce';
+import { SEARCH_SUGGESTIONS } from '@/constant/index';
 
 export default {
   name: 'SearchBar',
@@ -75,6 +84,8 @@ export default {
   data() {
     return {
       isSearchOpen: false,
+      placeholderText: this.$t('gutenberg_search_placeholder'),
+      randomKeywords: [],
     };
   },
   mounted() {
@@ -88,6 +99,10 @@ export default {
         this.$emit('clear');
       } else {
         this.$emit('open');
+        this.placeholderText = this.getRandomPlaceholder();
+        this.$nextTick(() => {
+          this.$refs.searchInput?.focus();
+        });
       }
       this.isSearchOpen = !this.isSearchOpen;
     },
@@ -97,6 +112,24 @@ export default {
       },
       200
     ),
+    getRandomPlaceholder() {
+      if (this.$i18n.locale === 'zh-Hant') {
+        const shuffled = [...SEARCH_SUGGESTIONS].sort(
+          () => Math.random() - 0.5
+        );
+        const randomTerms = shuffled.slice(0, 3);
+        this.randomKeywords = randomTerms;
+        return randomTerms.join('、');
+      }
+      return this.$t('gutenberg_search_placeholder');
+    },
+    handleEnter() {
+      if (!this.searchQuery || this.searchQuery.trim() === '') {
+        const fallbackKeyword =
+          this.randomKeywords?.[0] || this.$t('gutenberg_search_placeholder');
+        this.$emit('input', fallbackKeyword);
+      }
+    },
   },
 };
 </script>
diff --git a/src/constant/index.js b/src/constant/index.js
@@ -432,3 +432,23 @@ export const SIGN_AUTHORIZATION_PERMISSIONS = [
   'read:nftcollection',
   'write:nftcollection',
 ];
+
+export const SEARCH_SUGGESTIONS = [
+  '小說',
+  '旅遊',
+  '報刊',
+  '心靈',
+  '運動',
+  '董啟章',
+  '李立峯',
+  '新聞',
+  '理財',
+  '區塊鏈',
+  '繪本',
+  '高重建',
+  '突破',
+  '哲學',
+  '法庭',
+  '信仰',
+  '邵家臻',
+];
diff --git a/src/constant/store.js b/src/constant/store.js
@@ -1,5 +1,6 @@
 export const SORTING_OPTIONS = {
   RECOMMEND: 'recommend',
+  DEFAULT: 'default',
   LATEST: 'latest',
   LOWER_PRICE: 'lower_price',
   HIGHER_PRICE: 'higher_price',

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -467,6 +467,7 @@
   "listing_page_header_homePage": "Home",
   "listing_page_header_listingPage": "Bookstore",
   "listing_page_header_sort": "Sort: {sort}",
+  "listing_page_header_sort_default": "Default",
   "listing_page_header_sort_higher_price": "Price: High to Low",
   "listing_page_header_sort_latest": "Latest",
   "listing_page_header_sort_lower_price": "Price: Low to High",
@@ -477,6 +478,7 @@
   "listing_page_QA_label": "What is the difference between ebooks and paperbacks?",
   "listing_page_QA_title": "FAQ",
   "listing_page_search": "Search",
+  "listing_page_search_label": "Book title or Author",
   "listing_page_search_not_found": "Please try different keywords.",
   "listing_page_search_recommend": "Or explore our recommended books:",
   "listing_page_search_result": "The search results for '{query}':",
@@ -1014,7 +1016,7 @@
   "stepper": "Step {step} / {totalStep}",
   "store_articles_button": "Browse Articles",
   "store_books_page_description": "Merge technology and humanity. Drive blockchain publishing to preserve and distribute great stories. Liker Land bridges the new world and old, reshaping reading and media culture.",
-  "store_index_page_title": "All Books - Ebook Store x Digital Publishing - Liker Land",
+  "store_index_page_title": "{name} Items - Ebook Store x Digital Publishing - Liker Land",
   "store_nft_book_more_button": "More Books",
   "substack_button_loading": "Loading...",
   "substack_button_submit": "Subscribe Newsletter",
@@ -1025,6 +1027,8 @@
     "View the weekly, daily statistics of your LikeCoin bonus, down to each workpiece.",
     "Stake your LikeCoin to gain extra reward, and participate in community governance."
   ],
+  "tag_all_featured": "Featured",
+  "tag_all_latest": "Latest Arrivals",
   "tag_all_title": "All",
   "tooltip_coming_soon": "Coming Soon",
   "tooltip_no_nft": "No owned NFTs to transfer",

diff --git a/src/locales/zh-Hant.json b/src/locales/zh-Hant.json
@@ -467,8 +467,9 @@
   "listing_page_header_homePage": "主頁",
   "listing_page_header_listingPage": "書店",
   "listing_page_header_sort": "排序：{sort}",
+  "listing_page_header_sort_default": "預設",
   "listing_page_header_sort_higher_price": "價錢高至低",
-  "listing_page_header_sort_latest": "最新上架",
+  "listing_page_header_sort_latest": "上架日期",
   "listing_page_header_sort_lower_price": "價錢低至高",
   "listing_page_header_sort_recommend": "推薦",
   "listing_page_header_total_books": "共 {num} 本書",
@@ -477,6 +478,7 @@
   "listing_page_QA_label": "電子書和紙本書有什麼分別?",
   "listing_page_QA_title": "常見問題",
   "listing_page_search": "搜尋",
+  "listing_page_search_label": "搜尋書名或作者",
   "listing_page_search_not_found": "請嘗試使用其他關鍵字。",
   "listing_page_search_recommend": "或是您可以瀏覽我們的推薦書籍：",
   "listing_page_search_result": "以下為 “{query}” 的搜尋結果：",
@@ -1014,7 +1016,7 @@
   "stepper": "步驟 {step} / {totalStep}",
   "store_articles_button": "瀏覽文章",
   "store_books_page_description": "融合科技與人文。推動區塊鏈出版，讓好故事繼續流傳。Liker Land 連接新世界和舊產業，重塑閱讀和傳播文化。",
-  "store_index_page_title": "所有書目 - 電子書店 x 數位出版 - Liker Land",
+  "store_index_page_title": "{name}書目 - 電子書店 x 數位出版 - Liker Land",
   "store_nft_book_more_button": "更多書目",
   "substack_button_loading": "請稍候...",
   "substack_button_submit": "訂閱電子報",
@@ -1025,6 +1027,8 @@
     "每週、每天、每篇文章所獲賺賞，一目了然",
     "委託 LikeCoin 獲得額外回報，同時參與社群決策"
   ],
+  "tag_all_featured": "精選",
+  "tag_all_latest": "最新上架",
   "tag_all_title": "全部",
   "tooltip_coming_soon": "快將推出",
   "tooltip_no_nft": "沒有可發送的 NFT",