2019-01-11 20:20:21 +00:00
|
|
|
<template lang="html">
|
2019-01-17 06:21:41 +00:00
|
|
|
<div :class="['game-detail-placeholder', { dark: darkModeEnabled }]">
|
|
|
|
<div class="game-hero" />
|
2019-01-11 20:20:21 +00:00
|
|
|
|
2019-01-17 06:21:41 +00:00
|
|
|
<div class="game-detail-container">
|
|
|
|
<div class="game-detail">
|
2019-05-03 04:53:16 +00:00
|
|
|
<img :src="coverUrl" alt="">
|
2019-01-11 20:20:21 +00:00
|
|
|
|
2019-01-17 06:21:41 +00:00
|
|
|
<div>
|
2019-05-03 04:53:16 +00:00
|
|
|
<h2>{{ gamePreviewData.name }}</h2>
|
|
|
|
<game-rating :rating="gamePreviewData.rating" placeholder />
|
2019-01-17 06:21:41 +00:00
|
|
|
<placeholder :lines="5" />
|
2019-01-11 20:20:21 +00:00
|
|
|
</div>
|
2019-01-17 06:21:41 +00:00
|
|
|
|
2019-01-11 20:20:21 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-05-03 04:53:16 +00:00
|
|
|
import { mapState, mapGetters } from 'vuex';
|
2019-02-08 06:13:48 +00:00
|
|
|
import GameRating from '@/components/GameDetail/GameRating';
|
2019-01-11 20:20:21 +00:00
|
|
|
import Placeholder from '@/components/Placeholder/Placeholder';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
components: {
|
2019-02-08 06:13:48 +00:00
|
|
|
GameRating,
|
2019-01-11 20:20:21 +00:00
|
|
|
Placeholder,
|
|
|
|
},
|
2019-01-17 06:21:41 +00:00
|
|
|
|
2019-05-03 04:53:16 +00:00
|
|
|
props: {
|
|
|
|
id: [Number, String],
|
|
|
|
},
|
|
|
|
|
2019-01-17 06:21:41 +00:00
|
|
|
computed: {
|
|
|
|
...mapGetters(['darkModeEnabled']),
|
2019-05-03 04:53:16 +00:00
|
|
|
...mapState(['games']),
|
|
|
|
|
|
|
|
gamePreviewData() {
|
|
|
|
return this.games[this.id];
|
|
|
|
},
|
|
|
|
|
|
|
|
coverUrl() {
|
|
|
|
const url = 'https://images.igdb.com/igdb/image/upload/t_cover_small_2x/';
|
|
|
|
|
|
|
|
return this.games && this.games[this.id].cover
|
|
|
|
? `${url}${this.games[this.id].cover.cloudinary_id}.jpg`
|
|
|
|
: '/static/no-image.jpg';
|
|
|
|
},
|
2019-01-17 06:21:41 +00:00
|
|
|
},
|
2019-01-11 20:20:21 +00:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" rel="stylesheet/scss" scoped>
|
2019-04-05 19:16:32 +00:00
|
|
|
@import "~styles/styles.scss";
|
2019-01-11 20:20:21 +00:00
|
|
|
|
2019-01-17 06:21:41 +00:00
|
|
|
.game-detail-placeholder {
|
2019-01-11 20:20:21 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
background: $color-light-gray;
|
|
|
|
min-height: calc(100vh - #{$navHeight});
|
|
|
|
|
|
|
|
&.dark {
|
2019-01-17 06:21:41 +00:00
|
|
|
background: $color-darkest-gray;
|
|
|
|
|
2019-01-11 20:20:21 +00:00
|
|
|
.game-detail-container {
|
2019-01-17 06:21:41 +00:00
|
|
|
background-color: $color-dark-gray;
|
2019-01-11 20:20:21 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-hero {
|
|
|
|
background-color: $color-dark-gray;
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
left: 0;
|
|
|
|
height: 400px;
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
@media($small) {
|
2019-01-17 06:21:41 +00:00
|
|
|
display: none;
|
2019-01-11 20:20:21 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-detail-container {
|
2019-01-17 06:21:41 +00:00
|
|
|
background-color: $color-white;
|
2019-01-11 20:20:21 +00:00
|
|
|
-webkit-box-shadow: 0 0 2px 0 $color-gray;
|
|
|
|
box-shadow: 0 0 2px 0 $color-gray;
|
|
|
|
width: $container-width;
|
|
|
|
max-width: 100%;
|
|
|
|
z-index: 1;
|
2019-02-08 06:13:48 +00:00
|
|
|
margin: $gp * 3;
|
2019-01-11 20:20:21 +00:00
|
|
|
padding: $gp 0;
|
|
|
|
border-radius: $border-radius;
|
|
|
|
|
2019-01-17 06:21:41 +00:00
|
|
|
@media($small) {
|
|
|
|
margin: 0;
|
2019-04-26 19:16:20 +00:00
|
|
|
padding-top: $gp * 3;
|
2019-01-17 06:21:41 +00:00
|
|
|
border-radius: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-detail {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 180px auto;
|
|
|
|
grid-gap: $gp * 2;
|
|
|
|
margin: 0 $gp;
|
|
|
|
|
|
|
|
@media($small) {
|
|
|
|
grid-template-columns: auto;
|
2019-01-11 20:20:21 +00:00
|
|
|
}
|
2019-01-17 06:21:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.game-cover {
|
|
|
|
--placeholder-image-width: 175px;
|
|
|
|
--placeholder-image-height: 220px;
|
2019-01-11 20:20:21 +00:00
|
|
|
|
2019-01-17 06:21:41 +00:00
|
|
|
@media($small) {
|
|
|
|
--placeholder-image-width: 240px;
|
|
|
|
--placeholder-image-height: 300px;
|
|
|
|
width: 240px;
|
|
|
|
margin: 0 auto;
|
2019-01-11 20:20:21 +00:00
|
|
|
}
|
2019-01-17 06:21:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.game-title {
|
|
|
|
--placeholder-text-height: 30px;
|
|
|
|
width: 50%;
|
2019-01-11 20:20:21 +00:00
|
|
|
|
|
|
|
@media($small) {
|
2019-01-17 06:21:41 +00:00
|
|
|
width: 50%;
|
|
|
|
margin: 0 auto;
|
2019-01-11 20:20:21 +00:00
|
|
|
}
|
|
|
|
}
|
2019-02-08 06:13:48 +00:00
|
|
|
|
|
|
|
.game-rating {
|
|
|
|
margin-bottom: $gp;
|
|
|
|
}
|
2019-01-11 20:20:21 +00:00
|
|
|
</style>
|