From e753e3fba8205c53da52bec6ce3802b9e0bc1dcc Mon Sep 17 00:00:00 2001
From: Guanran Wang <guanran928@outlook.com>
Date: Sat, 26 Oct 2024 19:49:33 +0800
Subject: [PATCH] feat(ui): use grid instead of table for responsive design

---
 ui/index.html    | 69 ++++++++++++++++++++++--------------------------
 ui/src/style.css |  6 -----
 2 files changed, 32 insertions(+), 43 deletions(-)
diff --git a/ui/index.html b/ui/index.html
index 24ac593..607b65e 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -28,47 +28,42 @@
   <body
     class="text-violet-950 bg-violet-100 dark:text-slate-100 dark:bg-slate-900 font-mono font-medium text-sm md:text-base"
   >
-    <div
-      class="flex flex-col min-h-screen justify-center items-center overflow-x-auto"
-    >
+    <div class="flex flex-col min-h-screen justify-center items-center">
       <p class="py-2">Ny4 IP checker!</p>
-      <table class="table-auto border-collapse">
-        <thead>
-          <tr>
-            <th class="table-cell">source</th>
-            <th class="table-cell">ip</th>
-            <th class="table-cell">location</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td class="table-cell">ip.ny4.dev</td>
-            <td class="table-cell" id="check-ny4-ip">Loading...</td>
-            <td class="table-cell" id="check-ny4-location">Loading...</td>
-          </tr>
-          <tr>
-            <td class="table-cell">ip.sb</td>
-            <td class="table-cell" id="check-ipsb-ip">Loading...</td>
-            <td class="table-cell" id="check-ipsb-location">Loading...</td>
-          </tr>
-          <tr>
-            <td class="table-cell">ipapi.is</td>
-            <td class="table-cell" id="check-ipapiis-ip">Loading...</td>
-            <td class="table-cell" id="check-ipapiis-location">Loading...</td>
-          </tr>
-          <tr>
-            <td class="table-cell">ip-api.com</td>
-            <td class="table-cell" id="check-speedtestcn-ip">Loading...</td>
-            <td class="table-cell" id="check-speedtestcn-location">
-              Loading...
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <div>
+        <div
+          class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
+        >
+          <div>ip.ny4.dev</div>
+          <div id="check-ny4-ip">Loading...</div>
+          <div id="check-ny4-location" class="col-span-2">Loading...</div>
+        </div>
+        <div
+          class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
+        >
+          <div>ip.sb</div>
+          <div id="check-ipsb-ip">Loading...</div>
+          <div id="check-ipsb-location" class="col-span-2">Loading...</div>
+        </div>
+        <div
+          class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
+        >
+          <div>ipapi.is</div>
+          <div id="check-ipapiis-ip">Loading...</div>
+          <div id="check-ipapiis-location" class="col-span-2">Loading...</div>
+        </div>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
+          <div>ip-api.com</div>
+          <div id="check-speedtestcn-ip">Loading...</div>
+          <div id="check-speedtestcn-location" class="col-span-2">
+            Loading...
+          </div>
+        </div>
+      </div>
     </div>
 
     <footer
-      class="absolute inset-x-0 bottom-0 py-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm"
+      class="fixed inset-x-0 bottom-0 p-2 text-center text-slate-600 dark:text-slate-400 text-xs md:text-sm"
     >
       (c) 2024 Guanran Wang, source code licenced under MIT.
 
diff --git a/ui/src/style.css b/ui/src/style.css
index fcf503c..b5c61c9 100644
--- a/ui/src/style.css
+++ b/ui/src/style.css
@@ -1,9 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer components {
-  .table-cell {
-    @apply py-2 px-5 border-2 border-violet-300 dark:border-slate-700;
-  }
-}

source	ip	location
ip.ny4.dev	Loading...	Loading...
ip.sb	Loading...	Loading...
ipapi.is	Loading...	Loading...
ip-api.com	Loading...	- Loading... -