mirror of
https://github.com/romancm/gamebrary
synced 2024-09-20 05:41:57 +00:00
ui updates
This commit is contained in:
Gamebrary
parent
38d50b68ad
commit
53b116b69d
19 changed files with 354 additions and 385 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<template lang="html">
|
||||
<div class="d-flex mx-2">
|
||||
<div class="d-flex mx-1">
|
||||
<div
|
||||
v-for="(list, index) in board.lists"
|
||||
:class="`ml-2 list ${getListView(list)}`"
|
||||
:class="`mr-3 list ${getListView(list)}`"
|
||||
:key="index"
|
||||
>
|
||||
<b-card
|
||||
|
|
@ -88,8 +88,8 @@
|
|||
<b-card
|
||||
v-else
|
||||
no-body
|
||||
:bg-variant="darkTheme ? 'dark' : 'light'"
|
||||
img-left
|
||||
|
||||
>
|
||||
<b-card-body class="p-2">
|
||||
<b-skeleton class="m-0" />
|
||||
|
|
|
|||
|
|
@ -199,6 +199,7 @@ $boardHeight: 200px;
|
|||
background-size: cover;
|
||||
height: $boardHeight;
|
||||
min-width: 300px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.board {
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@
|
|||
|
||||
<b-dropdown
|
||||
:class="['d-md-none', { 'mr-2': !isVerticalNav }]"
|
||||
:variant="darkTheme ? 'secondary' : 'light'"
|
||||
:variant="darkTheme ? 'black' : 'light'"
|
||||
no-caret
|
||||
>
|
||||
<template #button-content>
|
||||
<i class="fa-solid fa-ellipsis fa-fw" />
|
||||
<i class="fa-solid fa-ellipsis" />
|
||||
</template>
|
||||
<b-dropdown-item-button @click="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })">
|
||||
Add note
|
||||
|
|
|
|||
|
|
@ -1,25 +1,13 @@
|
|||
<template lang="html">
|
||||
<!-- TODO: add menu: allow to remove game from board, view board, edit board, etc... -->
|
||||
<div v-if="user && boardsWithGame.length" class="mt-5">
|
||||
<h3>Found in these boards: </h3>
|
||||
|
||||
<div v-if="user && boardsWithGame.length">
|
||||
<div class="board-grid">
|
||||
<b-dropdown
|
||||
<mini-board
|
||||
v-for="board in boardsWithGame"
|
||||
:key="board.id"
|
||||
variant="transparent"
|
||||
toggle-class="p-0"
|
||||
no-caret
|
||||
>
|
||||
<template #button-content>
|
||||
<mini-board
|
||||
:board="board"
|
||||
/>
|
||||
</template>
|
||||
<b-dropdown-item disabled>Remove game from board</b-dropdown-item>
|
||||
<b-dropdown-item :to="{ name: 'board.edit', params: { id: board.id } }">Edit board</b-dropdown-item>
|
||||
<b-dropdown-item @click="handleBoardClick(board.id)">View board</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
:board="board"
|
||||
@click.native="handleBoardClick(board.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- TODO: fix set as wallpaper logic -->
|
||||
<template lang="html">
|
||||
<div>
|
||||
<section>
|
||||
<masonry
|
||||
v-if="activeIndex === null"
|
||||
gutter="8px"
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
</modal-header>
|
||||
</template>
|
||||
</b-modal> -->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
49
src/components/Game/GamePageTile.vue
Normal file
49
src/components/Game/GamePageTile.vue
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div :class="full ? 'full-tile w-100' : 'half-tile'">
|
||||
<section :class="['p-3 rounded my-3 m-3', darkTheme ? 'bg-dark text-light' : 'bg-light']">
|
||||
<h3>{{ title }}</h3>
|
||||
|
||||
<div :class="['rounded', { 'half-height-scrollable': !full }]">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
full: Boolean,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters(['darkTheme']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.half-tile {
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
overflow: hidden !important;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
width: auto;
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.full-tile {
|
||||
width: 100vw;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.half-height-scrollable {
|
||||
height: calc(50vh - 94px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -82,10 +82,9 @@ export default {
|
|||
|
||||
await this.$store.dispatch('SAVE_PROGRESSES_NO_MERGE');
|
||||
this.progress = 0;
|
||||
this.$bus.$emit('ALERT', { message: 'Progress deleted' });
|
||||
this.$bvToast.toast('Progress deleted');
|
||||
} catch (e) {
|
||||
this.$bus.$emit('ALERT', { type: 'error', message: 'Error deleting progress' });
|
||||
this.$bvToast.toast('There was an error deleting your progress', { title: `${name} progress`, variant: 'error' });
|
||||
this.$bvToast.toast('There was an error deleting your progress', { variant: 'error' });
|
||||
}
|
||||
|
||||
this.editing = false;
|
||||
|
|
@ -103,10 +102,10 @@ export default {
|
|||
|
||||
await this.$store.dispatch('SAVE_PROGRESSES');
|
||||
|
||||
this.$bus.$emit('ALERT', { type: 'success', message: 'Progress saved' });
|
||||
this.$bvToast.toast('Progress saved');
|
||||
} catch (e) {
|
||||
this.saving = false;
|
||||
this.$bus.$emit('ALERT', { type: 'error', message: 'Error saving progress' });
|
||||
this.$bvToast.toast('There was an error saving your progress', { variant: 'error' });
|
||||
}
|
||||
|
||||
this.editing = false;
|
||||
|
|
|
|||
|
|
@ -1,78 +1,52 @@
|
|||
<template lang="html">
|
||||
<section v-if="similarGames.length" class="mt-3">
|
||||
<div class="d-flex align-items-center justify-content-between mb-2 w-100">
|
||||
<h3>You may also like</h3>
|
||||
|
||||
<b-button-group v-if="pages > 1">
|
||||
<b-button :disabled="!showPrevButton" @click="page = page - 1">
|
||||
<i class="fa-solid fa-chevron-left" />
|
||||
</b-button>
|
||||
|
||||
<b-button :disabled="!showNextButton" @click="page = page + 1">
|
||||
<i class="fa-solid fa-chevron-right" />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</div>
|
||||
|
||||
<div class="game-grid">
|
||||
<router-link
|
||||
v-for="game in slicedSimilarGames"
|
||||
:key="game.id"
|
||||
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
|
||||
<template>
|
||||
<section v-if="similarGames.length">
|
||||
<div class="media-grid rounded">
|
||||
<masonry
|
||||
gutter="8px"
|
||||
:cols="{ default: 4, 1200: 3, 768: 3, 480: 2 }"
|
||||
>
|
||||
<b-img
|
||||
fluid
|
||||
rounded
|
||||
:src="$options.getImageUrl(game)"
|
||||
:alt="game.name"
|
||||
img-top
|
||||
<game-card-search
|
||||
v-for="game in similarGames"
|
||||
:game="game"
|
||||
:key="game.id"
|
||||
/>
|
||||
</router-link>
|
||||
</masonry>
|
||||
</div>
|
||||
|
||||
<!-- <router-link
|
||||
v-for="game in similarGames"
|
||||
:key="game.id"
|
||||
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
|
||||
>
|
||||
<b-img
|
||||
fluid
|
||||
rounded
|
||||
:src="$options.getImageUrl(game)"
|
||||
:alt="game.name"
|
||||
img-top
|
||||
/>
|
||||
</router-link> -->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GameCardSearch from '@/components/GameCards/GameCardSearch';
|
||||
import { mapState } from 'vuex';
|
||||
import { getImageUrl } from '@/utils';
|
||||
import { GAME_CAROUSEL_PAGE_SIZE } from '@/constants';
|
||||
|
||||
export default {
|
||||
getImageUrl,
|
||||
|
||||
data() {
|
||||
return {
|
||||
page: 0,
|
||||
}
|
||||
components: {
|
||||
GameCardSearch,
|
||||
},
|
||||
|
||||
getImageUrl,
|
||||
|
||||
computed: {
|
||||
...mapState(['game']),
|
||||
|
||||
showNextButton() {
|
||||
return this.page < this.pages - 1;
|
||||
},
|
||||
|
||||
showPrevButton() {
|
||||
return this.page > 0;
|
||||
},
|
||||
|
||||
pages() {
|
||||
const gameCount = this.similarGames?.length;
|
||||
|
||||
if (!gameCount) return;
|
||||
|
||||
return Math.ceil(gameCount / GAME_CAROUSEL_PAGE_SIZE);
|
||||
},
|
||||
|
||||
similarGames() {
|
||||
return this.game?.similar_games || [];
|
||||
},
|
||||
|
||||
slicedSimilarGames() {
|
||||
const offset = GAME_CAROUSEL_PAGE_SIZE * this.page;
|
||||
return this.similarGames?.slice(offset, offset + GAME_CAROUSEL_PAGE_SIZE);
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -86,3 +60,10 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.media-grid {
|
||||
height: calc(50vh - 94px);
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template lang="html">
|
||||
<b-card
|
||||
no-body
|
||||
:bg-variant="darkTheme ? 'dark' : 'white'"
|
||||
:text-variant="darkTheme ? 'white' : 'dark'"
|
||||
:bg-variant="darkTheme ? 'black' : 'white'"
|
||||
:text-variant="darkTheme ? 'white' : 'black'"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<b-row no-gutters v-if="game && game.name">
|
||||
|
|
@ -29,6 +29,20 @@
|
|||
Note
|
||||
</b-link>
|
||||
|
||||
<template v-if="tagsApplied.length === 1">
|
||||
<b-button
|
||||
v-for="({ bgColor, textColor, name }) in tagsApplied"
|
||||
:key="name"
|
||||
rounded
|
||||
class="mr-1 mb-1 py-0 px-1"
|
||||
size="sm"
|
||||
variant="transparent"
|
||||
:style="`background-color: ${bgColor}; color: ${textColor}`"
|
||||
>
|
||||
<small>{{ name }}</small>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<b-link
|
||||
v-if="tagsApplied.length"
|
||||
:id="`${gameId}-${listIndex}`"
|
||||
|
|
|
|||
|
|
@ -236,12 +236,11 @@ export default {
|
|||
this.saving = false;
|
||||
|
||||
this.$bvToast.toast('There was an error deleting list', { variant: 'danger' });
|
||||
this.$bus.$emit('ALERT', { type: 'error', message: 'Error deleting list' });
|
||||
});
|
||||
|
||||
this.saving = false;
|
||||
this.$bvModal.hide('edit-list-modal');
|
||||
this.$bus.$emit('ALERT', { type: 'success', message: 'List deleted' });
|
||||
this.$bvToast.toast('List deleted');
|
||||
},
|
||||
|
||||
async saveList() {
|
||||
|
|
|
|||
|
|
@ -144,9 +144,9 @@ export default {
|
|||
await this.$store.dispatch('SAVE_GAME_BOARD', board);
|
||||
await this.$store.dispatch('LOAD_BOARD', board.id);
|
||||
await this.$store.dispatch('LOAD_IGDB_GAMES', [gameId]);
|
||||
this.$bus.$emit('ALERT', { type: 'success', message: 'Game added' });
|
||||
this.$bvToast.toast('Game added');
|
||||
} catch (e) {
|
||||
// this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
|
||||
this.$bvToast.toast('There was an error adding game', { variant: 'danger' });
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,50 +1,40 @@
|
|||
<!-- TODO: remove alert, use toast, style toast -->
|
||||
<!-- // LanguageSettings,
|
||||
// SteamSettingsPage,
|
||||
// import SteamSettingsPage from '@/pages/SteamSettingsPage';
|
||||
// import LanguageSettings from '@/components/Settings/LanguageSettings'; -->
|
||||
<!-- TODO: allow to collapse menu -->
|
||||
|
||||
<template lang="html">
|
||||
<div class="page-header position-relative">
|
||||
<header :class="[darkTheme ? 'bg-dark' : 'bg-white', isVerticalNav ? 'py-3 px-2' : 'px-3 py-2', `nav-${navPosition}`]">
|
||||
<!-- TODO: allow to collapse menu -->
|
||||
<div :class="['alert', alertType, { visible }]">
|
||||
<div class="d-flex align-items-center">
|
||||
<i :class="['fa-solid fa-info text-white mr-2', alertIcon]" />
|
||||
<strong>{{ alert.message }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<header :class="[darkTheme ? 'bg-dark' : 'bg-white', isVerticalNav ? 'p-2' : 'px-3 py-2', `nav-${navPosition}`]">
|
||||
<main-menu :class="isVerticalNav ? ' mb-2' : ''" />
|
||||
|
||||
<main-menu :class="isVerticalNav ? ' mb-2' : ''" />
|
||||
<portal-target
|
||||
v-if="!isVerticalNav"
|
||||
class="ml-3"
|
||||
name="pageTitle"
|
||||
multiple
|
||||
/>
|
||||
|
||||
<portal-target
|
||||
v-if="!isVerticalNav"
|
||||
class="ml-3"
|
||||
name="pageTitle"
|
||||
multiple
|
||||
/>
|
||||
<div :class="['align-items-center d-flex ml-auto', isVerticalNav ? 'h-100 flex-column' : '']">
|
||||
<portal-target name="headerActions" multiple />
|
||||
|
||||
<div :class="['align-items-center d-flex ml-auto', isVerticalNav ? 'h-100 flex-column' : '']">
|
||||
<portal-target name="headerActions" multiple />
|
||||
<b-button
|
||||
:variant="darkTheme ? 'black' : 'light'"
|
||||
:class="isVerticalNav ? 'mt-auto mb-2' : ''"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
<i class="fa fa-search" aria-hidden="true" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
:variant="darkTheme ? 'black' : 'light'"
|
||||
:class="isVerticalNav ? 'mt-auto mb-2' : ''"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
<i class="fa fa-fw fa-search" aria-hidden="true" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-if="!user"
|
||||
class="ml-2"
|
||||
variant="black"
|
||||
:to="{ name: 'auth' }"
|
||||
>
|
||||
Get started — it's free!
|
||||
</b-button>
|
||||
</div>
|
||||
</header>
|
||||
<b-button
|
||||
v-if="!user"
|
||||
class="ml-2"
|
||||
variant="black"
|
||||
:to="{ name: 'auth' }"
|
||||
>
|
||||
Get started — it's free!
|
||||
</b-button>
|
||||
</div>
|
||||
<!-- <b-collapse id="header">
|
||||
|
||||
</b-collapse> -->
|
||||
|
|
@ -58,7 +48,7 @@
|
|||
>
|
||||
<i class="fa-solid fa-caret-down" />
|
||||
</b-button> -->
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -70,29 +60,10 @@ export default {
|
|||
MainMenu,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
alert: {},
|
||||
visible: false,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$bus.$on('ALERT', this.setAlert);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
this.$bus.$off('ALERT');
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user', 'settings']),
|
||||
...mapGetters(['darkTheme', 'navPosition', 'isVerticalNav']),
|
||||
|
||||
alertType() {
|
||||
return this.alert?.type;
|
||||
},
|
||||
|
||||
isTopNav() {
|
||||
return this.navPosition === 'top';
|
||||
},
|
||||
|
|
@ -104,24 +75,6 @@ export default {
|
|||
isSearchPage() {
|
||||
return this.$route.name === 'search';
|
||||
},
|
||||
|
||||
alertIcon() {
|
||||
if (this.alertType === 'error') return 'fa-triangle-exclamation';
|
||||
if (this.alertType === 'success') return 'fa-check';
|
||||
|
||||
return 'fa-info';
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
setAlert(alert) {
|
||||
this.alert = alert;
|
||||
this.visible = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.visible = false;
|
||||
}, 2000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -158,52 +111,11 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
.header-toggle {
|
||||
position: absolute;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
left: calc(50vw - 15px);
|
||||
background: var(--light);
|
||||
}
|
||||
|
||||
.alert {
|
||||
position: fixed;
|
||||
height: 40px;
|
||||
// max-width: calc(100% - 2rem);
|
||||
// min-width: 240px;
|
||||
// width: auto;
|
||||
z-index: 3;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--light);
|
||||
right: -75vw;
|
||||
transition: right 300ms ease 0s;
|
||||
width: 340px;
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
@media(max-width: 780px) {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
@media(max-width: 480px) {
|
||||
width: calc(100vw - 1rem - 42px);
|
||||
right: -100vw;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
right: -2rem;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
&.error {
|
||||
background: var(--danger);
|
||||
}
|
||||
}
|
||||
// .header-toggle {
|
||||
// position: absolute;
|
||||
// padding: 0;
|
||||
// width: 30px;
|
||||
// left: calc(50vw - 15px);
|
||||
// background: var(--light);
|
||||
// }
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<i
|
||||
v-else
|
||||
class="fas fa-search fa-fw"
|
||||
class="fas fa-search"
|
||||
aria-hidden
|
||||
/>
|
||||
</b-button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,15 @@
|
|||
<template lang="html">
|
||||
<div v-if="!loading && !game" class="pt-5">
|
||||
<div class="d-flex justify-content-center align-items-center">
|
||||
<h1 class="mr-3 pr-3 align-top border-right border-danger inline-block align-content-center text-danger">404</h1>
|
||||
<div class="inline-block align-middle">
|
||||
<h2 class="font-weight-normal lead text-danger">Game was not found.</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section
|
||||
v-else
|
||||
:class="[{ 'text-light': darkTheme && hasWallpaper, 'pt-3': !hasArtworks }, 'game-page pb-5']"
|
||||
:style="background && this.darkTheme ? `background-image: url(${background})` : ''"
|
||||
>
|
||||
|
|
@ -217,17 +227,6 @@
|
|||
class="pt-3"
|
||||
>
|
||||
<b-row>
|
||||
<b-alert
|
||||
v-if="note"
|
||||
v-html="note"
|
||||
show
|
||||
class="cursor-pointer mt-3"
|
||||
variant="warning"
|
||||
@click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
|
||||
/>
|
||||
|
||||
<game-progress />
|
||||
|
||||
<b-col cols="6" sm="4" md="3" lg="12" v-if="gameGenres">
|
||||
<h4 class="mt-3">Genres: </h4>
|
||||
|
||||
|
|
@ -363,58 +362,6 @@
|
|||
</div>
|
||||
</b-col> -->
|
||||
|
||||
<b-col cols="6" sm="4" md="3" lg="12" v-if="gameRemasters">
|
||||
<h4>Remasters</h4>
|
||||
|
||||
<router-link
|
||||
v-for="remaster in gameRemasters"
|
||||
:key="remaster.id"
|
||||
:to="{ name: 'game', params: { id: remaster.id, slug: remaster.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(remaster)"
|
||||
:alt="remaster.name"
|
||||
rounded
|
||||
width="120"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3" lg="12" v-if="gameRemakes" class="text-left mt-3">
|
||||
<h4>Remakes</h4>
|
||||
|
||||
<router-link
|
||||
v-for="remake in gameRemakes"
|
||||
:key="remake.id"
|
||||
:to="{ name: 'game', params: { id: remake.id, slug: remake.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(remake)"
|
||||
:alt="remake.name"
|
||||
rounded
|
||||
width="120"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="6" sm="4" md="3" lg="12" v-if="parentGame" class="mt-3 text-left">
|
||||
<h4>Original game</h4>
|
||||
|
||||
<router-link
|
||||
:to="{ name: 'game', params: { id: parentGame.id, slug: parentGame.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(parentGame)"
|
||||
:alt="parentGame.name"
|
||||
rounded
|
||||
width="120"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
v-if="gameLinks.length"
|
||||
cols="6"
|
||||
|
|
@ -459,30 +406,6 @@
|
|||
v-html="legalNotice"
|
||||
/>
|
||||
|
||||
<div v-if="gamePorts" class="text-left mt-3">
|
||||
<h3>Ports</h3>
|
||||
|
||||
<div class="game-grid">
|
||||
<router-link
|
||||
v-for="port in gamePorts"
|
||||
:key="port.id"
|
||||
:to="{ name: 'game', params: { id: port.id, slug: port.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(port)"
|
||||
:alt="port.name"
|
||||
rounded
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<game-in-boards />
|
||||
<game-bundles />
|
||||
<game-collection />
|
||||
<similar-games />
|
||||
|
||||
<!-- <timeline
|
||||
v-if="twitterHandle"
|
||||
:id="twitterHandle"
|
||||
|
|
@ -492,18 +415,110 @@
|
|||
</timeline> -->
|
||||
</b-container>
|
||||
|
||||
<b-row>
|
||||
<game-media />
|
||||
</b-row>
|
||||
<game-page-tile full>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-alert
|
||||
v-if="note"
|
||||
v-html="note"
|
||||
show
|
||||
class="cursor-pointer mt-3"
|
||||
variant="warning"
|
||||
@click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
|
||||
/>
|
||||
</b-col>
|
||||
|
||||
<div v-if="!loading && !game" class="pt-5">
|
||||
<div class="d-flex justify-content-center align-items-center" id="main">
|
||||
<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center">404</h1>
|
||||
<div class="inline-block align-middle">
|
||||
<h2 class="font-weight-normal lead" id="desc">Game was not found.</h2>
|
||||
<b-col>
|
||||
<game-progress />
|
||||
</b-col>
|
||||
</b-row>
|
||||
</game-page-tile>
|
||||
|
||||
<div class="d-flex flex-column flex-md-row">
|
||||
<game-page-tile title="Game screenshots">
|
||||
<game-media v-if="!loading" />
|
||||
</game-page-tile>
|
||||
|
||||
<game-page-tile title="Similar games">
|
||||
<similar-games />
|
||||
<game-bundles />
|
||||
<game-collection />
|
||||
<span v-if="parentGame">
|
||||
<h4>Original game</h4>
|
||||
|
||||
<router-link
|
||||
:to="{ name: 'game', params: { id: parentGame.id, slug: parentGame.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(parentGame)"
|
||||
:alt="parentGame.name"
|
||||
rounded
|
||||
width="120"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</span>
|
||||
|
||||
<div v-if="gameRemasters">
|
||||
<h4>Remasters</h4>
|
||||
|
||||
<router-link
|
||||
v-for="remaster in gameRemasters"
|
||||
:key="remaster.id"
|
||||
:to="{ name: 'game', params: { id: remaster.id, slug: remaster.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(remaster)"
|
||||
:alt="remaster.name"
|
||||
rounded
|
||||
width="120"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span v-if="gameRemakes">
|
||||
<h4>Remakes</h4>
|
||||
|
||||
<router-link
|
||||
v-for="remake in gameRemakes"
|
||||
:key="remake.id"
|
||||
:to="{ name: 'game', params: { id: remake.id, slug: remake.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(remake)"
|
||||
:alt="remake.name"
|
||||
rounded
|
||||
width="120"
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</span>
|
||||
|
||||
<div v-if="gamePorts" class="text-left mt-3">
|
||||
<h3>Ports</h3>
|
||||
|
||||
<div class="game-grid">
|
||||
<router-link
|
||||
v-for="port in gamePorts"
|
||||
:key="port.id"
|
||||
:to="{ name: 'game', params: { id: port.id, slug: port.slug } }"
|
||||
>
|
||||
<b-img
|
||||
:src="$options.getImageUrl(port)"
|
||||
:alt="port.name"
|
||||
rounded
|
||||
fluid
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</game-page-tile>
|
||||
</div>
|
||||
|
||||
<game-page-tile title="Found in these boards" full>
|
||||
<game-in-boards v-if="!loading" />
|
||||
</game-page-tile>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -514,6 +529,7 @@ import { WEBSITE_CATEGORIES, GAME_CATEGORIES, PLATFORMS } from '@/constants';
|
|||
// import AmazonLinks from '@/components/Game/AmazonLinks';
|
||||
// import GameDetails from '@/components/Game/GameDetails';
|
||||
import GameMedia from '@/components/Game/GameMedia';
|
||||
import GamePageTile from '@/components/Game/GamePageTile';
|
||||
import GameInBoards from '@/components/Game/GameInBoards';
|
||||
import GameProgress from '@/components/Game/GameProgress';
|
||||
import GameTagsModal from '@/components/Game/GameTagsModal';
|
||||
|
|
@ -539,6 +555,7 @@ export default {
|
|||
// AmazonLinks,
|
||||
// GameDetails,
|
||||
GameMedia,
|
||||
GamePageTile,
|
||||
GameInBoards,
|
||||
GameRatings,
|
||||
// GameSpeedruns,
|
||||
|
|
@ -936,8 +953,15 @@ export default {
|
|||
}
|
||||
|
||||
.has-artworks {
|
||||
@media(min-width: 768px) {
|
||||
margin-top: -22vh;
|
||||
margin-top: -22vh;
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
margin-top: -10vh;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
}
|
||||
|
||||
@media(max-width: 767px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1095,4 +1119,10 @@ export default {
|
|||
99% {top: -60px; visibility: hidden;}
|
||||
100% {top: 30px; visibility: hidden;}
|
||||
}
|
||||
|
||||
.half-tile {
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,31 @@
|
|||
<template lang="html">
|
||||
<b-container>
|
||||
<page-title :title="$t('notes.title')" />
|
||||
<page-title :title="$t('notes.title')">
|
||||
<game-selector
|
||||
v-if="!isEmpty"
|
||||
title="Select game to add a note"
|
||||
:variant="darkTheme ? 'success' : 'primary'"
|
||||
:class="{ 'mr-3': !isVerticalNav }"
|
||||
@select-game="createNote"
|
||||
>
|
||||
<i class="d-sm-none fa-solid fa-plus" />
|
||||
<span class="d-none d-sm-inline">Create note</span>
|
||||
</game-selector>
|
||||
</page-title>
|
||||
|
||||
<b-spinner v-if="loading" class="spinner-centered" />
|
||||
|
||||
<template v-else>
|
||||
<portal to="headerActions">
|
||||
<game-selector
|
||||
v-if="!isEmpty"
|
||||
v-if="!isEmpty && !isVerticalNav"
|
||||
title="Select game to add a note"
|
||||
size="md"
|
||||
:variant="darkTheme ? 'success' : 'primary'"
|
||||
:class="{ 'mr-3': !isVerticalNav }"
|
||||
@select-game="createNote"
|
||||
>
|
||||
<i
|
||||
v-if="isVerticalNav"
|
||||
class="fa-solid fa-plus fa-fw"
|
||||
/>
|
||||
|
||||
<template v-else>
|
||||
<i class="d-sm-none fa-solid fa-plus" />
|
||||
<span class="d-none d-sm-inline">Create note</span>
|
||||
</template>
|
||||
<i class="d-sm-none fa-solid fa-plus" />
|
||||
<span class="d-none d-sm-inline">Create note</span>
|
||||
</game-selector>
|
||||
</portal>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,42 +1,41 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<page-title title="Games">
|
||||
<b-button
|
||||
v-if="isVerticalNav"
|
||||
@click="toggleView"
|
||||
class="mr-3"
|
||||
variant="light"
|
||||
>
|
||||
<i v-if="view === 'grid'" class="fa-solid fa-list" />
|
||||
<i v-else class="fa-solid fa-table-cells" />
|
||||
</b-button>
|
||||
</page-title>
|
||||
|
||||
<b-container class="px-0">
|
||||
<!-- TODO: add sorting -->
|
||||
<!-- TODO: add more views -->
|
||||
<!-- TODO: add filtering -->
|
||||
<!-- TODO: add filtering -->
|
||||
|
||||
<portal to="headerActions">
|
||||
<portal
|
||||
v-if="!isVerticalNav"
|
||||
to="headerActions"
|
||||
>
|
||||
<b-button
|
||||
v-if="!isVerticalNav"
|
||||
@click="toggleView"
|
||||
class="mr-3"
|
||||
variant="dark"
|
||||
:variant="darkTheme ? 'black' : 'light'"
|
||||
>
|
||||
<i :class="`fa-solid ${view === 'grid' ? 'fa-list' : 'fa-table-cells'}`" />
|
||||
</b-button>
|
||||
|
||||
<!-- <b-button class="mr-3">
|
||||
Sort
|
||||
</b-button>
|
||||
|
||||
<b-button class="mr-3">
|
||||
Filter
|
||||
</b-button> -->
|
||||
</portal>
|
||||
|
||||
<page-title title="Games">
|
||||
<b-button
|
||||
v-if="isVerticalNav"
|
||||
@click="toggleView"
|
||||
:variant="darkTheme ? 'dark' : 'light'"
|
||||
>
|
||||
<i v-if="view === 'grid'" class="fa-solid fa-list" />
|
||||
<i v-else class="fa-solid fa-table-cells" />
|
||||
</b-button>
|
||||
</page-title>
|
||||
<!-- TODO: add sorting -->
|
||||
<!-- TODO: add filtering -->
|
||||
<!-- TODO: add filtering -->
|
||||
|
||||
<!-- <b-button class="mr-3">
|
||||
Sort
|
||||
</b-button>
|
||||
|
||||
<b-button class="mr-3">
|
||||
Filter
|
||||
</b-button> -->
|
||||
|
||||
<empty-state
|
||||
v-if="!user"
|
||||
illustration="games"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<page-title :title="user ? 'Boards' : 'Gamebrary'">
|
||||
<b-button
|
||||
v-if="user && isVerticalNav"
|
||||
:variant="darkTheme ? 'secondary' : 'light'"
|
||||
:variant="darkTheme ? 'success' : 'primary'"
|
||||
class="mr-2"
|
||||
:to="{ name: 'create.board' }"
|
||||
>
|
||||
|
|
@ -14,29 +14,17 @@
|
|||
</page-title>
|
||||
|
||||
<portal to="headerActions">
|
||||
<b-button-group
|
||||
<b-button
|
||||
v-if="user"
|
||||
:class="isVerticalNav ? 'mt-2' : 'mr-3'"
|
||||
:vertical="isVerticalNav"
|
||||
@click="showPublic = !showPublic"
|
||||
v-b-tooltip.hover
|
||||
variant="black"
|
||||
:title="showPublic ? 'My boards' : 'All boards'"
|
||||
>
|
||||
<b-button
|
||||
@click="showPublic = false"
|
||||
:variant="showPublic ? offVariant : 'primary'"
|
||||
v-b-tooltip.hover
|
||||
title="My boards"
|
||||
>
|
||||
<i class="fa-solid fa-user fa-fw" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
@click="showPublic = true"
|
||||
:variant="showPublic ? 'primary' : offVariant"
|
||||
v-b-tooltip.hover
|
||||
title="All boards"
|
||||
>
|
||||
<i class="fa-solid fa-users fa-fw" />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
<i v-if="showPublic" class="fa-solid fa-user" />
|
||||
<i v-else class="fa-solid fa-users" />
|
||||
</b-button>
|
||||
</portal>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -147,7 +147,8 @@ export default {
|
|||
|
||||
// TODO: commit first then save settings, to allow unauthed use
|
||||
await this.$store.dispatch('SAVE_SETTINGS', payload)
|
||||
.catch(() => {
|
||||
.catch((e) => {
|
||||
console.log(e);
|
||||
this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
|
||||
this.saving = false;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
<template lang="html">
|
||||
<section>
|
||||
<b-container>
|
||||
<page-title title="Tags" />
|
||||
|
||||
<portal v-if="!loading && tags.length > 0" to="headerActions">
|
||||
<page-title title="Tags">
|
||||
<b-button
|
||||
:class="{ 'mr-3': !isVerticalNav}"
|
||||
:variant="darkTheme ? 'success' : 'primary'"
|
||||
:to="{ name: 'tag.create' }"
|
||||
>
|
||||
<i
|
||||
v-if="isVerticalNav"
|
||||
class="fa-solid fa-plus fa-fw"
|
||||
/>
|
||||
<span v-else>Add tag</span>
|
||||
<i class="d-sm-none fa-solid fa-plus" />
|
||||
<span class="d-none d-sm-inline">Add tag</span>
|
||||
</b-button>
|
||||
</page-title>
|
||||
|
||||
<portal v-if="!isVerticalNav && !loading && tags.length > 0" to="headerActions">
|
||||
<b-button
|
||||
:variant="darkTheme ? 'success' : 'primary'"
|
||||
:to="{ name: 'tag.create' }"
|
||||
class="mr-3"
|
||||
>
|
||||
<i class="d-sm-none fa-solid fa-plus" />
|
||||
<span class="d-none d-sm-inline">Add tag</span>
|
||||
</b-button>
|
||||
</portal>
|
||||
|
||||
|
|
@ -29,7 +34,7 @@
|
|||
variant="primary"
|
||||
:to="{ name: 'tag.create' }"
|
||||
>
|
||||
Create a tag
|
||||
Add tag
|
||||
</b-button>
|
||||
</empty-state>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue