Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-09-20 05:41:57 +00:00
Code Issues Projects Releases Packages Wiki Activity

Homepage minor clean up

Browse source
This commit is contained in:
gamebrary 2024-09-16 16:23:06 -07:00
parent 2def93942d
commit 8f3cc12e52
1 changed files with 52 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
src/pages/HomePage.vue
View file

@ -1,59 +1,58 @@
<template lang="html">
<div>
<div class="text-center">
<h1 class="mb-2">Gamebrary</h1>
<h2 class="mb-3">Elevate Your Play, Organize Your Way.</h2>
<div class="text-center">
<h1 class="mb-2">Gamebrary</h1>
<h2 class="mb-3">Elevate Your Play, Organize Your Way.</h2>
<b-button
variant="success"
class="mb-5"
:to="{ name: 'auth' }"
>
Join the community!
</b-button>
<div class="board-grid">
<MiniBoard
v-for="board in recentlyUpdatedPublicBoards"
:key="board.id"
:board="board"
/>
</div>
<b-button
variant="link"
class="mt-2"
:to="{ name: 'public.boards' }"
<b-button
variant="success"
class="mb-5"
:to="{ name: 'auth' }"
>
View all public boards...
</b-button>
Join the community!
</b-button>
<h3 class="mt-3 mb-3">Discover and connect with others in the community!</h3>
<div class="d-flex overflow-hidden w-75 mx-auto justify-content-center">
<profile-card
v-for="(profile, index) in filteredProfiles"
:key="profile.userName"
:profile="profile"
:class="index ? 'ml-n3' : ''"
/>
</div>
<h3 class="mt-5">Powered by</h3>
<div class="rounded d-flex flex-wrap align-items-start justify-content-center overflow-auto">
<img src="/logos/data-sources/wikipedia.svg" alt="wikipedia" width="60" class="mx-3">
<img src="/logos/data-sources/igdb.svg" alt="igdb" width="80" class="mx-3">
<img src="/logos/data-sources/fandom.svg" alt="fandom" width="80" class="mx-3 mt-2">
<img src="/logos/data-sources/amazon.svg" alt="amazon" width="80" class="mx-3 mt-3">
<img src="/logos/data-sources/twitch.svg" alt="twitch" width="80" class="mx-3 mt-2">
<img src="/logos/data-sources/speedrun.png" alt="speedrun" width="80" class="mx-3 mt-3">
<img src="/logos/data-sources/gog.svg" alt="gog" width="60" class="mx-3">
<img src="/logos/data-sources/steam.svg" alt="steam" width="60" class="mx-3">
</div>
<small class="pb-5">&copy; {{ currentYear }} Gamebrary </small>
<div class="board-grid">
<MiniBoard
v-for="board in publicBoards"
:key="board.id"
:board="board"
/>
</div>
<b-button
variant="link"
class="mt-2"
:to="{ name: 'public.boards' }"
>
View all public boards...
</b-button>
<h3 class="mt-3 mb-3">Discover and connect with others in the community!</h3>
<div class="d-flex w-75 mx-auto justify-content-center">
<ProfileCard
v-for="(profile, index) in filteredProfiles"
:key="profile.userName"
:profile="profile"
thumbnail
:class="index ? 'ml-n4' : ''"
/>
</div>
<h3 class="mt-5">Powered by</h3>
<div class="rounded d-flex flex-wrap align-items-start justify-content-center overflow-auto">
<img src="/logos/data-sources/wikipedia.svg" alt="wikipedia" width="60" class="mx-3">
<img src="/logos/data-sources/igdb.svg" alt="igdb" width="80" class="mx-3">
<img src="/logos/data-sources/fandom.svg" alt="fandom" width="80" class="mx-3 mt-2">
<img src="/logos/data-sources/amazon.svg" alt="amazon" width="80" class="mx-3 mt-3">
<img src="/logos/data-sources/twitch.svg" alt="twitch" width="80" class="mx-3 mt-2">
<img src="/logos/data-sources/speedrun.png" alt="speedrun" width="80" class="mx-3 mt-3">
<img src="/logos/data-sources/gog.svg" alt="gog" width="60" class="mx-3">
<img src="/logos/data-sources/steam.svg" alt="steam" width="60" class="mx-3">
</div>
<small class="pb-5">&copy; {{ currentYear }} Gamebrary </small>
</div>
</template>
@ -69,12 +68,8 @@ export default {
},
computed: {
...mapState(['user', 'profiles']),
...mapGetters(['darkTheme', 'navPosition', 'sortedPublicBoards']),
recentlyUpdatedPublicBoards() {
return this.sortedPublicBoards.filter(({ lastUpdated }) => Boolean(lastUpdated)).slice(0, 12);
},
...mapState(['user', 'profiles', 'publicBoards']),
...mapGetters(['darkTheme', 'navPosition']),
filteredProfiles() {
return this.profiles.filter(({ avatar }) => avatar).slice(0, 5);