mirror of
https://github.com/romancm/gamebrary
synced 2024-11-28 14:10:26 +00:00
Show game screenshot on dashboard
This commit is contained in:
Gamebrary
parent
5fe4ce98fb
commit
a018552b07
2 changed files with 145 additions and 101 deletions
|
|
@ -1,121 +1,134 @@
|
|||
<template lang="html">
|
||||
<div class="container-fluid dashboard">
|
||||
<h5 class="mb-3 text-center">
|
||||
Welcome to Gamebrary, the open source video game collection management tool.
|
||||
</h5>
|
||||
<div>
|
||||
<b-jumbotron
|
||||
header="Welcome to Gamebrary"
|
||||
text-variant="white"
|
||||
header-level="4"
|
||||
class="text-center rounded-0"
|
||||
lead="The open source video game collection management tool."
|
||||
:style="`
|
||||
background-image: url('${ coverScreenshot }');
|
||||
background-size: cover;
|
||||
height: 50vh;
|
||||
`"
|
||||
>
|
||||
<small v-if="coverGame">Screenshot from <strong>{{ coverGame.name }}</strong></small>
|
||||
</b-jumbotron>
|
||||
|
||||
<b-tabs
|
||||
v-model="activeTab"
|
||||
pills
|
||||
card
|
||||
no-fade
|
||||
vertical
|
||||
nav-wrapper-class="col-12 col-sm-auto"
|
||||
nav-class="rounded p-0 bg-transparent mb-4 mb-sm-0 mr-sm-3"
|
||||
content-class="rounded p-0"
|
||||
>
|
||||
<b-tab title-link-class="p-2 px-5" title="Boards" active>
|
||||
<boards />
|
||||
</b-tab>
|
||||
<div class="container dashboard">
|
||||
<b-tabs
|
||||
v-model="activeTab"
|
||||
pills
|
||||
card
|
||||
no-fade
|
||||
vertical
|
||||
nav-wrapper-class="col-12 col-sm-auto"
|
||||
nav-class="rounded p-0 bg-transparent mb-4 mb-sm-0 mr-sm-3"
|
||||
content-class="rounded p-0"
|
||||
>
|
||||
<b-tab title-link-class="p-2 px-5" title="Boards" active>
|
||||
<boards />
|
||||
</b-tab>
|
||||
|
||||
<b-tab title-link-class="p-2 px-5" title="Settings">
|
||||
<h5 class="mb-2">Settings</h5>
|
||||
<b-tab title-link-class="p-2 px-5" title="Settings">
|
||||
<h5 class="mb-2">Settings</h5>
|
||||
|
||||
<b-form-row>
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card
|
||||
v-b-modal:tags-settings
|
||||
class="clickable w-100"
|
||||
<b-form-row>
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<b-icon icon="tags" />
|
||||
Manage game tags
|
||||
</template>
|
||||
<b-card
|
||||
v-b-modal:tags-settings
|
||||
class="clickable w-100"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<b-icon icon="tags" />
|
||||
Manage game tags
|
||||
</template>
|
||||
|
||||
<p>Tags are a great way to organize and manage your video game collection.
|
||||
Add, edit or delete tags.</p>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<p>Tags are a great way to organize and manage your video game collection.
|
||||
Add, edit or delete tags.</p>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card
|
||||
v-b-modal:wallpapers
|
||||
header="Wallpapers"
|
||||
class="clickable w-100"
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card-text>
|
||||
Manage board wallpapers
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-card
|
||||
v-b-modal:wallpapers
|
||||
header="Wallpapers"
|
||||
class="clickable w-100"
|
||||
>
|
||||
<b-card-text>
|
||||
Manage board wallpapers
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card
|
||||
v-b-modal:language
|
||||
header="Language"
|
||||
class="clickable w-100"
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card-text>
|
||||
Change language
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</b-col>
|
||||
<b-card
|
||||
v-b-modal:language
|
||||
header="Language"
|
||||
class="clickable w-100"
|
||||
>
|
||||
<b-card-text>
|
||||
Change language
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card
|
||||
v-b-modal:themes
|
||||
header="Theme"
|
||||
class="clickable w-100"
|
||||
<b-col
|
||||
class="d-flex mt-2"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<b-card-text>
|
||||
Change UI theme
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-form-row>
|
||||
</b-tab>
|
||||
<b-card
|
||||
v-b-modal:themes
|
||||
header="Theme"
|
||||
class="clickable w-100"
|
||||
>
|
||||
<b-card-text>
|
||||
Change UI theme
|
||||
</b-card-text>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-form-row>
|
||||
</b-tab>
|
||||
|
||||
<b-tab title-link-class="p-2 px-5" lazy>
|
||||
<template v-slot:title>
|
||||
Releases <b-badge variant="success" v-if="notification">New!</b-badge>
|
||||
</template>
|
||||
<b-tab title-link-class="p-2 px-5" lazy>
|
||||
<template v-slot:title>
|
||||
Releases <b-badge variant="success" v-if="notification">New!</b-badge>
|
||||
</template>
|
||||
|
||||
<h5 class="mb-2">Releases</h5>
|
||||
<p>An archive of every release we’ve done that we have a record of.</p>
|
||||
<h5 class="mb-2">Releases</h5>
|
||||
<p>An archive of every release we’ve done that we have a record of.</p>
|
||||
|
||||
<releases class="overflow-auto vh-100" />
|
||||
</b-tab>
|
||||
<releases />
|
||||
</b-tab>
|
||||
|
||||
<b-tab title-link-class="p-2 px-5" title="Account" lazy>
|
||||
<h5 class="mb-2">Account</h5>
|
||||
<b-tab title-link-class="p-2 px-5" title="Account" lazy>
|
||||
<h5 class="mb-2">Account</h5>
|
||||
|
||||
<account />
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
<account />
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
|
||||
<page-footer />
|
||||
</div>
|
||||
|
|
@ -139,11 +152,33 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
activeTab: 0,
|
||||
coverGame: null,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['notification']),
|
||||
|
||||
coverScreenshot() {
|
||||
const baseUrl = 'https://images.igdb.com/igdb/image/upload/t_screenshot_huge_2x/';
|
||||
return this.coverGame && this.coverGame.screenshots.length
|
||||
? `${baseUrl}${this.coverGame.screenshots[0].image_id}.jpg`
|
||||
: '';
|
||||
},
|
||||
},
|
||||
|
||||
async mounted() {
|
||||
const randomNumber = Math.floor(Math.random() * 49);
|
||||
|
||||
const popularGames = await this.$store.dispatch('LOAD_POPULAR_GAMES');
|
||||
|
||||
this.coverGame = popularGames[randomNumber];
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.jumbotron {
|
||||
text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,15 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
LOAD_POPULAR_GAMES() {
|
||||
return new Promise((resolve, reject) => {
|
||||
axios.get(`${API_BASE}/popularGames`)
|
||||
.then(({ data }) => {
|
||||
resolve(data);
|
||||
}).catch(reject);
|
||||
});
|
||||
},
|
||||
|
||||
LOAD_BOARDS({ state, commit }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const db = firebase.firestore();
|
||||
|
|
|
|||
Loading…
Reference in a new issue