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

Fixing show hide to be slightly better.

Browse source
This commit is contained in:
Bradley Shellnut 2022-07-11 19:53:50 -07:00
parent c445583f2c
commit d54b9a1877
1 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/routes/game/[id].svelte
View file

@ -8,6 +8,14 @@
export let game: GameType; export let game: GameType;
let seeMore: boolean = false; let seeMore: boolean = false;
console.log(game?.description?.indexOf('</p>'));
let firstParagraphEnd = 0;
if (game?.description?.indexOf('</p>') > 0) {
firstParagraphEnd = game?.description?.indexOf('</p>') + 4;
} else if (game?.description?.indexOf('</ p>') > 0) {
firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
}
console.log('firstParagraphEnd', firstParagraphEnd);
</script> </script>
<svelte:head> <svelte:head>
@ -22,24 +30,32 @@
<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="description"> <div class="details">
<div> <div>
<p>Price: {game?.price}</p>
<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>
<p>Playtime: {game.playtime} minutes</p> <p>Playtime: {game.playtime} minutes</p>
<p>Minimum Age: {game.min_age}</p> <p>Minimum Age: {game.min_age}</p>
<p>Price: ${game?.price}</p>
<a href={game.url} rel="noreferrer">Board Game Atlas Link</a> <a href={game.url} rel="noreferrer">Board Game Atlas Link</a>
</div> </div>
</div> </div>
</section> </section>
<section class="description"> {#if firstParagraphEnd > 0}
{@html game?.description?.substring(0, game?.description?.indexOf('<br /><br />'))} <section class="description">
{#if seeMore} <span>
<div transition:fade>{@html game?.description?.substring(game?.description?.indexOf('<br /><br />') + 12)}</div> {@html game?.description?.substring(0, firstParagraphEnd)}
</span>
{#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
{#if seeMore}
<span transition:fade>
{@html game?.description?.substring(firstParagraphEnd + 1)}
</span>
{/if}
<button on:click={() => (seeMore = !seeMore)}>See {!seeMore ? 'More +' : 'Less -'}</button>
{/if} {/if}
<button on:click={() => (seeMore = !seeMore)}>See {!seeMore ? 'More +' : 'Less -'}</button> </section>
</section> {/if}
<style lang="scss"> <style lang="scss">
h2 { h2 {
@ -68,6 +84,10 @@
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
margin: 1rem; margin: 1rem;
a,
p {
margin: 1rem;
}
} }
.description { .description {