mirror of
https://github.com/romancm/gamebrary
synced 2024-12-19 15:53:06 +00:00
game modal clean up
This commit is contained in:
Gamebrary
parent
878e6b6278
commit
18b5cb6eaa
4 changed files with 23 additions and 199 deletions
|
|
@ -1,170 +0,0 @@
|
|||
<template lang="html">
|
||||
<b-card
|
||||
class="mt-4"
|
||||
no-body
|
||||
:bg-variant="nightMode ? 'dark' : ''"
|
||||
:text-variant="nightMode ? 'white' : ''"
|
||||
>
|
||||
<dl class="row">
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.platforms') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.timeToBeat') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt>
|
||||
<dd class="col-sm-9">
|
||||
<b-skeleton />
|
||||
</dd>
|
||||
</dl>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
type: [Number, String],
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['games']),
|
||||
...mapGetters(['nightMode']),
|
||||
|
||||
gamePreviewData() {
|
||||
return this.games[this.id];
|
||||
},
|
||||
|
||||
coverUrl() {
|
||||
const game = this.games[this.id];
|
||||
|
||||
return game.cover && game.cover.image_id
|
||||
? `https://images.igdb.com/igdb/image/upload/t_cover_small_2x/${game.cover.image_id}.jpg`
|
||||
: '/static/no-image.jpg';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.game-detail-placeholder {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background: var(--modal-background);
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
|
||||
.game-hero {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 400px;
|
||||
z-index: 2;
|
||||
|
||||
@media(max-width: 780px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
border: 5px solid #a5a2a2;
|
||||
background-size: contain;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
@media(max-width: 780px) {
|
||||
border: 3px solid #a5a2a2;
|
||||
height: auto;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.game-detail-container {
|
||||
-webkit-box-shadow: 0 0 2px 0 #a5a2a2;
|
||||
box-shadow: 0 0 2px 0 #a5a2a2;
|
||||
width: 900px;
|
||||
max-width: 100%;
|
||||
z-index: 2;
|
||||
margin: 3rem;
|
||||
padding: 1rem 0;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
@media(max-width: 780px) {
|
||||
margin: 0;
|
||||
padding-top: 3rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.game-detail {
|
||||
display: grid;
|
||||
grid-template-columns: 180px auto;
|
||||
grid-gap: 2rem;
|
||||
margin: 0 1rem;
|
||||
|
||||
@media(max-width: 780px) {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
--placeholder-image-width: 175px;
|
||||
--placeholder-image-height: 220px;
|
||||
|
||||
@media(max-width: 780px) {
|
||||
--placeholder-image-width: 240px;
|
||||
--placeholder-image-height: 300px;
|
||||
width: 240px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.game-title {
|
||||
--placeholder-text-height: 30px;
|
||||
width: 50%;
|
||||
|
||||
@media(max-width: 780px) {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.game-rating {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +1,31 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<dl class="row">
|
||||
<!-- TODO: plural vs singular translations? -->
|
||||
<dt class="col-sm-5">{{ $t('board.gameModal.platforms') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ platforms }}</dd>
|
||||
<dl>
|
||||
<!-- TODO: plural vs singular translations? -->
|
||||
<dt class="w-100">{{ $t('board.gameModal.platforms') }}</dt>
|
||||
<dd class="text-wrap">{{ platforms }}</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.genres') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ genres }}</dd>
|
||||
<dt class="w-100">{{ $t('board.gameModal.genres') }}</dt>
|
||||
<dd class="text-wrap">{{ genres }}</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.gameModes') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ gameModes }}</dd>
|
||||
<dt class="w-100">{{ $t('board.gameModal.gameModes') }}</dt>
|
||||
<dd class="text-wrap">{{ gameModes }}</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.developers') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ gameDevelopers }}</dd>
|
||||
<dt class="w-100">{{ $t('board.gameModal.developers') }}</dt>
|
||||
<dd class="text-wrap">{{ gameDevelopers }}</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.publishers') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ gamePublishers }}</dd>
|
||||
<dt class="w-100">{{ $t('board.gameModal.publishers') }}</dt>
|
||||
<dd class="text-wrap">{{ gamePublishers }}</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.perspective') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ playerPerspectives }}</dd>
|
||||
<dt class="w-100">{{ $t('board.gameModal.perspective') }}</dt>
|
||||
<dd class="text-wrap">{{ playerPerspectives }}</dd>
|
||||
|
||||
<dt class="col-sm-3">{{ $t('board.gameModal.ageRatings') }}</dt>
|
||||
<dd class="col-sm-9 text-wrap">{{ ageRatings }}</dd>
|
||||
<dt class="w-100">{{ $t('board.gameModal.ageRatings') }}</dt>
|
||||
<dd class="text-wrap">{{ ageRatings }}</dd>
|
||||
|
||||
<!-- TODO: add release dates -->
|
||||
<!-- {{ $t('board.gameModal.releaseDate') }} -->
|
||||
<!-- <pre>{{ game.release_dates }}</pre> -->
|
||||
</dl>
|
||||
</div>
|
||||
<!-- TODO: add release dates -->
|
||||
<!-- {{ $t('board.gameModal.releaseDate') }} -->
|
||||
<!-- <pre>{{ game.release_dates }}</pre> -->
|
||||
</dl>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -117,8 +117,6 @@
|
|||
|
||||
<template v-if="loading">
|
||||
<b-skeleton v-for="n in 3" :key="n" />
|
||||
|
||||
<game-detail-placeholder />
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
|
|
@ -139,7 +137,6 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import GameDetailPlaceholder from '@/components/Game/GameDetailPlaceholder';
|
||||
import GameDetails from '@/components/Game/GameDetails';
|
||||
import GameNotesTab from '@/components/Game/GameNotesTab';
|
||||
import GameScreenshots from '@/components/Game/GameScreenshots';
|
||||
|
|
@ -155,7 +152,6 @@ export default {
|
|||
components: {
|
||||
GameTags,
|
||||
IgdbLogo,
|
||||
GameDetailPlaceholder,
|
||||
GameDetails,
|
||||
GameNotesTab,
|
||||
GameScreenshots,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template lang="html">
|
||||
<div v-if="game.websites">
|
||||
<dl class="row mb-0" v-for="link in game.websites" :key="link.id">
|
||||
<dl v-for="link in game.websites" :key="link.id">
|
||||
<!-- TODO: research which links can be leveraged to get API data,
|
||||
e.g. wikipedia article, wikia, etc -->
|
||||
<dt class="col-sm-3">{{ linkTypes[link.category]}}</dt>
|
||||
<dd class="col-sm-9"><a :href="link.url" target="_blank">{{ link.url }}</a></dd>
|
||||
<dt class="w-100">{{ linkTypes[link.category]}}</dt>
|
||||
<dd class="text-truncate d-block"><a :href="link.url" target="_blank">{{ link.url }}</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue