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

Change max width of main tag, fix button icon formatting, and change description transistions.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-30 23:08:33 -05:00
parent d37c0aca61
commit cf321fc68a
2 changed files with 55 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/routes/+layout.svelte
View file

@ -129,11 +129,12 @@
max-width: 850px; max-width: 850px;
margin: 0 auto; margin: 0 auto;
padding: 2rem 0rem; padding: 2rem 0rem;
max-width: 80%; max-width: 80vw;
@media (min-width: 1500px) { @media (min-width: 1600px) {
max-width: 60%; max-width: 65vw;
} }
box-sizing: border-box; box-sizing: border-box;
} }

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

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import { import {
ExternalLinkIcon, ExternalLinkIcon,
MinusCircleIcon, MinusCircleIcon,
@ -53,53 +53,56 @@
<img src={game.image_url} alt={`Image of ${game.name}`} /> <img src={game.image_url} alt={`Image of ${game.name}`} />
</a> </a>
</div> </div>
<div class="details"> <div style="display: grid; place-items: center;">
<p>Year Published: {game?.year_published}</p> <div class="details">
<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p> <p>Year Published: {game?.year_published}</p>
<p>Playtime: {game.playtime} minutes</p> <p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
<p>Minimum Age: {game.min_age}</p> <p>Playtime: {game.playtime} minutes</p>
{#if +game?.price !== 0.0} <p>Minimum Age: {game.min_age}</p>
<p>Price: ${game?.price}</p> {#if +game?.price !== 0.0}
{/if} <p>Price: ${game?.price}</p>
<a {/if}
class="with-icon" <a
style="display: flex; gap: 1rem;" class="with-icon"
href={game.url} href={game.url}
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 <ExternalLinkIcon width="24" height="24" /></a >Board Game Atlas <ExternalLinkIcon width="24" height="24" /></a
>
</div>
<div>
{#if existsInCollection}
<button class="btn" type="button" on:click={() => removeGame()}
>Remove from collection <MinusCircleIcon width="24" height="24" /></button
> >
{:else} </div>
<button <div>
class="btn" {#if existsInCollection}
type="button" <button class="btn button-icon" type="button" on:click={() => removeGame()}
on:click={() => { >Remove from collection <MinusCircleIcon width="24" height="24" /></button
addToCollection(game); >
if (browser) { {:else}
localStorage.collection = JSON.stringify($collectionStore); <button
} class="btn"
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button type="button"
> on:click={() => {
{/if} addToCollection(game);
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
>
{/if}
</div>
</div> </div>
</section> </section>
{#if firstParagraphEnd > 0} {#if firstParagraphEnd > 0}
<section class="description first-paragraph"> <section class="description first-paragraph" style="margin-top: 2rem;">
{@html game?.description?.substring(0, firstParagraphEnd)} {@html game?.description?.substring(0, firstParagraphEnd)}
</section> </section>
{#if game?.description?.substring(firstParagraphEnd + 1) !== ''} {#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
<section class="description" transition:fade> <section class="description">
{#if seeMore} {#if seeMore}
{@html game?.description?.substring(firstParagraphEnd + 1)} <div in:fly={{ opacity: 0, x: 100 }} out:fade>
{@html game?.description?.substring(firstParagraphEnd + 1)}
</div>
{/if} {/if}
<button class="btn" type="button" on:click={() => (seeMore = !seeMore)} <button class="btn button-icon" type="button" on:click={() => (seeMore = !seeMore)}
>See >See
{#if !seeMore} {#if !seeMore}
More <PlusIcon width="24" height="24" /> More <PlusIcon width="24" height="24" />
@ -136,8 +139,15 @@
background-color: var(--color-btn-primary-active); background-color: var(--color-btn-primary-active);
} }
.button-icon {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 1rem;
}
.game { .game {
display: grid; display: grid;
grid-template-columns: minmax(auto, 400px) 1fr;
gap: 2rem; gap: 2rem;
margin: 1rem; margin: 1rem;
place-items: center; place-items: center;
@ -159,7 +169,7 @@
margin: 1rem; margin: 1rem;
} }
@media (max-width: 480px) { @media (max-width: 550px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@ -175,5 +185,6 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
place-items: center; place-items: center;
gap: 1rem;
} }
</style> </style>