nyancat/ip-checker
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): use grid instead of table for responsive design

Browse source
This commit is contained in:
Guanran Wang 2024-10-26 19:49:33 +08:00
parent 659ce3064b
commit e753e3fba8
Signed by: nyancat
GPG key ID: 91F97D9ED12639CF
2 changed files with 32 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
ui/index.html
View file

@ -28,47 +28,42 @@
<body <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" 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 <div class="flex flex-col min-h-screen justify-center items-center">
class="flex flex-col min-h-screen justify-center items-center overflow-x-auto"
>
<p class="py-2">Ny4 IP checker!</p> <p class="py-2">Ny4 IP checker!</p>
<table class="table-auto border-collapse"> <div>
<thead> <div
<tr> class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
<th class="table-cell">source</th> >
<th class="table-cell">ip</th> <div>ip.ny4.dev</div>
<th class="table-cell">location</th> <div id="check-ny4-ip">Loading...</div>
</tr> <div id="check-ny4-location" class="col-span-2">Loading...</div>
</thead> </div>
<tbody> <div
<tr> class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
<td class="table-cell">ip.ny4.dev</td> >
<td class="table-cell" id="check-ny4-ip">Loading...</td> <div>ip.sb</div>
<td class="table-cell" id="check-ny4-location">Loading...</td> <div id="check-ipsb-ip">Loading...</div>
</tr> <div id="check-ipsb-location" class="col-span-2">Loading...</div>
<tr> </div>
<td class="table-cell">ip.sb</td> <div
<td class="table-cell" id="check-ipsb-ip">Loading...</td> class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2 border-b border-violet-300 dark:border-slate-700"
<td class="table-cell" id="check-ipsb-location">Loading...</td> >
</tr> <div>ipapi.is</div>
<tr> <div id="check-ipapiis-ip">Loading...</div>
<td class="table-cell">ipapi.is</td> <div id="check-ipapiis-location" class="col-span-2">Loading...</div>
<td class="table-cell" id="check-ipapiis-ip">Loading...</td> </div>
<td class="table-cell" id="check-ipapiis-location">Loading...</td> <div class="grid grid-cols-2 md:grid-cols-4 gap-2 p-2">
</tr> <div>ip-api.com</div>
<tr> <div id="check-speedtestcn-ip">Loading...</div>
<td class="table-cell">ip-api.com</td> <div id="check-speedtestcn-location" class="col-span-2">
<td class="table-cell" id="check-speedtestcn-ip">Loading...</td> Loading...
<td class="table-cell" id="check-speedtestcn-location"> </div>
Loading... </div>
</td> </div>
</tr>
</tbody>
</table>
</div> </div>
<footer <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. (c) 2024 Guanran Wang, source code licenced under MIT.

6
ui/src/style.css
View file

@ -1,9 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer components {
.table-cell {
@apply py-2 px-5 border-2 border-violet-300 dark:border-slate-700;
}
}