feat: use list instead of table on mobile, adjust fontsize (#11)

uier · Oct 19, 2023 · d997550 · d997550
1 parent 727dd89
commit d997550
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 19 deletions.
diff --git a/components/LatestTable.vue b/components/LatestTable.vue
@@ -45,7 +45,7 @@ function getConditionValue(condition: Price["condition"]) {
 </script>
 
 <template>
-  <table class="table">
+  <table class="hidden sm:table">
     <thead>
       <tr>
         <th
@@ -58,17 +58,15 @@ function getConditionValue(condition: Price["condition"]) {
       </tr>
     </thead>
     <tbody>
-      <tr v-for="item in data" :key="item.id">
+      <tr
+        v-for="item in data"
+        :key="item.id"
+        class="hover:bg-info hover:text-info-content cursor-pointer"
+        @click="$emit('update:modelValue', item.Game?.name)"
+      >
         <td>{{ getTradeTypeValue(item.trade_type) }}</td>
         <td>{{ item.Game?.platform }}</td>
-        <td>
-          <button
-            class="btn btn-ghost hover:btn-info btn-sm overflow-hidden px-1"
-            @click="$emit('update:modelValue', item.Game?.name)"
-          >
-            {{ item.Game?.name }}
-          </button>
-        </td>
+        <td>{{ item.Game?.name }}</td>
         <td>{{ item.price }}</td>
         <td>{{ getConditionValue(item.condition) }}</td>
         <td class="hidden sm:table-cell">
@@ -81,7 +79,7 @@ function getConditionValue(condition: Price["condition"]) {
         </td>
         <td>
           <NuxtLink :to="`https://www.ptt.cc/bbs/Gamesale/${item.ptt_article_id}.html`" target="_blank">
-            <button class="btn btn-circle btn-xs sm:btn-sm btn-ghost px-0">
+            <button class="btn btn-circle btn-xs sm:btn-sm btn-ghost px-0" @click.stop="">
               <Icon name="ion:md-open" class="h-4 w-4" />
             </button>
           </NuxtLink>
@@ -92,7 +90,47 @@ function getConditionValue(condition: Price["condition"]) {
       </tr>
     </tbody>
   </table>
-  <div class="flex items-center gap-2 pb-10">
+  <div class="sm:hidden flex flex-col gap-y-2 w-full">
+    <div
+      v-for="item in data"
+      :key="item.id"
+      class="flex flex-col gap-y-1 py-2 px-3 bg-base-200 rounded-lg cursor-pointer"
+      @click="$emit('update:modelValue', item.Game?.name)"
+    >
+      <div class="flex text-sm">
+        <span
+          :class="[
+            'badge rounded-md p-1 text-xs',
+            item.trade_type === TRADE_TYPES.SELL ? 'badge-success' : 'badge-primary',
+          ]"
+          >{{ getTradeTypeValue(item.trade_type) }}</span
+        >
+        <span class="mx-2">{{ item.Game?.name }}</span>
+        <div class="flex-1" />
+        <span>${{ item.price }}</span>
+      </div>
+      <div class="flex text-xs items-center text-opacity-60">
+        <span>{{ item.Game?.platform }}</span>
+        <div class="divider divider-horizontal mx-1"></div>
+        <span>{{ getConditionValue(item.condition) }}</span>
+        <div class="divider divider-horizontal mx-1"></div>
+        <div class="tooltip tooltip-right" :data-tip="dayjs(item.posted_at).format('YYYY-MM-DD HH:mm:ss')">
+          {{
+            //@ts-ignore
+            dayjs(item.posted_at).fromNow()
+          }}
+        </div>
+        <div class="flex-1" />
+        <NuxtLink :to="`https://www.ptt.cc/bbs/Gamesale/${item.ptt_article_id}.html`" target="_blank">
+          <button class="btn btn-circle btn-xs sm:btn-sm btn-ghost px-0" @click.stop="">
+            <Icon name="ion:md-open" class="h-4 w-4" />
+          </button>
+        </NuxtLink>
+      </div>
+    </div>
+    <div v-if="data.length === 0" class="flex justify-center items-center p-4">查無結果</div>
+  </div>
+  <div class="flex items-center gap-2 pb-10 mt-3">
     <div class="join">
       <button class="join-item btn" @click="emit('update-page', 1)">«</button>
       <button class="join-item btn" @click="emit('update-page', Math.max(1, page - 1))">‹</button>

diff --git a/components/PriceFilter.vue b/components/PriceFilter.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 const emits = defineEmits(["update:modelValue"]);
 
 const search = ref("");
-const shortcuts = ["薩爾達傳說 王國之淚", "瑪利歐賽車8 豪華版", "斯普拉遁3"];
+const shortcuts = ["薩爾達傳說 王國之淚", "瑪利歐賽車8 豪華版"];
 
 function updateFilterBySearch() {
   const text = search.value.trim();

diff --git a/pages/about/index.vue b/pages/about/index.vue
@@ -1,26 +1,26 @@
 <template>
-  <div>
-    <h1 class="text-3xl font-bold">About</h1>
-    <h1 class="text-xl mt-10 font-bold">這個網站是做什麼的？</h1>
+  <div class="pb-10">
+    <h1 class="text-xl sm:text-3xl font-bold">About</h1>
+    <h1 class="text-lg sm:text-xl mt-10 font-bold">這個網站是做什麼的？</h1>
     <p>
       這是一個每三小時爬取
       <NuxtLink class="link" to="https://www.ptt.cc/bbs/Gamesale/index.html" target="_blank"
         >PTT Gamesale 板</NuxtLink
       >
       的網站，並從貼文中抽取網友欲販售或徵求的遊戲資料，整理成可搜尋篩選的表格呈現，並且在選取特定的一款遊戲時以視覺化繪出價格趨勢。
     </p>
-    <h1 class="text-xl mt-10 font-bold">從文章中抽取遊戲資料的方法？</h1>
+    <h1 class="text-lg sm:text-xl mt-10 font-bold">從文章中抽取遊戲資料的方法？</h1>
     <p>
       過去有其他人做過類似的網站，但文章的格式較自由，他們表示僅能從一篇文章中抽取一款遊戲資料。在這個網站中，我使用了
       OpenAI GPT-3.5 Turbo API 來抽取遊戲資料（每個月成本約 $2
       美金），能夠從一篇文章中抽取多款遊戲資料（名稱、二手或全新、價格），再使用 Fuzzy Search
       從我整理的遊戲資料庫中找出最接近的一款遊戲來標準化名稱。
     </p>
-    <h1 class="text-xl mt-10 font-bold">未來展望</h1>
+    <h1 class="text-lg sm:text-xl mt-10 font-bold">未來展望</h1>
     <p>
       此網站目前是一個最小可行性產品，有許多可以改進之空間，如：完善遊戲資料庫讓精準度再進一步上升、訂閱特定遊戲的到價通知等等。
     </p>
-    <h1 class="text-xl mt-10 font-bold">關於作者</h1>
+    <h1 class="text-lg sm:text-xl mt-10 font-bold">關於作者</h1>
     <p>
       GitHub:
       <NuxtLink class="link" to="https://github.com/uier" target="_blank">https://github.com/uier</NuxtLink