gamebrary/src/components/GameCards/GameCardDefault.vue

86 lines
1.9 KiB
Vue
Raw Normal View History

2019-11-26 21:37:10 +00:00
<!-- TODO: abstract styles, only add card specific styles in each component -->
<template lang="html">
2020-07-22 20:09:23 +00:00
<b-card no-body class="mb-2">
<b-row no-gutters class="game-card">
<b-col md="4">
<b-card-img
:src="coverUrl"
:alt="game.name"
@click="openDetails"
/>
</b-col>
<b-col md="8">
<b-card-body :title="game.name" title-tag="h6">
<b-form-rating
inline
:value="Math.round((game.rating / 20) * 2) / 2"
readonly
variant="warning"
size="sm"
no-border
/>
</b-card-body>
</b-col>
</b-row>
</b-card>
2019-11-08 20:34:06 +00:00
2020-07-22 20:09:23 +00:00
<!-- <div v-if="gameId && games[gameId]" :class="gameCardClass">
2019-11-08 20:34:06 +00:00
<div class="game-info">
<span
v-if="showReleaseDates && releaseDate"
v-text="releaseDateText"
class="release-date drag-filter"
>
</span>
<game-progress
v-if="gameProgress"
small
:progress="gameProgress"
2020-02-03 16:26:03 +00:00
class="drag-filter"
@click.native="openDetails"
/>
2019-11-08 20:34:06 +00:00
<i
v-if="note"
:title="note"
2020-02-03 16:26:03 +00:00
class="fas fa-sticky-note note drag-filter"
2019-11-08 20:34:06 +00:00
@click="openDetails"
/>
2020-02-03 16:26:03 +00:00
<div v-if="hasTags" class="game-tags drag-filter">
<div
v-for="({ games, hex, tagTextColor }, name) in tags"
2019-11-08 20:34:06 +00:00
v-if="games.includes(game.id)"
2020-02-03 16:26:03 +00:00
:key="name"
>
<tag
v-if="games.includes(game.id)"
:label="name"
:hex="hex"
:text-hex="tagTextColor"
readonly
@action="openTags"
/>
</div>
</div>
2019-11-08 20:34:06 +00:00
</div>
2020-07-22 20:09:23 +00:00
</div> -->
</template>
<script>
import GameProgress from '@/components/GameDetail/GameProgress';
import GameCardUtils from '@/components/GameCards/GameCard';
2019-11-21 22:06:14 +00:00
import Tag from '@/components/Tag';
export default {
2019-11-08 19:56:03 +00:00
components: {
GameProgress,
2019-11-08 19:56:03 +00:00
Tag,
},
2019-11-08 19:56:03 +00:00
mixins: [GameCardUtils],
};
</script>