mirror of
https://github.com/romancm/gamebrary
synced 2024-11-10 05:34:15 +00:00
UX improvements
This commit is contained in:
Gamebrary
parent
513602d1ca
commit
9915c828c4
25 changed files with 584 additions and 457 deletions
|
|
@ -4,7 +4,6 @@
|
|||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
|
||||
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
|
|
@ -14,7 +13,7 @@
|
|||
<meta name="theme-color" content="#ffffff">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://kit.fontawesome.com/4c930ed66a.js" crossorigin="anonymous" />
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8" />
|
||||
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -167,9 +167,8 @@ export default {
|
|||
|
||||
&.no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
// background-size: contain;
|
||||
// background-size: cover;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,67 +1,9 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<b-button
|
||||
variant="light"
|
||||
:to="{ name: 'board.edit', params: { id: board.id } }"
|
||||
>
|
||||
{{ board.name }}
|
||||
</b-button>
|
||||
<!-- TODO: Clone board -->
|
||||
<!-- TODO: like/favorite board -->
|
||||
<!-- TODO: Fork board -->
|
||||
|
||||
<!-- <b-dropdown
|
||||
class="mr-2 boards-dropdown"
|
||||
variant="dark"
|
||||
v-b-tooltip.hover
|
||||
right
|
||||
:title="board.name"
|
||||
>
|
||||
<b-dropdown-item
|
||||
size="sm"
|
||||
:to="{ name: 'board.edit', params: { id: board.id } }"
|
||||
>
|
||||
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
|
||||
Edit board
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-divider />
|
||||
|
||||
<b-dropdown-item
|
||||
size="sm"
|
||||
:to="{ name: 'create.board' }"
|
||||
>
|
||||
<i class="fas fa-plus fa-fw" aria-hidden></i>
|
||||
Create new board
|
||||
</b-dropdown-item>
|
||||
|
||||
<template v-if="filteredBoards.length">
|
||||
<b-dropdown-divider />
|
||||
|
||||
<span class="m-2 text-muted">Other boards:</span>
|
||||
|
||||
<b-dropdown-item-button
|
||||
v-for="{ id, name, backgroundColor, backgroundUrl } in filteredBoards"
|
||||
:key="id"
|
||||
:active="board.name === name"
|
||||
@click="viewBoard(id)"
|
||||
>
|
||||
<b-avatar
|
||||
rounded
|
||||
:class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]"
|
||||
:title="name"
|
||||
text=" "
|
||||
:style="`
|
||||
background-image: url(${backgroundUrl ? backgroundUrl : ''});
|
||||
background-color: ${backgroundColor ? backgroundColor : ''}
|
||||
`"
|
||||
/>
|
||||
|
||||
{{ name }}
|
||||
</b-dropdown-item-button>
|
||||
</template>
|
||||
</b-dropdown> -->
|
||||
</div>
|
||||
<b-button
|
||||
:to="{ name: buttonRoute, params: { id: board.id } }"
|
||||
>
|
||||
{{ board.name }}
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -72,66 +14,8 @@ export default {
|
|||
...mapState(['board', 'wallpapers', 'boards', 'settings']),
|
||||
|
||||
buttonRoute() {
|
||||
// { name: 'board.edit', params: { id: board.id } }
|
||||
return this.$route.name;
|
||||
},
|
||||
|
||||
filteredBoards() {
|
||||
return this.boards
|
||||
.filter(({ id }) => id !== this.board.id)
|
||||
.map((board) => {
|
||||
const backgroundUrl = this.getWallpaperUrl(board.backgroundUrl);
|
||||
|
||||
return {
|
||||
...board,
|
||||
backgroundUrl,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
boardInitials() {
|
||||
return this.board.name.split(' ').map(n => n[0]).join('').slice(0, 2);
|
||||
},
|
||||
|
||||
boardBackgroundUrl() {
|
||||
return this.getWallpaperUrl(this.board?.backgroundUrl);
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
viewBoard(id) {
|
||||
this.$router.push({ name: 'board', params: { id } });
|
||||
},
|
||||
|
||||
getWallpaperUrl(url) {
|
||||
if (!url) return '';
|
||||
if (url && url.includes('igdb.com')) return url;
|
||||
|
||||
const wallpaper = this.wallpapers.find(({ fullPath }) => fullPath === url);
|
||||
|
||||
return wallpaper && wallpaper.url ? decodeURI(wallpaper.url) : '';
|
||||
return this.$route.name === 'board.edit' ? 'board' : 'board.edit';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.board-thumbnail {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.board-actions {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 70px;
|
||||
grid-gap: .5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss">
|
||||
.boards-dropdown .dropdown-menu {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template lang="html">
|
||||
<b-row v-if="user" class="p-1 boards">
|
||||
<!-- TODO: allow reorganizing and save -->
|
||||
<!-- TODO: add sorting -->
|
||||
<empty-state
|
||||
v-if="!user || !loading && sortedBoards.length === 0"
|
||||
title="Boards"
|
||||
|
|
@ -27,7 +28,7 @@
|
|||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="p-1"
|
||||
class="p-2"
|
||||
>
|
||||
<mini-board
|
||||
:board="board"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,14 @@
|
|||
<b-col cols="10">
|
||||
<b-card-body :title="game.name" title-tag="h4">
|
||||
<b-button
|
||||
v-if="activeList"
|
||||
@click="$emit('addToActiveList', game.id)"
|
||||
>
|
||||
Add
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-else
|
||||
@click="addGameToList"
|
||||
variant="primary"
|
||||
>
|
||||
|
|
@ -34,6 +42,7 @@ export default {
|
|||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
activeList: Boolean,
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@
|
|||
<div class="note mb-3 rounded" role="main">
|
||||
<header>
|
||||
<!-- TODO: fix discrepancies -->
|
||||
<!-- TODO: ^ take better notes -->
|
||||
<router-link
|
||||
v-if="note.gameName"
|
||||
:to="{ name: 'game', params: { id: note.gameId, slug: note.gameSlug } }"
|
||||
:to="{ name: 'game.notes', params: { id: note.gameId, slug: note.gameSlug } }"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
{{ note.gameName }}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,6 @@
|
|||
variant="light"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
{{ $t('board.list.emptyListButton') }}
|
||||
</b-button> -->
|
||||
|
||||
<b-button
|
||||
|
|
@ -88,10 +87,9 @@
|
|||
variant="light"
|
||||
block
|
||||
class="mb-2"
|
||||
:to="{ name: 'search' }"
|
||||
:to="{ name: 'search', query: { boardId: board.id, listIndex: listIndex } }"
|
||||
>
|
||||
<!-- TODO: add board id in params -->
|
||||
Add games
|
||||
{{ $t('board.list.emptyListButton') }}
|
||||
</b-button>
|
||||
</draggable>
|
||||
</b-card>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template lang="html">
|
||||
<header class="p-2 d-flex">
|
||||
<home-button />
|
||||
<portal-target name="headerTitle" />
|
||||
<boards-dropdown v-if="board.id && isBoardPage" />
|
||||
<!-- <game-dropdown v-if="isGamePage" /> -->
|
||||
|
||||
|
|
@ -12,44 +13,20 @@
|
|||
</b-button> -->
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
variant="light"
|
||||
class="mr-2"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
<i class="fas fa-search fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<b-dropdown
|
||||
<router-link
|
||||
v-if="user"
|
||||
boundary="viewport"
|
||||
variant="link"
|
||||
class="p-0"
|
||||
toggle-class="p-0"
|
||||
no-caret
|
||||
variant="primary"
|
||||
:to="{ name: 'settings' }"
|
||||
>
|
||||
<template #button-content>
|
||||
<b-avatar rounded variant="info" :src="user.photoURL" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'settings' }"
|
||||
>
|
||||
<i class="fas fa-cog fa-fw" /> Settings
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'releases' }"
|
||||
>
|
||||
<i class="fas fa-rocket fa-fw" aria-hidden></i>
|
||||
Releases
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-divider />
|
||||
|
||||
<b-dropdown-item @click="session_signOut">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket" />
|
||||
Log out
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
<b-avatar size="38" rounded variant="info" :src="user.photoURL" />
|
||||
</router-link>
|
||||
|
||||
<b-button
|
||||
v-else
|
||||
|
|
@ -67,11 +44,9 @@
|
|||
// import GameDropdown from '@/components/Game/GameDropdown';
|
||||
import BoardsDropdown from '@/components/BoardsDropdown';
|
||||
import HomeButton from '@/components/Shared/HomeButton';
|
||||
import sessionMixin from '@/mixins/sessionMixin';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
mixins: [sessionMixin],
|
||||
|
||||
components: {
|
||||
// GameDropdown,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
<template lang="html">
|
||||
<b-card v-if="provider" style="max-width: 100%; width: 400px;">
|
||||
<b-media right-align vertical-align="center">
|
||||
<b-card v-if="provider" style="max-width: 100%; width: 400px;" class="mb-3">
|
||||
<b-media>
|
||||
<template #aside>
|
||||
<b-img
|
||||
:src="`/logos/companies/${provider.id}.svg`"
|
||||
width="60"
|
||||
width="40"
|
||||
alt="Provider"
|
||||
/>
|
||||
</template>
|
||||
<h3 class="mt-0 mb-1">{{ user.displayName }}</h3>
|
||||
<h4>{{ user.displayName }}</h4>
|
||||
|
||||
<p>Logged in {{ lastLogin }} using <strong>{{ provider.name }}</strong>.</p>
|
||||
<p class="m-0">Logged in {{ lastLogin }} using <strong>{{ provider.name }}</strong>.</p>
|
||||
</b-media>
|
||||
</b-card>
|
||||
</template>
|
||||
|
|
|
|||
34
src/components/Settings/SettingsCard.vue
Normal file
34
src/components/Settings/SettingsCard.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template lang="html">
|
||||
<b-card
|
||||
body-class="settings-card"
|
||||
class="cursor-pointer mb-3"
|
||||
>
|
||||
<i :class="`fa-2x fa-solid ${icon} fa-fw`" aria-hidden />
|
||||
|
||||
<aside>
|
||||
<h4 class="mb-0 strong">{{ title }}</h4>
|
||||
<small class="text-muted">{{ description }}</small>
|
||||
</aside>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: String,
|
||||
to: Object,
|
||||
icon: String,
|
||||
description: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.settings-card {
|
||||
max-width: 100%;
|
||||
width: 400px;
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,18 +1,24 @@
|
|||
<template lang="html">
|
||||
<b-container fluid>
|
||||
<page-title title="Account settings" />
|
||||
|
||||
<b-container>
|
||||
<provider-card />
|
||||
|
||||
<b-button
|
||||
class="mt-3"
|
||||
variant="danger"
|
||||
v-b-modal:deleteAccount
|
||||
>
|
||||
Delete Account
|
||||
</b-button>
|
||||
|
||||
<delete-account-modal />
|
||||
|
||||
<div class="mb-3">
|
||||
<b-button
|
||||
class="mr-3"
|
||||
variant="danger"
|
||||
v-b-modal:deleteAccount
|
||||
>
|
||||
Delete Account
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
@click="session_signOut"
|
||||
>
|
||||
<i class="fa-solid fa-arrow-right-from-bracket" />
|
||||
Log out
|
||||
</b-button>
|
||||
</div>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -20,6 +26,7 @@
|
|||
import DeleteAccountModal from '@/components/Settings/DeleteAccountModal';
|
||||
import ProviderCard from '@/components/ProviderCard';
|
||||
import { mapState } from 'vuex';
|
||||
import sessionMixin from '@/mixins/sessionMixin';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -27,6 +34,7 @@ export default {
|
|||
DeleteAccountModal,
|
||||
},
|
||||
|
||||
mixins: [sessionMixin],
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
|
@ -36,4 +44,3 @@ export default {
|
|||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,35 @@
|
|||
<template lang="html">
|
||||
<b-container fluid>
|
||||
<portal to="headerActions">
|
||||
<b-row>
|
||||
<search-box />
|
||||
</b-row>
|
||||
<header>
|
||||
My Boards
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="mr-2"
|
||||
@click="$router.push({ name: 'create.board' })"
|
||||
:to="{ name: 'create.board' }"
|
||||
>
|
||||
Create board
|
||||
</b-button>
|
||||
</portal>
|
||||
</header>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="mr-2"
|
||||
:to="{ name: 'notes.settings' }"
|
||||
>
|
||||
Notes
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
class="mr-2"
|
||||
:to="{ name: 'tags.settings' }"
|
||||
>
|
||||
Tags
|
||||
</b-button>
|
||||
|
||||
<game-boards v-if="boards.length" class="mb-3" />
|
||||
|
||||
|
|
@ -26,22 +47,40 @@
|
|||
Explore boards
|
||||
</b-button> -->
|
||||
</empty-state>
|
||||
|
||||
<footer class="text-center">
|
||||
<b-button
|
||||
:to="{ name: 'releases' }"
|
||||
size="sm"
|
||||
variant="transparent"
|
||||
>
|
||||
{{ latestRelease }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
import GameBoards from '@/components/GameBoards';
|
||||
import SearchBox from '@/components/SearchBox';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SearchBox,
|
||||
GameBoards,
|
||||
EmptyState,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user', 'boards']),
|
||||
...mapState(['user', 'boards', 'releases']),
|
||||
|
||||
latestRelease() {
|
||||
const [{ tag_name }] = this.releases;
|
||||
|
||||
return tag_name || '';
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,6 @@
|
|||
<template lang="html">
|
||||
<b-container fluid class="p-0">
|
||||
<b-row v-if="board" no-gutters>
|
||||
<b-col sm="12" md="6">
|
||||
<div class="p-3 list-preview d-flex justify-content-center">
|
||||
<!-- <game-list :list="list" preview /> -->
|
||||
<board-placeholder />
|
||||
</div>
|
||||
</b-col>
|
||||
|
||||
<b-col>
|
||||
<b-card>
|
||||
<header class="p-1 mb-3 pl-2 d-flex justify-content-between align-items-center">
|
||||
|
|
@ -71,13 +64,6 @@
|
|||
|
||||
<hr class="my-3">
|
||||
|
||||
<b-button
|
||||
variant="danger"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
{{ $t('board.settings.deleteBoard') }}
|
||||
</b-button>
|
||||
|
||||
<!-- <b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
|
|
@ -173,6 +159,13 @@
|
|||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="link"
|
||||
@click="confirmDelete"
|
||||
>
|
||||
{{ $t('board.settings.deleteBoard') }}
|
||||
</b-button>
|
||||
</form>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
|
@ -183,12 +176,12 @@
|
|||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import EditBoardBackgroundModal from '@/components/Board/EditBoardBackgroundModal';
|
||||
import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
|
||||
// import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
|
||||
import orderby from 'lodash.orderby';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BoardPlaceholder,
|
||||
// BoardPlaceholder,
|
||||
EditBoardBackgroundModal,
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,10 @@
|
|||
<header class="p-1 mb-3 pl-2 d-flex justify-content-between align-items-center">
|
||||
<h1 class="mb-0">Edit list</h1>
|
||||
|
||||
<b-button variant="success">
|
||||
<b-button
|
||||
variant="success"
|
||||
:to="{ name: 'search', query: { boardId: board.id, listIndex } }"
|
||||
>
|
||||
Add games
|
||||
</b-button>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
<!-- TODO: finish layout -->
|
||||
<template lang="html">
|
||||
<b-container fluid class="p-2">
|
||||
<b-form-row>
|
||||
<div v-if="loading">
|
||||
Loading...
|
||||
</div>
|
||||
|
||||
<b-form-row v-else>
|
||||
<b-col>
|
||||
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
|
||||
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
|
||||
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
|
||||
</router-link>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
|
|
@ -88,8 +94,36 @@ export default {
|
|||
this.loadNote();
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadNote() {
|
||||
if (this.game.id !== this.$route.params.id) {
|
||||
this.loadGame();
|
||||
} else {
|
||||
this.loading = false;
|
||||
this.setNote();
|
||||
}
|
||||
},
|
||||
|
||||
async loadGame() {
|
||||
this.loading = true;
|
||||
this.$store.commit('CLEAR_GAME');
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('LOAD_GAME', this.$route.params.id);
|
||||
|
||||
this.setNote();
|
||||
} catch (e) {}
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
setNote() {
|
||||
this.note = this.notes[this.game.id] || '';
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,44 @@
|
|||
<!-- TODO: Show lists/boards that the game belongs to -->
|
||||
|
||||
<template lang="html">
|
||||
<b-container fluid class="px-2 pb-2">
|
||||
<b-container fluid>
|
||||
<b-skeleton v-if="loading" />
|
||||
|
||||
<template v-else-if="game">
|
||||
<portal to="headerTitle">
|
||||
<b-button-group>
|
||||
<b-button @click="$bus.$emit('ADD_GAME', game.id)">
|
||||
<i class="fa-solid fa-plus fa-fw" />
|
||||
Add to list
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.tags', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-tags fa-fw" />
|
||||
Tags
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.progress', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-bars-progress fa-fw" />
|
||||
Track progress
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-note-sticky fa-fw" />
|
||||
Notes
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-newspaper fa-fw" />
|
||||
News
|
||||
</b-button>
|
||||
|
||||
<b-button :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
|
||||
<i class="fa-solid fa-photo-film fa-fw" />
|
||||
Images / Videos
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</portal>
|
||||
|
||||
<b-row class="game">
|
||||
<b-col
|
||||
offset="2"
|
||||
|
|
@ -40,10 +74,32 @@
|
|||
<game-rating :game="game" />
|
||||
</div>
|
||||
|
||||
<b-card body-class="p-3" class="mt-2">
|
||||
<b-card body-class="p-3" class="mt-2 ml-n3">
|
||||
<h4>Game found in these boards:</h4>
|
||||
|
||||
<b-badge
|
||||
<b-list-group>
|
||||
<b-list-group-item
|
||||
v-for="board in boardsWithGame"
|
||||
:to="{ name: 'board', params: { id: board.id } }"
|
||||
:key="board.id"
|
||||
button
|
||||
>
|
||||
<b-avatar
|
||||
rounded
|
||||
:class="['board-thumbnail mr-2', { 'bg-dark' : !board.backgroundColor }]"
|
||||
:title="board.name"
|
||||
text=" "
|
||||
:style="`
|
||||
background-image: url(${board.backgroundUrl || ''});
|
||||
background-color: ${board.backgroundColor || ''}
|
||||
`"
|
||||
/>
|
||||
|
||||
{{ board.name }}
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
|
||||
<!-- <b-badge
|
||||
v-for="board in boardsWithGame"
|
||||
:to="{ name: 'board', params: { id: board.id } }"
|
||||
:key="board.id"
|
||||
|
|
@ -60,7 +116,7 @@
|
|||
`"
|
||||
/>
|
||||
{{ board.name }}
|
||||
</b-badge>
|
||||
</b-badge> -->
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
|
||||
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
|
||||
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
|
||||
</router-link>
|
||||
|
||||
{{ title }}
|
||||
|
||||
<b-progress
|
||||
|
|
|
|||
|
|
@ -1,21 +1,27 @@
|
|||
<!-- TODO: finish layout -->
|
||||
<template lang="html">
|
||||
<b-container class="p-2">
|
||||
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
|
||||
|
||||
<empty-state
|
||||
v-if="empty"
|
||||
class="mb-4"
|
||||
message="Looks like you don't have any tags yet."
|
||||
>
|
||||
<b-button @click="manageTags">Manage tags</b-button>
|
||||
</empty-state>
|
||||
<template v-if="loading">
|
||||
loading
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
|
||||
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
|
||||
</router-link>
|
||||
|
||||
<h3>Tags</h3>
|
||||
<p>Click on tag to add or remove tag from game</p>
|
||||
|
||||
<b-row>
|
||||
<empty-state
|
||||
v-if="empty"
|
||||
class="mb-4"
|
||||
message="Looks like you don't have any tags yet."
|
||||
>
|
||||
<b-button @click="manageTags">Manage tags</b-button>
|
||||
</empty-state>
|
||||
|
||||
<b-row v-else>
|
||||
<!-- TODO: Show current games in tag -->
|
||||
<!-- TODO: Filter tag option if tags > too many -->
|
||||
<b-col cols="12" md="auto">
|
||||
|
|
@ -62,6 +68,7 @@ export default {
|
|||
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -84,9 +91,26 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
if (this.game.id !== this.$route.params.id) {
|
||||
this.loadGame();
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async loadGame() {
|
||||
this.loading = true;
|
||||
this.$store.commit('CLEAR_GAME');
|
||||
|
||||
await this.$store.dispatch('LOAD_GAME', this.$route.params.id)
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
async addTag(tagName) {
|
||||
const gameId = this.game.id;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,15 +2,17 @@
|
|||
<!-- TODO: pagination? -->
|
||||
<template lang="html">
|
||||
<b-container fluid>
|
||||
<page-title title="Notes">
|
||||
<b-form-input
|
||||
v-if="!showEmptyState"
|
||||
type="search"
|
||||
style="max-width: 200px"
|
||||
placeholder="Search notes"
|
||||
v-model="search"
|
||||
/>
|
||||
</page-title>
|
||||
<portal to="headerTitle">
|
||||
<page-title title="Notes">
|
||||
<b-form-input
|
||||
v-if="!showEmptyState"
|
||||
type="search"
|
||||
style="max-width: 200px"
|
||||
placeholder="Search notes"
|
||||
v-model="search"
|
||||
/>
|
||||
</page-title>
|
||||
</portal>
|
||||
|
||||
<empty-state
|
||||
v-if="showEmptyState"
|
||||
|
|
@ -19,7 +21,7 @@
|
|||
/>
|
||||
|
||||
<template v-else>
|
||||
<div class="notes mb-2">
|
||||
<div class="notes">
|
||||
<game-note
|
||||
v-for="(note, index) in filteredNotes"
|
||||
:key="index"
|
||||
|
|
@ -131,9 +133,21 @@ export default {
|
|||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
|
||||
// .notes {
|
||||
// column-width: 320px;
|
||||
// column-gap: 15px;
|
||||
// column-fill: auto;
|
||||
// }
|
||||
.notes {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 1rem;
|
||||
|
||||
@media(max-width: 1200px) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
@media(max-width: 780px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,95 @@
|
|||
<template lang="html">
|
||||
<b-container>
|
||||
<b-row>
|
||||
<b-col cols="3" class="position-sticky mt-2">
|
||||
<b-card>
|
||||
test
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add view toggle -->
|
||||
Filter
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add view toggle -->
|
||||
<!-- <b-col cols="3" class="position-sticky mt-2">
|
||||
<b-card>
|
||||
Filter
|
||||
|
||||
<h3>Sort by</h3>
|
||||
Latest
|
||||
Oldest
|
||||
Relevance
|
||||
<h3>Sort by</h3>
|
||||
Latest
|
||||
Oldest
|
||||
Relevance
|
||||
|
||||
<h3>Filters</h3>
|
||||
Tags
|
||||
Genre
|
||||
Platform
|
||||
Year released
|
||||
</b-card>
|
||||
</b-col>
|
||||
<h3>Filters</h3>
|
||||
Tags
|
||||
Genre
|
||||
Platform
|
||||
Year released
|
||||
</b-card>
|
||||
</b-col> -->
|
||||
|
||||
<b-col cols="9">
|
||||
<div class="p-2">
|
||||
<search-box />
|
||||
<!-- <b-alert show variant="success">
|
||||
Custom search controls go here!
|
||||
</b-alert> -->
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add empty state with predefined searches -->
|
||||
<!-- TODO: add pagination -->
|
||||
<b-skeleton v-if="loading" />
|
||||
<!-- <b-col cols="9">
|
||||
|
||||
<div v-else-if="searchResults.length > 0">
|
||||
<header class="my-2 d-flex align-items-center justify-content-between">
|
||||
<h3>Search results</h3>
|
||||
</b-col> -->
|
||||
<div class="p-2">
|
||||
<b-button
|
||||
v-if="boardId"
|
||||
variant="primary"
|
||||
:to="{ name: 'board', params: { id: boardId } }"
|
||||
>
|
||||
Back to board
|
||||
</b-button>
|
||||
<search-box />
|
||||
<!-- <b-alert show variant="success">
|
||||
Custom search controls go here!
|
||||
</b-alert> -->
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add empty state with predefined searches -->
|
||||
<!-- TODO: add pagination -->
|
||||
<b-skeleton v-if="loading" />
|
||||
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
<b-button :variant="listView ? 'primary' : 'secondary'" @click="listView = true">
|
||||
<i class="fa-solid fa-list fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
<div v-else-if="searchResults.length > 0">
|
||||
<header class="my-2 d-flex align-items-center justify-content-between">
|
||||
<h3 v-if="activeBoardList">
|
||||
Add games to <strong>{{ activeBoardList.name }}</strong>
|
||||
</h3>
|
||||
<h3>Search results</h3>
|
||||
|
||||
<b-button :variant="listView ? 'secondary' : 'primary'" @click="listView = false">
|
||||
<i class="fa-solid fa-grip fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</header>
|
||||
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
|
||||
<b-button-group class="mx-1">
|
||||
<b-button :variant="listView ? 'primary' : 'secondary'" @click="listView = true">
|
||||
<i class="fa-solid fa-list fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<template v-if="listView">
|
||||
<game-card-search
|
||||
v-for="game in searchResults"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
/>
|
||||
</template>
|
||||
<b-button :variant="listView ? 'secondary' : 'primary'" @click="listView = false">
|
||||
<i class="fa-solid fa-grip fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-button-toolbar>
|
||||
</header>
|
||||
|
||||
<div v-else class="masonry-container">
|
||||
<game-card-search-vertical
|
||||
v-for="game in searchResults"
|
||||
class="masonry-item"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
/>
|
||||
</div>
|
||||
<template v-if="listView">
|
||||
<game-card-search
|
||||
v-for="game in searchResults"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
:active-list="Boolean(activeBoardList)"
|
||||
@addToActiveList="addToActiveList"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div v-else class="masonry-container">
|
||||
<game-card-search-vertical
|
||||
v-for="game in searchResults"
|
||||
class="masonry-item"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<b-container v-else-if="query.length > 0">
|
||||
<b-alert show variant="info" class="mt-5">
|
||||
<h4 class="alert-heading">No results found</h4>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Please try a different search
|
||||
</p>
|
||||
</b-alert>
|
||||
</b-container>
|
||||
</div>
|
||||
</b-col>
|
||||
|
||||
<b-container v-else-if="query.length > 0">
|
||||
<b-alert show variant="info" class="mt-5">
|
||||
<h4 class="alert-heading">No results found</h4>
|
||||
<hr>
|
||||
<p class="mb-0">
|
||||
Please try a different search
|
||||
</p>
|
||||
</b-alert>
|
||||
</b-container>
|
||||
</div>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</template>
|
||||
|
|
@ -86,6 +98,7 @@
|
|||
import GameCardSearch from '@/components/GameCards/GameCardSearch';
|
||||
import SearchBox from '@/components/SearchBox';
|
||||
import GameCardSearchVertical from '@/components/GameCards/GameCardSearchVertical';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -98,16 +111,30 @@ export default {
|
|||
return {
|
||||
searchResults: [],
|
||||
loading: false,
|
||||
listView: true,
|
||||
listView: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['board']),
|
||||
|
||||
query() {
|
||||
return this.$route.query.q
|
||||
? this.$route.query.q.trim()
|
||||
: '';
|
||||
},
|
||||
|
||||
boardId() {
|
||||
return this.$route.query?.boardId;
|
||||
},
|
||||
|
||||
boardListIndex() {
|
||||
return this.$route.query?.listIndex;
|
||||
},
|
||||
|
||||
activeBoardList() {
|
||||
return this.board?.lists[this.boardListIndex];
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
@ -122,6 +149,19 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
async addToActiveList({ list, listIndex, boardId }) {
|
||||
const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
|
||||
const board = this.boards[boardIndex];
|
||||
|
||||
board.lists[listIndex].games.push(this.game.id);
|
||||
|
||||
try {
|
||||
await this.$store.dispatch('SAVE_GAME_BOARD', board);
|
||||
} catch (e) {
|
||||
// this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
|
||||
}
|
||||
},
|
||||
|
||||
async search() {
|
||||
this.loading = true;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,102 +1,119 @@
|
|||
<template lang="html">
|
||||
<b-container fluid class="p-2">
|
||||
<b-row no-gutters>
|
||||
<b-col cols="4" sm="3" lg="2">
|
||||
<b-list-group>
|
||||
<b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'general.settings' }">
|
||||
<i class="mr-2 fas fa-sliders-h fa-fw" aria-hidden />
|
||||
<small>General</small>
|
||||
</b-list-group-item>
|
||||
<b-container>
|
||||
<div style="width: 400px; max-width: 100%">
|
||||
<language-settings />
|
||||
|
||||
<b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'wallpapers.settings' }">
|
||||
<i class="mr-2 fa-solid fa-images fa-fw" aria-hidden />
|
||||
<small>Wallpapers</small>
|
||||
</b-list-group-item>
|
||||
<settings-card
|
||||
title="Wallpapers"
|
||||
description="Manage your wallpapers"
|
||||
icon="fa-images"
|
||||
@click.native="$router.push({ name: 'wallpapers.settings' })"
|
||||
/>
|
||||
|
||||
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'profile.settings' }">
|
||||
<i class="mr-2 fa-solid fa-user fa-fw" aria-hidden />
|
||||
<small>Profile</small>
|
||||
</b-list-group-item> -->
|
||||
<settings-card
|
||||
title="Notes"
|
||||
description="View all your notes"
|
||||
icon="fa-note-sticky"
|
||||
@click.native="$router.push({ name: 'notes.settings' })"
|
||||
/>
|
||||
|
||||
<b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'notes.settings' }">
|
||||
<i class="mr-2 fa-solid fa-note-sticky fa-fw" aria-hidden />
|
||||
<small>Notes</small>
|
||||
</b-list-group-item>
|
||||
<settings-card
|
||||
title="Tags"
|
||||
description="View all your tags"
|
||||
icon="fa-tags"
|
||||
@click.native="$router.push({ name: 'tags.settings' })"
|
||||
/>
|
||||
|
||||
<b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'team.settings' }">
|
||||
<i class="mr-2 fa-solid fa-tags fa-fw" aria-hidden />
|
||||
<small>Tags</small>
|
||||
</b-list-group-item>
|
||||
<settings-card
|
||||
title="Account"
|
||||
description="Manage your Gamebrary account"
|
||||
icon="fa-user"
|
||||
@click.native="$router.push({ name: 'account.settings' })"
|
||||
/>
|
||||
|
||||
<b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'account.settings' }">
|
||||
<i class="mr-2 fa-solid fa-user-shield fa-fw" aria-hidden />
|
||||
<small>Account</small>
|
||||
</b-list-group-item>
|
||||
<!-- TODO: fix -->
|
||||
<b-button
|
||||
block
|
||||
variant="secondary"
|
||||
v-b-modal.keyboard-shortcuts
|
||||
>
|
||||
Keyboard shortcuts
|
||||
</b-button>
|
||||
|
||||
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
|
||||
<i class="mr-2 fab fa-steam fa-fw" aria-hidden></i>
|
||||
<small>Steam</small>
|
||||
</b-list-group-item> -->
|
||||
<b-button
|
||||
block
|
||||
variant="secondary"
|
||||
:to="{ name: 'dev.tools' }"
|
||||
>
|
||||
Dev tools
|
||||
</b-button>
|
||||
|
||||
<!-- <hr /> -->
|
||||
<b-button
|
||||
href="https://github.com/romancm/gamebrary"
|
||||
target="_blank"
|
||||
block
|
||||
variant="secondary"
|
||||
>
|
||||
<i class="fab fa-github fa-fw" />
|
||||
GitHub
|
||||
</b-button>
|
||||
|
||||
<!-- <b-list-group-item :to="{ name: 'profiles' }">
|
||||
<i class="mr-2 fa-solid fa-people-group fa-fw" aria-hidden />
|
||||
<small>Profiles</small>
|
||||
</b-list-group-item> -->
|
||||
<b-button
|
||||
block
|
||||
variant="secondary"
|
||||
href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
|
||||
target="_blank"
|
||||
>
|
||||
Submit feedback
|
||||
</b-button>
|
||||
|
||||
<!-- <b-list-group-item :to="{ name: 'dev.tools' }">
|
||||
<i class="mr-2 fa-solid fa-code fa-fw" aria-hidden />
|
||||
<hr />
|
||||
|
||||
<small>Dev tools</small>
|
||||
</b-list-group-item> -->
|
||||
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'profile.settings' }">
|
||||
<i class="mr-2 fa-solid fa-user fa-fw" aria-hidden />
|
||||
<small>Profile</small>
|
||||
</b-list-group-item> -->
|
||||
|
||||
<!-- <a
|
||||
href="https://github.com/romancm/gamebrary"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="mr-2 fab fa-github"></i>
|
||||
</a> -->
|
||||
<!-- <game-detail-settings /> -->
|
||||
|
||||
<!-- <small class="my-2">
|
||||
<a v-b-modal.keyboard-shortcuts>Keyboard shortcuts</a>
|
||||
</small> -->
|
||||
<account-settings />
|
||||
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
|
||||
<i class="mr-2 fab fa-steam fa-fw" aria-hidden></i>
|
||||
<small>Steam</small>
|
||||
</b-list-group-item> -->
|
||||
|
||||
<!-- {{ $t('global.donateMessage') }} -->
|
||||
<!-- <a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
|
||||
{{ $t('global.donating') }}
|
||||
</a> -->
|
||||
<!-- <hr /> -->
|
||||
|
||||
<!-- <a href="https://github.com/romancm/gamebrary/issues" target="_blank">
|
||||
{{ $t('global.reportBugs') }}
|
||||
</a> -->
|
||||
<!-- <b-list-group-item :to="{ name: 'profiles' }">
|
||||
<i class="mr-2 fa-solid fa-people-group fa-fw" aria-hidden />
|
||||
<small>Profiles</small>
|
||||
</b-list-group-item> -->
|
||||
|
||||
<!-- <a href="https://goo.gl/forms/r0juBCsZaUtJ03qb2" target="_blank">
|
||||
{{ $t('global.submitFeedback') }}
|
||||
</a> -->
|
||||
</b-list-group>
|
||||
<!-- {{ $t('global.donateMessage') }} -->
|
||||
<!-- <a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
|
||||
{{ $t('global.donating') }}
|
||||
</a> -->
|
||||
|
||||
<small>© 2021 Gamebrary</small>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="8" sm="9" lg="10">
|
||||
<router-view />
|
||||
</b-col>
|
||||
</b-row>
|
||||
<small>© 2022 Gamebrary</small>
|
||||
</div>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import ProfileSettingsPage from '@/pages/ProfileSettingsPage';
|
||||
// import AccountSettingsPage from '@/pages/AccountSettingsPage';
|
||||
import SettingsCard from '@/components/Settings/SettingsCard';
|
||||
// import SteamSettingsPage from '@/pages/SteamSettingsPage';
|
||||
// import GeneralSettingsPage from '@/pages/GeneralSettingsPage';
|
||||
// import GameDetailSettings from '@/components/Settings/GameDetailSettings';
|
||||
import LanguageSettings from '@/components/Settings/LanguageSettings';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LanguageSettings,
|
||||
// GameDetailSettings,
|
||||
// ProfileSettingsPage,
|
||||
// AccountSettingsPage,
|
||||
SettingsCard,
|
||||
// SteamSettingsPage,
|
||||
// GeneralSettingsPage,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -17,11 +17,13 @@
|
|||
</empty-state>
|
||||
|
||||
<template v-else>
|
||||
<page-title
|
||||
title="Tags"
|
||||
action-text="Add tag"
|
||||
@action="$bvModal.show('addTag')"
|
||||
/>
|
||||
<portal to="headerTitle">
|
||||
<page-title
|
||||
title="Tags"
|
||||
action-text="Add tag"
|
||||
@action="$bvModal.show('addTag')"
|
||||
/>
|
||||
</portal>
|
||||
|
||||
<tags-list
|
||||
v-if="gameTags && localTags"
|
||||
|
|
|
|||
|
|
@ -10,20 +10,26 @@
|
|||
/>
|
||||
|
||||
<template v-else>
|
||||
<page-title title="Wallpapers">
|
||||
<b-button
|
||||
:disabled="outOfSpace"
|
||||
variant="primary"
|
||||
@click="triggerFileUpload"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<portal to="headerTitle">
|
||||
<div class="d-flex">
|
||||
<b-button>Back</b-button>
|
||||
|
||||
<template v-else>
|
||||
<i class="fas fa-upload fa-fw" aria-hidden />
|
||||
<span class="d-none d-sm-inline">Upload</span>
|
||||
</template>
|
||||
</b-button>
|
||||
</page-title>
|
||||
<page-title title="Wallpapers">
|
||||
<b-button
|
||||
:disabled="outOfSpace"
|
||||
variant="primary"
|
||||
@click="triggerFileUpload"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
|
||||
<template v-else>
|
||||
<i class="fas fa-upload fa-fw" aria-hidden />
|
||||
<span class="d-none d-sm-inline">Upload</span>
|
||||
</template>
|
||||
</b-button>
|
||||
</page-title>
|
||||
</div>
|
||||
</portal>
|
||||
|
||||
<b-alert
|
||||
v-if="isDuplicate && !saving && file && file.name"
|
||||
|
|
|
|||
116
src/routes.js
116
src/routes.js
|
|
@ -1,7 +1,11 @@
|
|||
// TODO: use chunks and import directly
|
||||
// TODO: separate into different files
|
||||
// TODO: make naming consistent
|
||||
import AboutPage from '@/pages/AboutPage';
|
||||
import AuthPage from '@/pages/AuthPage';
|
||||
import BoardPage from '@/pages/BoardPage';
|
||||
import UpgradePage from '@/pages/UpgradePage';
|
||||
import AccountSettingsPage from '@/pages/AccountSettingsPage';
|
||||
import EditBoardPage from '@/pages/EditBoardPage';
|
||||
import CreateBoardPage from '@/pages/CreateBoardPage';
|
||||
import DevToolsPage from '@/pages/DevToolsPage';
|
||||
|
|
@ -26,14 +30,11 @@ import PublicProfilesPage from '@/pages/PublicProfilesPage';
|
|||
import ReleasesPage from '@/pages/ReleasesPage';
|
||||
import SettingsPage from '@/pages/SettingsPage';
|
||||
import SearchPage from '@/pages/SearchPage';
|
||||
import AccountSettingsPage from '@/pages/AccountSettingsPage';
|
||||
import SteamSettingsPage from '@/pages/SteamSettingsPage';
|
||||
import GeneralSettingsPage from '@/pages/GeneralSettingsPage';
|
||||
// import GeneralSettingsPage from '@/pages/GeneralSettingsPage';
|
||||
import TagsPage from '@/pages/TagsPage';
|
||||
import TermsPage from '@/pages/TermsPage';
|
||||
import WallpapersPage from '@/pages/WallpapersPage';
|
||||
// TODO: use chunks and import directly
|
||||
// TODO: separate into different files
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -74,65 +75,54 @@ const routes = [
|
|||
meta: {
|
||||
title: 'Settings',
|
||||
},
|
||||
redirect: { name: 'general.settings' },
|
||||
children: [
|
||||
{
|
||||
name: 'account.settings',
|
||||
path: 'account',
|
||||
component: AccountSettingsPage,
|
||||
meta: {
|
||||
title: "Account",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'steam.settings',
|
||||
path: 'steam',
|
||||
component: SteamSettingsPage,
|
||||
meta: {
|
||||
title: "Steam",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'general.settings',
|
||||
path: '',
|
||||
component: GeneralSettingsPage,
|
||||
meta: {
|
||||
title: 'Settings',
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'team.settings',
|
||||
path: 'tags',
|
||||
component: TagsPage,
|
||||
meta: {
|
||||
title: 'Tags',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'profile.settings',
|
||||
path: 'profile',
|
||||
component: ProfileSettingsPage,
|
||||
meta: {
|
||||
title: 'Edit profile',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'notes.settings',
|
||||
path: 'notes',
|
||||
component: NotesPage,
|
||||
meta: {
|
||||
title: 'Notes',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'wallpapers.settings',
|
||||
path: 'wallpapers',
|
||||
component: WallpapersPage,
|
||||
meta: {
|
||||
title: 'Wallpapers',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'steam.settings',
|
||||
path: '/settings/steam',
|
||||
component: SteamSettingsPage,
|
||||
meta: {
|
||||
title: "Steam",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'account.settings',
|
||||
path: '/settings/account',
|
||||
component: AccountSettingsPage,
|
||||
meta: {
|
||||
title: "Steam",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'tags.settings',
|
||||
path: '/settings/tags',
|
||||
component: TagsPage,
|
||||
meta: {
|
||||
title: 'Tags',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'profile.settings',
|
||||
path: '/settings/profile',
|
||||
component: ProfileSettingsPage,
|
||||
meta: {
|
||||
title: 'Edit profile',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'notes.settings',
|
||||
path: '/settings/notes',
|
||||
component: NotesPage,
|
||||
meta: {
|
||||
title: 'Notes',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'wallpapers.settings',
|
||||
path: '/settings/wallpapers',
|
||||
component: WallpapersPage,
|
||||
meta: {
|
||||
title: 'Wallpapers',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'releases',
|
||||
|
|
|
|||
|
|
@ -35,5 +35,4 @@ $modal-sm: 400px !default;
|
|||
$modal-fade-transform: translate(0, -150px) !default;
|
||||
$modal-show-transform: none !default;
|
||||
$modal-transition: transform .1s ease-out !default;
|
||||
// $modal-scale-transform: scale(1.02) !default;
|
||||
//
|
||||
$modal-scale-transform: scale(1.5) !default;
|
||||
|
|
|
|||
Loading…
Reference in a new issue