BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

More mobile updates.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-27 18:10:32 -04:00
parent 770b1e90a6
commit a96f8ecb3e
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/routes/game/[id]/+page.svelte
View file

@ -47,7 +47,7 @@
<h2>{game?.name}</h2> <h2>{game?.name}</h2>
<section class="games"> <section class="game">
<div> <div>
<a class="thumbnail" href={game.url}> <a class="thumbnail" href={game.url}>
<img src={game.image_url} alt={`Image of ${game.name}`} /> <img src={game.image_url} alt={`Image of ${game.name}`} />
@ -68,8 +68,10 @@
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
aria-label={`Board Game Atlas Link for ${game.name}`} aria-label={`Board Game Atlas Link for ${game.name}`}
>Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a >Board Game Atlas <ExternalLinkIcon width="24" height="24" /></a
> >
</div>
<div>
{#if existsInCollection} {#if existsInCollection}
<button class="btn" type="button" on:click={() => removeGame()} <button class="btn" type="button" on:click={() => removeGame()}
>Remove from collection <MinusCircleIcon width="24" height="24" /></button >Remove from collection <MinusCircleIcon width="24" height="24" /></button
@ -136,14 +138,16 @@
background-color: var(--color-btn-primary-active); background-color: var(--color-btn-primary-active);
} }
.games { .game {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: auto 1fr;
gap: 2rem; gap: 2rem;
margin: 1rem; margin: 1rem;
place-items: center;
@media (max-width: 650px) { @media (max-width: 650px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
place-items: center;
} }
} }
@ -159,7 +163,8 @@
} }
@media (max-width: 650px) { @media (max-width: 650px) {
justify-content: center; grid-template-columns: 1fr 1fr;
place-content: center;
} }
} }
@ -171,6 +176,7 @@
.with-icon { .with-icon {
display: flex; display: flex;
flex-wrap: wrap;
place-items: center; place-items: center;
} }
</style> </style>