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

feat: 🎨 Make the game component look cleaner

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-01 12:10:25 -05:00
parent b2e34606fe
commit c1d4e5a2d9
1 changed files with 70 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
src/lib/components/game/index.svelte
View file

@ -28,12 +28,12 @@
</script> </script>
<article class="game-container" transition:fade> <article class="game-container" transition:fade>
<div class="game-info"> <!-- <div class="game-info"> -->
<h2>{game.name}</h2> <h2>{game.name}</h2>
<a class="thumbnail" href={`/game/${game.id}`}> <a class="thumbnail" href={`/game/${game.id}`}>
<img src={game.thumb_url} alt={`Image of ${game.name}`} /> <img src={game.thumb_url} alt={`Image of ${game.name}`} />
</a> </a>
</div> <!-- </div> -->
{#if !minimal && game?.players && game?.playtime} {#if !minimal && game?.players && game?.playtime}
<div class="game-details"> <div class="game-details">
@ -49,50 +49,52 @@
{/if} {/if}
</div> </div>
{/if} {/if}
{#if existsInCollection} <div class="game-buttons">
<button {#if existsInCollection}
aria-label="Remove from collection" <button
class="btn remove" aria-label="Remove from collection"
type="button" class="btn remove"
on:click={() => { type="button"
removeGameFromCollection(); on:click={() => {
}}>Remove from Collection <MinusCircleIcon width="24" height="24" /></button removeGameFromCollection();
> }}>Remove from Collection <MinusCircleIcon width="24" height="24" /></button
{:else} >
<button {:else}
aria-label="Add to collection" <button
class="btn" aria-label="Add to collection"
type="button" class="btn"
on:click={() => { type="button"
addToCollection(game); on:click={() => {
if (browser) { addToCollection(game);
localStorage.collection = JSON.stringify($collectionStore); if (browser) {
} localStorage.collection = JSON.stringify($collectionStore);
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button }
> }}>Add to collection <PlusCircleIcon width="24" height="24" /></button
{/if} >
{#if existsInWishlist} {/if}
<button {#if existsInWishlist}
aria-label="Remove from wishlist" <button
class="btn remove" aria-label="Remove from wishlist"
type="button" class="btn remove"
on:click={() => { type="button"
removeGameFromWishlist(); on:click={() => {
}}>Remove from Wishlist <MinusCircleIcon width="24" height="24" /></button removeGameFromWishlist();
> }}>Remove from Wishlist <MinusCircleIcon width="24" height="24" /></button
{:else} >
<button {:else}
aria-label="Add to wishlist" <button
class="btn" aria-label="Add to wishlist"
type="button" class="btn"
on:click={() => { type="button"
addToWishlist(game); on:click={() => {
if (browser) { addToWishlist(game);
localStorage.wishlist = JSON.stringify($wishlistStore); if (browser) {
} localStorage.wishlist = JSON.stringify($wishlistStore);
}}>Add to wishlist <PlusCircleIcon width="24" height="24" /></button }
> }}>Add to wishlist <PlusCircleIcon width="24" height="24" /></button
{/if} >
{/if}
</div>
</article> </article>
<style lang="scss"> <style lang="scss">
@ -112,9 +114,10 @@
} }
.game-container { .game-container {
display: flex; display: grid;
place-content: center; grid-template-rows: repeat(auto-fill, 1fr);
flex-wrap: wrap; place-items: center;
text-align: center;
@media (max-width: 650px) { @media (max-width: 650px) {
max-width: none; max-width: none;
@ -129,12 +132,12 @@
background-color: hsla(222, 9%, 65%, 1); background-color: hsla(222, 9%, 65%, 1);
} }
.game-info { /* .game-info {
display: grid; display: grid;
place-items: center; place-items: center;
gap: 0.75rem; gap: 0.75rem;
margin: 0.2rem; margin: 0.2rem;
} } */
.game-details { .game-details {
p, p,
@ -143,15 +146,20 @@
} }
} }
.btn { .game-buttons {
max-height: 100px; display: grid;
} gap: 1rem;
.remove { .btn {
background-color: var(--warning); max-height: 100px;
}
&:hover { .remove {
background-color: var(--warning-hover); background-color: var(--warning);
&:hover {
background-color: var(--warning-hover);
}
} }
} }
} }