mirror of
https://github.com/romancm/gamebrary
synced 2024-11-27 05:30:22 +00:00
UX Updates
This commit is contained in:
Gamebrary
parent
53f10564b5
commit
de132c2286
16 changed files with 341 additions and 277 deletions
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 26 KiB |
31
src/App.vue
31
src/App.vue
|
|
@ -1,3 +1,4 @@
|
|||
<!-- TODO: Use moment? or use dayjs without wrapper -->
|
||||
<!-- TODO: remove toasts -->
|
||||
<!-- TODO: add mega search shift + k -->
|
||||
<!-- TODO: re-translate strings -->
|
||||
|
|
@ -23,17 +24,18 @@
|
|||
@shortkey="handleShortcutAction"
|
||||
>
|
||||
<page-header />
|
||||
|
||||
<main :class="[{ 'authorizing': !user }, 'bg-light']">
|
||||
<global-modals />
|
||||
<router-view />
|
||||
</main>
|
||||
<router-view class="viewport" />
|
||||
<auth-modal />
|
||||
<keyboard-shortcuts-modal />
|
||||
<add-remove-game />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthModal from '@/components/AuthModal';
|
||||
import AddRemoveGame from '@/components/AddRemoveGame';
|
||||
import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
|
||||
import PageHeader from '@/components/PageHeader';
|
||||
import GlobalModals from '@/components/GlobalModals';
|
||||
import sessionMixin from '@/mixins/sessionMixin';
|
||||
import firebase from 'firebase/app';
|
||||
import { mapState } from 'vuex';
|
||||
|
|
@ -46,7 +48,9 @@ export default {
|
|||
|
||||
components: {
|
||||
PageHeader,
|
||||
GlobalModals,
|
||||
AuthModal,
|
||||
AddRemoveGame,
|
||||
KeyboardShortcutsModal,
|
||||
},
|
||||
|
||||
mixins: [sessionMixin],
|
||||
|
|
@ -130,17 +134,14 @@ export default {
|
|||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
#app {
|
||||
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
|
||||
height: 100vh;
|
||||
// background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,212,255,1) 100%);
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
header {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
|
||||
main {
|
||||
.viewport {
|
||||
// padding-top: 54px !important;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 54px);
|
||||
// height: calc(100vh - 54px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</header>
|
||||
|
||||
<!-- TODO: show active board at top -->
|
||||
Boards:
|
||||
<h4 class="mx-2">Boards:</h4>
|
||||
<b-list-group flush>
|
||||
<b-list-group-item
|
||||
v-for="board in formattedBoards"
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
@click="expandedBoard = board.id === expandedBoard ? null : board.id"
|
||||
>
|
||||
<header class="p-2 d-flex justify-content-between align-items-center">
|
||||
<aside>
|
||||
<aside class="d-flex">
|
||||
<b-avatar
|
||||
rounded
|
||||
:class="['board-thumbnail mr-2', { 'bg-dark' : !board.backgroundColor }]"
|
||||
|
|
@ -44,7 +44,12 @@
|
|||
`"
|
||||
:to="{ name: 'board', params: { id: board.id } }"
|
||||
/>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
{{ board.name }}
|
||||
<br />
|
||||
<small>{{ board.lists.length }} Lists</small>
|
||||
</div>
|
||||
<!-- TODO: show "In XX lists" -->
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,13 +10,12 @@
|
|||
Edit board
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-b-modal.add-list
|
||||
<!-- <b-button
|
||||
block
|
||||
variant="primary"
|
||||
>
|
||||
Add list
|
||||
</b-button>
|
||||
</b-button> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="html">
|
||||
<div v-if="game" class="mt-4 d-block">
|
||||
<div v-if="game">
|
||||
<b-button
|
||||
v-for="{ url, id, icon, svg } in links"
|
||||
:href="url"
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
<template lang="html">
|
||||
<b-card v-if="similarGames.length">
|
||||
<h4 class="text-center">You may also like:</h4>
|
||||
<div v-if="similarGames.length">
|
||||
<h4 class="text-center text-muted">You may also like</h4>
|
||||
|
||||
<div class="d-flex overflow-auto">
|
||||
<b-card
|
||||
v-for="game in similarGames"
|
||||
:key="game.id"
|
||||
:title="game.name"
|
||||
title-tag="small"
|
||||
class="flex-shrink-0 mr-2 cursor-pointer"
|
||||
style="max-width: 120px;"
|
||||
body-class="p-1 px-2"
|
||||
style="max-width: 180px;"
|
||||
body-class="p-2 text-center text-muted"
|
||||
:img-src="getCoverUrl(game)"
|
||||
:img-alt="game.name"
|
||||
img-top
|
||||
@click="openGame(game)"
|
||||
/>
|
||||
</div>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -71,6 +70,3 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
</style>
|
||||
|
|
|
|||
45
src/components/GameCards/GameCardSearchVertical.vue
Normal file
45
src/components/GameCards/GameCardSearchVertical.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<template lang="html">
|
||||
<b-card
|
||||
no-body
|
||||
:title="game.name"
|
||||
:img-src="coverUrl"
|
||||
:img-alt="game.name"
|
||||
img-top
|
||||
class="mb-2"
|
||||
footer-class="p-0 text-center font-weight-bold bold strong"
|
||||
@click="addGameToList"
|
||||
>
|
||||
<!-- :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" -->
|
||||
|
||||
<template #footer>
|
||||
<small class="text-muted">
|
||||
<strong>{{ game.name }}</strong>
|
||||
</small>
|
||||
</template>
|
||||
</b-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGameCoverUrl } from '@/utils';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
game: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
coverUrl() {
|
||||
return getGameCoverUrl(this.game);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addGameToList() {
|
||||
this.$bus.$emit('ADD_GAME', this.game.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template lang="html">
|
||||
<div>
|
||||
<auth-modal />
|
||||
<keyboard-shortcuts-modal />
|
||||
<add-remove-game />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import AuthModal from '@/components/AuthModal';
|
||||
import AddRemoveGame from '@/components/AddRemoveGame';
|
||||
import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AuthModal,
|
||||
AddRemoveGame,
|
||||
KeyboardShortcutsModal,
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
<b-button
|
||||
block
|
||||
size="sm"
|
||||
variant="outline-light"
|
||||
class="text-dark d-flex justify-content-between align-items-center px-2"
|
||||
variant="transparent"
|
||||
class="text-dark d-flex justify-content-between align-items-center pl-0"
|
||||
:disabled="preview || (user && user.uid !== board.owner)"
|
||||
:to="{ name: 'board.list.edit', params: { id: board.id, listIndex } }"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template lang="html">
|
||||
<header class="py-1 px-2 d-flex">
|
||||
<header class="py-1 px-2 d-flex position-fixed">
|
||||
<home-button />
|
||||
<boards-dropdown v-if="isBoardPage || isGamePage" />
|
||||
<game-dropdown v-if="isGamePage" />
|
||||
<boards-dropdown v-if="board.id && (isBoardPage || isGamePage)" />
|
||||
<!-- <game-dropdown v-if="isGamePage" /> -->
|
||||
|
||||
<div class="global-actions">
|
||||
<portal-target name="headerActions" />
|
||||
|
|
@ -11,7 +11,12 @@
|
|||
Upgrade
|
||||
</b-button> -->
|
||||
|
||||
<search-box />
|
||||
<b-button
|
||||
variant="primary"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
<i class="fas fa-search fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
|
||||
<b-dropdown
|
||||
v-if="user"
|
||||
|
|
@ -24,6 +29,7 @@
|
|||
<template #button-content>
|
||||
<b-avatar rounded variant="info" :src="user.photoURL" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'settings' }"
|
||||
>
|
||||
|
|
@ -58,9 +64,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import GameDropdown from '@/components/Game/GameDropdown';
|
||||
// import GameDropdown from '@/components/Game/GameDropdown';
|
||||
import BoardsDropdown from '@/components/BoardsDropdown';
|
||||
import SearchBox from '@/components/SearchBox';
|
||||
import HomeButton from '@/components/Shared/HomeButton';
|
||||
import sessionMixin from '@/mixins/sessionMixin';
|
||||
import { mapState } from 'vuex';
|
||||
|
|
@ -69,9 +74,8 @@ export default {
|
|||
mixins: [sessionMixin],
|
||||
|
||||
components: {
|
||||
GameDropdown,
|
||||
// GameDropdown,
|
||||
BoardsDropdown,
|
||||
SearchBox,
|
||||
HomeButton,
|
||||
},
|
||||
|
||||
|
|
@ -101,6 +105,7 @@ export default {
|
|||
// height: 46px;
|
||||
grid-template-columns: 65px 1fr;
|
||||
// background-color: #574c4f;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<div class="search-box mr-2">
|
||||
<b-form @submit.prevent="search" :class="isSearchPage ? '' : 'd-none d-md-block'">
|
||||
<div class="search-box">
|
||||
<b-form @submit.prevent="search">
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="searchText"
|
||||
|
|
@ -16,13 +16,20 @@
|
|||
type="submit"
|
||||
variant="info"
|
||||
>
|
||||
<i class="fas fa-search fa-fw" aria-hidden />
|
||||
<i
|
||||
class="fas fa-search fa-fw"
|
||||
aria-hidden
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-form>
|
||||
|
||||
<b-button :class="isSearchPage ? 'd-none' : 'd-md-none'" variant="primary" :to="{ name: 'search' }">
|
||||
<b-button
|
||||
:class="isSearchPage ? 'd-none' : 'd-md-none'"
|
||||
variant="primary"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
<i class="fas fa-search fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,10 @@ export default {
|
|||
return this.list?.settings?.showGameTags && this.gameTags;
|
||||
},
|
||||
|
||||
showReleaseDates() {
|
||||
return this.list?.settings?.showReleaseDates;
|
||||
},
|
||||
|
||||
gameProgress() {
|
||||
const { gameId, progresses } = this;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<div
|
||||
:class="['board p-3', { dragging, empty }]"
|
||||
:class="['board px-3 pb-3', { dragging, empty }]"
|
||||
:style="boardStyles"
|
||||
>
|
||||
<board-placeholder v-if="loading" />
|
||||
|
|
@ -16,19 +16,7 @@
|
|||
|
||||
<empty-board v-if="empty" />
|
||||
|
||||
<div
|
||||
v-else-if="user && user.uid && user.uid === board.owner"
|
||||
class="d-flex flex-column"
|
||||
>
|
||||
<b-button
|
||||
variant="light"
|
||||
v-b-modal:add-list
|
||||
>
|
||||
<i class="fas fa-plus fa-fw" aria-hidden />
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<add-list-modal />
|
||||
<add-list v-else-if="user && user.uid && user.uid === board.owner" />
|
||||
</template>
|
||||
|
||||
<b-alert
|
||||
|
|
@ -44,7 +32,7 @@
|
|||
<script>
|
||||
import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
|
||||
import EmptyBoard from '@/components/Board/EmptyBoard';
|
||||
import AddListModal from '@/components/Board/AddListModal';
|
||||
import AddList from '@/components/Board/AddList';
|
||||
import GameList from '@/components/Lists/GameList';
|
||||
import chunk from 'lodash.chunk';
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
|
|
@ -54,7 +42,7 @@ export default {
|
|||
GameList,
|
||||
BoardPlaceholder,
|
||||
EmptyBoard,
|
||||
AddListModal,
|
||||
AddList,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -188,7 +176,7 @@ export default {
|
|||
const { lists } = this.board;
|
||||
|
||||
if (lists && lists.length === 0) {
|
||||
this.$bvModal.show('add-list');
|
||||
// TODO: toggle add list
|
||||
}
|
||||
|
||||
const boardGames = lists.length
|
||||
|
|
|
|||
|
|
@ -23,12 +23,6 @@
|
|||
</header>
|
||||
|
||||
<form ref="boardSettingsForm" @submit.stop.prevent="submit">
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-button @click="goToBoard">
|
||||
Back to board
|
||||
</b-button>
|
||||
|
||||
<b-form-group
|
||||
:label="$t('board.settings.nameLabel')"
|
||||
label-for="name"
|
||||
|
|
@ -64,6 +58,14 @@
|
|||
|
||||
<hr class="my-3">
|
||||
|
||||
<edit-board-background-modal />
|
||||
|
||||
<b-button v-b-modal.boardBackground>
|
||||
<i class="fas fa-images fa-fw" aria-hidden />
|
||||
<br />
|
||||
Change background
|
||||
</b-button>
|
||||
|
||||
<hr class="my-3">
|
||||
|
||||
<b-button
|
||||
|
|
@ -73,17 +75,6 @@
|
|||
{{ $t('board.settings.deleteBoard') }}
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
@click="saveSettings"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</b-col>
|
||||
|
||||
<b-col>
|
||||
<!-- <b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
|
|
@ -93,13 +84,13 @@
|
|||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button> -->
|
||||
|
||||
<b-alert :show="noPlatformsSelected" variant="warning">
|
||||
<!-- <b-alert :show="noPlatformsSelected" variant="warning">
|
||||
No platforms selected, game search will include all platforms.
|
||||
</b-alert>
|
||||
|
||||
<b-alert :show="noPlatformsSelected" variant="success">
|
||||
Select platforms to limit search results.
|
||||
</b-alert>
|
||||
</b-alert> -->
|
||||
|
||||
<!-- <platform-picker v-model="platforms" /> -->
|
||||
<!-- <b-button-toolbar aria-label="Toolbar with button groups and dropdown menu">
|
||||
|
|
@ -148,7 +139,7 @@
|
|||
/>
|
||||
</b-form-group> -->
|
||||
|
||||
<b-dropdown
|
||||
<!-- <b-dropdown
|
||||
text="Select platforms"
|
||||
class="platforms-dropdown"
|
||||
>
|
||||
|
|
@ -158,13 +149,7 @@
|
|||
>
|
||||
{{ platform.name }}
|
||||
</b-dropdown-item>
|
||||
<!-- <pre>{{ platforms }}</pre> -->
|
||||
<!-- <b-dropdown-item>Second Action</b-dropdown-item> -->
|
||||
<!-- <b-dropdown-item>Third Action</b-dropdown-item> -->
|
||||
<!-- <b-dropdown-divider></b-dropdown-divider> -->
|
||||
<!-- <b-dropdown-item active>Active action</b-dropdown-item> -->
|
||||
<!-- <b-dropdown-item disabled>Disabled action</b-dropdown-item> -->
|
||||
</b-dropdown>
|
||||
</b-dropdown> -->
|
||||
|
||||
|
||||
<!-- <b-button
|
||||
|
|
@ -176,17 +161,15 @@
|
|||
{{ platform.name }}
|
||||
</small>
|
||||
</b-button> -->
|
||||
</b-col>
|
||||
|
||||
<b-col>
|
||||
<edit-board-background-modal />
|
||||
<b-button v-b-modal.boardBackground>
|
||||
<i class="fas fa-images fa-fw" aria-hidden />
|
||||
<br />
|
||||
Change background
|
||||
<b-button
|
||||
variant="primary"
|
||||
:disabled="saving"
|
||||
@click="saveSettings"
|
||||
>
|
||||
<b-spinner small v-if="saving" />
|
||||
<span v-else>{{ $t('global.save') }}</span>
|
||||
</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</form>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,28 @@
|
|||
<!-- TODO: Show lists/boards that the game belongs to -->
|
||||
|
||||
<template lang="html">
|
||||
<b-container fluid class="p-2">
|
||||
<b-container fluid class="game-page p-2">
|
||||
<b-skeleton v-if="loading" />
|
||||
|
||||
<template v-else-if="game">
|
||||
<b-row>
|
||||
<b-row class="game-backdrop" :style="`background-image: url(${gameScrenshot})`">
|
||||
<b-col
|
||||
cols="12"
|
||||
>
|
||||
<div class="vh-100">
|
||||
<!-- <b-img
|
||||
:src="gameCoverUrl"
|
||||
:alt="game.name"
|
||||
class="cursor-pointer game-cover"
|
||||
width="200"
|
||||
rounded
|
||||
@click.stop="openGameCover"
|
||||
/> -->
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<b-row class="game">
|
||||
<b-col
|
||||
offset="2"
|
||||
offset-sm="0"
|
||||
|
|
@ -46,6 +63,7 @@
|
|||
md="8"
|
||||
lg="8"
|
||||
xl="9"
|
||||
class="bg-white rounded p-5"
|
||||
>
|
||||
<b-row>
|
||||
<b-col
|
||||
|
|
@ -127,9 +145,6 @@
|
|||
|
||||
<b-col
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="6"
|
||||
xl="6"
|
||||
class="mt-3"
|
||||
>
|
||||
<similar-games
|
||||
|
|
@ -144,21 +159,21 @@
|
|||
xl="6"
|
||||
class="mt-3"
|
||||
>
|
||||
<game-speedruns v-if="game" />
|
||||
<!-- <game-speedruns v-if="game" /> -->
|
||||
<!-- <pre>{{ game.speedruns }}</pre> -->
|
||||
<!-- TODO: add bundles to game detail? -->
|
||||
</b-col>
|
||||
|
||||
<b-col
|
||||
<!-- <b-col
|
||||
cols="12"
|
||||
class="mt-3"
|
||||
>
|
||||
<b-card>
|
||||
<h4>[BUNDLES]</h4>
|
||||
</b-card>
|
||||
<!-- <pre>{{ game }}</pre> -->
|
||||
<!-- {{ game.bundles ? `Found in ${game.bundles.length} compilations.` : null }} -->
|
||||
</b-col>
|
||||
<pre>{{ game }}</pre>
|
||||
{{ game.bundles ? `Found in ${game.bundles.length} compilations.` : null }}
|
||||
</b-col> -->
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
|
|
@ -248,8 +263,6 @@
|
|||
>
|
||||
loading...
|
||||
</timeline> -->
|
||||
|
||||
<!-- <div class="game-backdrop" :style="`background-image: url(${gameScrenshot})`" /> -->
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -265,7 +278,7 @@ import GameRating from '@/components/Game/GameRating';
|
|||
import GameDescription from '@/components/Game/GameDescription';
|
||||
import SimilarGames from '@/components/Game/SimilarGames';
|
||||
import GameWebsites from '@/components/Game/GameWebsites';
|
||||
import GameSpeedruns from '@/components/Game/GameSpeedruns';
|
||||
// import GameSpeedruns from '@/components/Game/GameSpeedruns';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -277,7 +290,7 @@ export default {
|
|||
GameRating,
|
||||
GameNotes,
|
||||
GameWebsites,
|
||||
GameSpeedruns,
|
||||
// GameSpeedruns,
|
||||
SimilarGames,
|
||||
},
|
||||
|
||||
|
|
@ -360,7 +373,7 @@ export default {
|
|||
|
||||
watch: {
|
||||
gameId(gameId) {
|
||||
document.getElementsByTagName('main')[0].scrollTop = 0;
|
||||
// document.getElementsByTagName('main')[0].scrollTop = 0;
|
||||
|
||||
if (gameId) this.loadGame();
|
||||
// TODO: handle missing id, redirect? 404? search?
|
||||
|
|
@ -469,15 +482,17 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
// .game-page {
|
||||
// // z-index: 0;
|
||||
// }
|
||||
|
||||
.game {
|
||||
margin-top: -50vh;
|
||||
}
|
||||
|
||||
.game-backdrop {
|
||||
width: 100%;
|
||||
height: 100vw;
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
backdrop-filter: grayscale(0.5) opacity(0.8) /* ...and on and on... */;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
// opacity: 0.1;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template lang="html">
|
||||
<b-container>
|
||||
<b-row>
|
||||
<b-col cols="3">
|
||||
<b-col cols="3" class="position-sticky mt-2">
|
||||
<b-card>
|
||||
test
|
||||
<!-- TODO: add filters -->
|
||||
<!-- TODO: add view toggle -->
|
||||
Filter
|
||||
|
|
@ -16,11 +18,12 @@
|
|||
Genre
|
||||
Platform
|
||||
Year released
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
||||
<b-col cols="9">
|
||||
<div class="search-page bg-white p-2">
|
||||
|
||||
<div class="search-page p-2">
|
||||
<search-box />
|
||||
<!-- <b-alert show variant="success">
|
||||
Custom search controls go here!
|
||||
</b-alert> -->
|
||||
|
|
@ -30,13 +33,38 @@
|
|||
<b-skeleton v-if="loading" />
|
||||
|
||||
<div v-else-if="searchResults.length > 0">
|
||||
<header class="my-2 d-flex align-items-center justify-content-between">
|
||||
<h3>Search results</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<template v-if="listView">
|
||||
<game-card-search
|
||||
v-for="game in searchResults"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<b-container v-else-if="query.length > 0">
|
||||
|
|
@ -56,16 +84,21 @@
|
|||
|
||||
<script>
|
||||
import GameCardSearch from '@/components/GameCards/GameCardSearch';
|
||||
import SearchBox from '@/components/SearchBox';
|
||||
import GameCardSearchVertical from '@/components/GameCards/GameCardSearchVertical';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GameCardSearch,
|
||||
SearchBox,
|
||||
GameCardSearchVertical,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
searchResults: [],
|
||||
loading: false,
|
||||
listView: true,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -104,4 +137,14 @@ export default {
|
|||
.search-page {
|
||||
min-height: calc(100vh - 46px);
|
||||
}
|
||||
|
||||
.masonry-container {
|
||||
column-count: 5;
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.masonry-item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue