Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-10 05:34:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

Games page improvements

Browse source
This commit is contained in:
Gamebrary 2023-05-08 14:30:25 -07:00
parent b3e97ac637
commit 0c6bd5adef
2 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/illustrations/games.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

11
src/pages/GamesPage.vue
View file

@ -16,7 +16,7 @@
<empty-state <empty-state
v-if="!user" v-if="!user"
illustration="notes" illustration="games"
> >
<p>Click on <i class="fa-solid fa-heart text-primary" /> and your games will show here.</p> <p>Click on <i class="fa-solid fa-heart text-primary" /> and your games will show here.</p>
</empty-state> </empty-state>
@ -26,16 +26,18 @@
<masonry <masonry
v-else-if="likedGames.length" v-else-if="likedGames.length"
:cols="{ default: 5, 1200: 4, 768: 3, 480: 2 }" :cols="{ default: 5, 1200: 4, 768: 3, 480: 2 }"
gutter="8px" gutter="16px"
> >
<b-card <b-card
v-for="game in likedGames" v-for="game in likedGames"
body-class="pb-0" body-class="pb-0"
:bg-variant="darkTheme ? 'secondary' : 'light'"
:text-variant="darkTheme ? 'white' : 'dark'"
:key="game.id" :key="game.id"
:title="game.name" :title="game.name"
:img-src="$options.getImageUrl(game, $options.IMAGE_SIZE_COVER_SMALL)" :img-src="$options.getImageUrl(game, $options.IMAGE_SIZE_COVER_SMALL)"
img-alt="Image" img-alt="Image"
class="cursor-pointer mb-2" class="cursor-pointer mb-3"
@click="$router.push({ name: 'game', params: { id: game.id, slug: game.slug }})" @click="$router.push({ name: 'game', params: { id: game.id, slug: game.slug }})"
/> />
</masonry> </masonry>
@ -55,7 +57,7 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import { getImageUrl } from '@/utils'; import { getImageUrl } from '@/utils';
import EmptyState from '@/components/EmptyState'; import EmptyState from '@/components/EmptyState';
@ -74,6 +76,7 @@ export default {
computed: { computed: {
...mapState(['games', 'cachedGames', 'user']), ...mapState(['games', 'cachedGames', 'user']),
...mapGetters(['darkTheme']),
likedGames() { likedGames() {
if (!this.user) return null; if (!this.user) return null;