2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-30 21:13:13 +00:00
gamebrary/src/components/GameCards/GameCardCompact.vue

89 lines
2 KiB
Vue
Raw Normal View History

<template lang="html">
2020-10-14 21:48:55 +00:00
<b-card
no-body
2021-01-26 22:10:46 +00:00
class="clickable"
2020-10-14 21:48:55 +00:00
:bg-variant="nightMode ? 'dark' : ''"
:text-variant="nightMode ? 'white' : ''"
>
2020-08-17 16:10:21 +00:00
<b-row no-gutters v-if="game && game.name">
2020-08-25 05:18:56 +00:00
<b-col cols="3">
2020-08-22 18:56:46 +00:00
<b-img
fluid
blank-color="#ccc"
2020-08-11 23:39:11 +00:00
:src="coverUrl"
:alt="game.name"
class="rounded-0"
/>
</b-col>
2020-08-25 05:18:56 +00:00
<b-col cols="9">
2020-08-11 23:39:11 +00:00
<b-card-body body-class="p-2">
<b-card-title
:class="`mb-0 ${highlightCompletedGame ? 'text-success' : ''}`"
title-tag="small"
>
2020-08-11 23:39:11 +00:00
{{ game.name }}
<b-badge variant="warning" v-if="gameNotes">
<i class="far fa-sticky-note fa-fw" />
2020-08-11 23:39:11 +00:00
</b-badge>
</b-card-title>
2020-09-30 23:56:38 +00:00
<br />
2020-08-21 07:42:16 +00:00
<!-- <b-badge
2020-08-11 23:39:11 +00:00
v-if="releaseDate"
variant="secondary"
class="mb-2"
>
Releases in
{{ releaseDate }}
2020-08-21 07:42:16 +00:00
</b-badge> -->
2020-08-11 23:39:11 +00:00
<b-form-rating
v-if="gameRating"
2020-10-14 23:29:15 +00:00
:class="['p-0', { 'bg-dark': nightMode }]"
2020-08-11 23:39:11 +00:00
inline
:value="gameRating"
readonly
variant="warning"
size="sm"
no-border
/>
2019-11-08 20:34:06 +00:00
2020-08-11 23:39:11 +00:00
<b-progress
v-if="showGameProgress"
2020-08-11 23:39:11 +00:00
:value="gameProgress"
class="my-2"
2020-08-11 23:39:11 +00:00
variant="success"
height="6px"
/>
2019-11-08 20:34:06 +00:00
2020-08-11 23:39:11 +00:00
<div v-if="showGameTags">
<b-badge
v-for="({ games, hex, tagTextColor }, name) in tags"
v-if="games.includes(game.id)"
:key="name"
pill
variant="primary"
tag="small"
:style="`background-color: ${hex}; color: ${tagTextColor}`"
>
{{ name }}
</b-badge>
</div>
</b-card-body>
</b-col>
</b-row>
</b-card>
</template>
<script>
import GameCardUtils from '@/components/GameCards/GameCard';
export default {
2019-11-08 19:56:03 +00:00
mixins: [GameCardUtils],
};
</script>