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

clean up tags list

Browse source
This commit is contained in:
Gamebrary 2021-04-21 08:40:39 -07:00
parent f1bcb65a5b
commit e43c15c4a4
1 changed files with 27 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/Tags/TagsList.vue
View file

@ -1,23 +1,10 @@
<template lang="html">
<div class="tags-list">
<b-card
<div>
<div
v-for="({ games, hex, tagTextColor }, name) in tags"
class="border rounded p-2 overflow-hidden text-center cursor-pointer"
@click="$emit('selected', name)"
:key="name"
class="border-bottom border-light pb-4 mb-4"
>
<!-- <pre>{{ games }}</pre> -->
<div class="rounded d-flex justify-content-center overflow-auto no-scrollbar clickable">
<b-img
v-for="gameId in games"
:key="gameId"
:src="getCoverUrl(gameId)"
class="rounded ml-n4"
width="60"
/>
<!-- @click.stop="openGame(gameId)" -->
</div>
<b-badge
pill
tag="small"
@ -26,10 +13,27 @@
{{ name }}
</b-badge>
<br>
<br />
<small>{{ games.length }} Games</small>
</b-card>
<small class="text-muted">{{ games.length }} Games</small>
<br />
<b-button @click="$emit('selected', name)">
Edit
</b-button>
<div class="d-flex overflow-auto no-scrollbar clickable">
<b-img
v-for="gameId in games"
:key="gameId"
:src="getCoverUrl(gameId)"
class="rounded ml-n4"
@click.stop="openGame(gameId)"
width="60"
/>
</div>
</div>
</div>
</template>
@ -50,22 +54,10 @@ export default {
: '/static/no-image.jpg';
},
// openGame(gameId) {
// this.$store.commit('SET_GAME_MODAL_DATA', { gameId });
// this.$bvModal.show('game-modal');
// },
openGame(gameId) {
this.$store.commit('SET_GAME_MODAL_DATA', { gameId });
this.$bvModal.show('game-modal');
},
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.tags-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: .5rem;
@media(max-width: 780px) {
grid-template-columns: 1fr;
}
}
</style>