Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-18 15:23:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

update game detail placeholder

Browse source
This commit is contained in:
Roman Cervantes 2020-10-21 10:33:34 -07:00
parent e9135691cb
commit 923c31f63f
1 changed files with 42 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/components/Game/GameDetailPlaceholder.vue
View file

@ -1,85 +1,56 @@
<template lang="html"> <template lang="html">
<b-card class="mt-4" no-body> <b-card
<b-tabs card> class="mt-4"
<b-tab title="Game details" active> no-body
<template v-slot:title> :bg-variant="nightMode ? 'dark' : ''"
<b-skeleton width="80px" /> :text-variant="nightMode ? 'white' : ''"
</template> >
<dl class="row"> <dl class="row">
<dt class="col-sm-3">{{ $t('board.gameModal.platforms') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.platforms') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.timeToBeat') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.timeToBeat') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
<dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt> <dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt>
<dd class="col-sm-9"> <dd class="col-sm-9">
<b-skeleton /> <b-skeleton />
</dd> </dd>
</dl> </dl>
</b-tab>
<b-tab title="Game details">
<template v-slot:title>
<b-skeleton width="80px" />
</template>
</b-tab>
<b-tab title="Game details">
<template v-slot:title>
<b-skeleton width="80px" />
</template>
</b-tab>
</b-tabs>
</b-card> </b-card>
<!-- <div class="game-detail-placeholder">
<div class="game-hero" />
<div class="game-detail-container">
<div class="game-detail">
<img :src="coverUrl" :alt="gamePreviewData.name" class="game-cover">
<div>
<h2>{{ gamePreviewData.name }}</h2>
<placeholder :lines="3" />
</div>
</div>
</div>
</div> -->
</template> </template>
<script> <script>
import { mapState } from 'vuex'; import { mapState, mapGetters } from 'vuex';
export default { export default {
props: { props: {
@ -91,6 +62,7 @@ export default {
computed: { computed: {
...mapState(['games']), ...mapState(['games']),
...mapGetters(['nightMode']),
gamePreviewData() { gamePreviewData() {
return this.games[this.id]; return this.games[this.id];