prettify the list

src/routes/+page.svelte

@@ -28,62 +28,14 @@
         >.
     </p>
 
-    <header>
+    <GameList games={data.games} />
-        <Search {handler} />
-    </header>
-
-    <table>
-        <thead>
-            <tr>
-                <Th {handler} orderBy="username">user</Th>
-                <Th {handler} orderBy="name">game</Th>
-                <th>notes</th>
-                <Th {handler} orderBy="price">price</Th>
-                <th>last updated</th>
-            </tr>
-        </thead>
-        <tbody>
-            {#each $rows as row}
-                <tr>
-                    <td
-                        ><a
-                            target="_blank"
-                            href={`https://boardgamegeek.com/collection/user/${row.username}?trade=1&subtype=boardgame&ff=1`}
-                            >{row.username}</a>
-                        &nbsp;
-                        <a
-                            target="_blank"
-                            href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>
-                            <i>email</i></a>
-                    </td><td>
-                        <div class="game-cell">
-                            <a
-                                class="game-desc"
-                                target="_blank"
-                                href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
-                                {row.name}</a>
-                            <a
-                                target="_blank"
-                                href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
-                                <img src={row.thumbnail} height="60" /></a>
-                        </div>
-                    </td>
-                    <td>{row.notes}</td>
-                    <td>{row.price ?? ''}</td>
-                    <td><small>{pretty_date(row.updated_at)}</small></td>
-                </tr>
-            {/each}
-        </tbody>
-    </table>
 </article>
 
 <script>
-    // TODO sort
     // TODO hide games I'm not interested in
     // TODO add cart
     // TODO prettify via beercss
-    // TODO use https://github.com/dasDaniel/svelte-table#readme
+    import GameList from './GameList.svelte';
-    import { DataHandler, Search, Th } from '@vincjo/datatables';
 
     export let data;
 
@@ -92,8 +44,6 @@
 
         return date.replace(/T.*/, '');
     }
-    const handler = new DataHandler(data.games, { rowsPerPage: 500 });
-    const rows = handler.getRows();
 </script>
 
 <style>
@@ -108,6 +58,8 @@
         font-size: var(--font-size-10);
         max-width: 60em;
         text-align: justify;
+        margin-left: 3em;
+        margin-right: 3em;
     }
     a {
         color: var(--primary);

src/routes/GameList.svelte

@@ -0,0 +1,81 @@
+<div class="games">
+    {#each games as game}
+        <div class="grid top-align">
+            <a
+                class="s2"
+                target="_blank"
+                href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
+                <img src={game.thumbnail} height="80" /></a>
+            <div class="grid s10">
+                <div class="s8 left-align">
+                    <strong>
+                        <a
+                            class="game-desc"
+                            target="_blank"
+                            href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
+                            {game.name}</a>
+                    </strong>
+                </div>
+                <div class="s3">
+                    <a
+                        target="_blank"
+                        href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
+                        >{game.username}</a>
+                    &nbsp;
+                    <a
+                        target="_blank"
+                        href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
+                        <i>email</i></a>
+                </div>
+                <div class="s1 right-align">
+                    {game.price ? '$' + game.price : ''}
+                </div>
+                <div class="notes s8">{game.notes}</div>
+                {#if game.updated_at}
+                    <div class="s4 updated-at">
+                        {pretty_date(game.updated_at)}
+                    </div>
+                {/if}
+            </div>
+        </div>
+        <div class="medium-divider"></div>
+    {/each}
+</div>
+
+<script>
+    export let games;
+
+    // add filter
+    // add sort (user, game, price)
+
+    function pretty_date(date) {
+        if (!date) return '';
+
+        return date.replace(/T.*/, '');
+    }
+</script>
+
+<style>
+    .games {
+        margin-top: 3em;
+    }
+    a {
+        color: var(--primary);
+        text-decoration: underline;
+    }
+    .grid {
+        margin-right: 2em;
+        font-size: var(--font-size-10);
+    }
+    .notes {
+        margin-top: 1em;
+        margin-left: 1em;
+    }
+    .updated-at {
+        font-size: smaller;
+        text-align: left;
+    }
+    .updated-at::before {
+        content: 'last update: ';
+    }
+</style>