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;
} }

25
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,6 +53,7 @@
<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 style="display: grid; place-items: center;">
<div class="details"> <div class="details">
<p>Year Published: {game?.year_published}</p> <p>Year Published: {game?.year_published}</p>
<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p> <p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
@ -63,7 +64,6 @@
{/if} {/if}
<a <a
class="with-icon" class="with-icon"
style="display: flex; gap: 1rem;"
href={game.url} href={game.url}
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
@ -73,7 +73,7 @@
</div> </div>
<div> <div>
{#if existsInCollection} {#if existsInCollection}
<button class="btn" type="button" on:click={() => removeGame()} <button class="btn button-icon" type="button" on:click={() => removeGame()}
>Remove from collection <MinusCircleIcon width="24" height="24" /></button >Remove from collection <MinusCircleIcon width="24" height="24" /></button
> >
{:else} {:else}
@ -89,17 +89,20 @@
> >
{/if} {/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}
<div in:fly={{ opacity: 0, x: 100 }} out:fade>
{@html game?.description?.substring(firstParagraphEnd + 1)} {@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>