hopefully prettier table on mobile

.gitlab-ci.yml

@@ -28,10 +28,10 @@ build-docker-master:
     - master
 
 database:
-  #rules:
-  #  - if: $CI_COMMIT_TAG =~ /^db/
-      #hanges:
-      #  - db.version
+  rules:
+    #- if: $CI_COMMIT_TAG =~ /^db/
+    - changes:
+      - db.version
   image: python:3.11
   script:
     - cd db_generator

src/entry-server.tsx

@@ -3,11 +3,12 @@ import {
   createHandler,
   renderAsync,
 } from "solid-start/entry-server";
+import { initRanks } from "./models/rank";
 
 
 export default createHandler(
   renderAsync((event) => <StartServer event={event} />)
 );
-const test = "test";
-console.log(test);
+
+initRanks();
 

src/root.css

 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@media (min-width: 640px) {
+    table {
+      display: inline-table !important;
+    }
+
+    thead tr:not(:first-child) {
+      display: none;
+    }
+  }
+
+  td:not(:last-child) {
+    border-bottom: 0;
+  }
+
+  th:not(:last-child) {
+    border-bottom: 2px solid rgba(0, 0, 0, .1);
+  }
+  
\ No newline at end of file

src/routes/rank/[category].tsx

@@ -154,8 +154,8 @@ export default function RankCategory() {
                     type="text" id="conf-search-input" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"/>
             </div>
             <div class="overflow-x-auto relative shadow-md sm:rounded-lg">
-            <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-                <tbody>
+            <table class="w-full flex flex-row flex-no-wrap sm:bg-white rounded-lg overflow-hidden sm:shadow-lg my-5">
+                <tbody class="flex-1 sm:flex-none">
                     <Suspense fallback={<EmptyRow/>}>
                     <Show when={ranks()}>
                         <For each={isConference() ? ranks().conferences.filter((c) => {
@@ -164,20 +164,18 @@ export default function RankCategory() {
                             return c.name.toLowerCase().indexOf(searchInput().toLowerCase()) != -1
                         })}>
                             {(conf, i) => <Show when={i() < 1000}>
-                            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
-                                <th scope="row" class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white max-w-[400px]">
+                            <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0 bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                                <td class="text-ellipsis text-gray-900 dark:text-white p-3 overflow-x-hidden">
                                     {conf.name}
-                                </th>
-                                <td class="py-4 px-6 text-gray-400">
-                                    {conf.fullname}
                                 </td>
-                                <td class="py-4 px-6">
-                                    {Math.ceil(conf.score)}
+                                <td class=" text-gray-400 p-3 text-ellipsis overflow-x-hidden">
+                                    {conf.fullname}
                                 </td>
-                                <td class="py-4 px-6">
-                                    #{(conf.rank)}, {rankToABC(conf.rank, isConference() ? ranks().conferences.length : ranks().journals.length)}
+                                <td class="min-w-[100px] text-gray-400 p-3">
+                                {rankToABC(conf.rank, isConference() ? ranks().conferences.length : ranks().journals.length)}<br/>
+                                #{(conf.rank)} ({Math.ceil(conf.score)})
                                 </td>
-                                <td class="py-4 px-6 text-right">
+                                <td class="p-3 text-right">
                                     <A href={"/rank/venue/"+category+'/'+conf.key} class="font-medium text-blue-600 dark:text-blue-500 hover:underline">Details</A>
                                 </td>
                             </tr>