yanick/bgg-ottawa-sell-club
2
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'nicer-list'

Browse Source
This commit is contained in:
Yanick Champoux 2024-02-01 17:42:42 -05:00
commit 32d971811e
3 changed files with 90 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tender-turkeys-hide.md Normal file
View File

@ -0,0 +1,5 @@
---
"ottawa-boardgame-sell-bgg": minor
---
feat: prettify the list

56
src/routes/+page.svelte
View File

@ -28,62 +28,14 @@
>.
</p>
<header>
<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>
<GameList games={data.games} />
</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 { DataHandler, Search, Th } from '@vincjo/datatables';
import GameList from './GameList.svelte';
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);

81
src/routes/GameList.svelte Normal file
View File

@ -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>