mirror of
https://github.com/romancm/gamebrary
synced 2024-11-27 13:40:48 +00:00
Change how background is set
This commit is contained in:
Gamebrary
parent
de132c2286
commit
a2719e9f93
12 changed files with 126 additions and 146 deletions
41
src/App.vue
41
src/App.vue
|
|
@ -21,6 +21,8 @@
|
|||
id="app"
|
||||
:dir="dir"
|
||||
v-shortkey="KEYBOARD_SHORTCUTS"
|
||||
:style="style"
|
||||
:class="{ 'no-repeat': style.length > 0 }"
|
||||
@shortkey="handleShortcutAction"
|
||||
>
|
||||
<page-header />
|
||||
|
|
@ -58,6 +60,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
debugUserId: null,
|
||||
backgroundImageUrl: null,
|
||||
backgroundColor: null,
|
||||
KEYBOARD_SHORTCUTS,
|
||||
};
|
||||
},
|
||||
|
|
@ -65,6 +69,18 @@ export default {
|
|||
computed: {
|
||||
...mapState(['user', 'settings', 'sessionExpired']),
|
||||
|
||||
style() {
|
||||
const backgroundImage = this.backgroundImageUrl
|
||||
? `background-image: url('${this.backgroundImageUrl}');`
|
||||
: null;
|
||||
|
||||
const backgroundColor = this.backgroundColor
|
||||
? `background-color: ${this.backgroundColor};`
|
||||
: null;
|
||||
|
||||
return [backgroundImage, backgroundColor].join('');
|
||||
},
|
||||
|
||||
userId() {
|
||||
return this.debugUserId || this.user.uid;
|
||||
},
|
||||
|
|
@ -91,12 +107,23 @@ export default {
|
|||
},
|
||||
|
||||
async mounted() {
|
||||
this.$bus.$on('UPDATE_WALLPAPER', this.updateWallpaperUrl);
|
||||
this.$bus.$on('UPDATE_BACKGROUND_COLOR', this.updateBackgroundColor);
|
||||
|
||||
await this.$store.dispatch('GET_TWITCH_TOKEN');
|
||||
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateWallpaperUrl(value) {
|
||||
this.backgroundImageUrl = value;
|
||||
},
|
||||
|
||||
updateBackgroundColor(value) {
|
||||
this.backgroundColor = value;
|
||||
},
|
||||
|
||||
handleShortcutAction(data) {
|
||||
this.$bus.$emit('HANDLE_SHORTCUT', data);
|
||||
},
|
||||
|
|
@ -134,14 +161,20 @@ 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%);
|
||||
min-height: 100vh;
|
||||
background-image: url('~/public/bg-tile.png');
|
||||
display: grid;
|
||||
|
||||
&.no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
// background-size: contain;
|
||||
// background-size: cover;
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.viewport {
|
||||
// padding-top: 54px !important;
|
||||
overflow-y: auto;
|
||||
// height: calc(100vh - 54px);
|
||||
min-height: calc(100vh - 62px);
|
||||
// overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,46 +1,21 @@
|
|||
<template lang="html">
|
||||
<b-dropdown
|
||||
split
|
||||
<div>
|
||||
<b-button
|
||||
: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"
|
||||
split-class="p-0"
|
||||
v-b-tooltip.hover
|
||||
right
|
||||
:title="board.name"
|
||||
:split-to="{ name: 'board', params: { id: board.id } }"
|
||||
>
|
||||
<template #button-content>
|
||||
<!-- <b-avatar
|
||||
variant="primary"
|
||||
:text="boardInitials"
|
||||
rounded
|
||||
/> -->
|
||||
<!-- :class="['board-thumbnail mr-2', { 'bg-dark' : !backgroundColor }]" -->
|
||||
<b-avatar
|
||||
rounded
|
||||
class="board-thumbnail"
|
||||
:title="board.name"
|
||||
text=" "
|
||||
:style="`
|
||||
background-image: url(${boardBackgroundUrl});
|
||||
background-color: ${board.backgroundColor || ''}
|
||||
`"
|
||||
/>
|
||||
|
||||
<small class="px-2 d-none d-md-inline text-nowrap">{{ board.name }}</small>
|
||||
</template>
|
||||
|
||||
<!-- <b-dropdown-item href="#">
|
||||
<b-avatar
|
||||
variant="primary"
|
||||
:text="boardInitials"
|
||||
rounded
|
||||
/>
|
||||
|
||||
{{ board.name }}
|
||||
<i class="fas fa-caret-down fa-fw" aria-hidden />
|
||||
</b-dropdown-item> -->
|
||||
|
||||
<b-dropdown-item
|
||||
size="sm"
|
||||
:to="{ name: 'board.edit', params: { id: board.id } }"
|
||||
|
|
@ -49,9 +24,6 @@
|
|||
Edit board
|
||||
</b-dropdown-item>
|
||||
|
||||
<!-- TODO: Clone board -->
|
||||
<!-- TODO: like/favorite board -->
|
||||
<!-- TODO: Fork board -->
|
||||
<b-dropdown-divider />
|
||||
|
||||
<b-dropdown-item
|
||||
|
|
@ -67,7 +39,6 @@
|
|||
|
||||
<span class="m-2 text-muted">Other boards:</span>
|
||||
|
||||
<!-- TODO: use route directly -->
|
||||
<b-dropdown-item-button
|
||||
v-for="{ id, name, backgroundColor, backgroundUrl } in filteredBoards"
|
||||
:key="id"
|
||||
|
|
@ -88,7 +59,8 @@
|
|||
{{ name }}
|
||||
</b-dropdown-item-button>
|
||||
</template>
|
||||
</b-dropdown>
|
||||
</b-dropdown> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -98,6 +70,11 @@ export default {
|
|||
computed: {
|
||||
...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)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="html">
|
||||
<b-row v-if="user" class="p-1">
|
||||
<b-row v-if="user" class="p-1 boards">
|
||||
<!-- TODO: allow reorganizing and save -->
|
||||
<empty-state
|
||||
v-if="!user || !loading && sortedBoards.length === 0"
|
||||
|
|
@ -156,3 +156,8 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.boards {
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<b-card
|
||||
no-body
|
||||
bg-variant="transparent"
|
||||
class="card cursor-pointer"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<b-row
|
||||
no-gutters
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template lang="html">
|
||||
<b-card
|
||||
no-body
|
||||
class="cursor-pointer"
|
||||
class="cursor-pointer text-center"
|
||||
:img-src="coverUrl"
|
||||
img-top
|
||||
>
|
||||
|
|
|
|||
|
|
@ -83,14 +83,16 @@
|
|||
{{ $t('board.list.emptyListButton') }}
|
||||
</b-button> -->
|
||||
|
||||
<b-alert
|
||||
<b-button
|
||||
v-if="isEmpty"
|
||||
variant="light"
|
||||
show
|
||||
class="text-center"
|
||||
block
|
||||
class="mb-2"
|
||||
:to="{ name: 'search' }"
|
||||
>
|
||||
[Empty]
|
||||
</b-alert>
|
||||
<!-- TODO: add board id in params -->
|
||||
Add games
|
||||
</b-button>
|
||||
</draggable>
|
||||
</b-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template lang="html">
|
||||
<header class="py-1 px-2 d-flex position-fixed">
|
||||
<header class="p-2 d-flex">
|
||||
<home-button />
|
||||
<boards-dropdown v-if="board.id && (isBoardPage || isGamePage)" />
|
||||
<boards-dropdown v-if="board.id && isBoardPage" />
|
||||
<!-- <game-dropdown v-if="isGamePage" /> -->
|
||||
|
||||
<div class="global-actions">
|
||||
|
|
|
|||
|
|
@ -161,7 +161,6 @@ export default {
|
|||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.auth-page {
|
||||
background-image: url('~/public/bg-tile.png');
|
||||
height: calc(100vh - 46px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template lang="html">
|
||||
<div
|
||||
:class="['board px-3 pb-3', { dragging, empty }]"
|
||||
:style="boardStyles"
|
||||
>
|
||||
<board-placeholder v-if="loading" />
|
||||
|
||||
|
|
@ -72,18 +71,6 @@ export default {
|
|||
return this.user || isPublicBoard;
|
||||
},
|
||||
|
||||
boardStyles() {
|
||||
const backgroundImage = this.backgroundUrl
|
||||
? `background-image: url('${this.backgroundUrl}');`
|
||||
: null;
|
||||
|
||||
const backgroundColor = this.board?.backgroundColor
|
||||
? `background-color: ${this.board.backgroundColor};`
|
||||
: null;
|
||||
|
||||
return [backgroundImage, backgroundColor].join('');
|
||||
},
|
||||
|
||||
boardId() {
|
||||
return this.$route.params?.id;
|
||||
},
|
||||
|
|
@ -94,6 +81,10 @@ export default {
|
|||
},
|
||||
|
||||
watch: {
|
||||
backgroundUrl(value) {
|
||||
if (value) this.$bus.$emit('UPDATE_WALLPAPER', value);
|
||||
},
|
||||
|
||||
boardId(boardId) {
|
||||
if (boardId) this.load();
|
||||
},
|
||||
|
|
@ -121,6 +112,8 @@ export default {
|
|||
|
||||
destroyed() {
|
||||
this.$bus.$off('LOAD_BOARD_BACKGROUND');
|
||||
this.$bus.$emit('UPDATE_WALLPAPER', null);
|
||||
this.$bus.$emit('UPDATE_BACKGROUND_COLOR', null);
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
@ -163,6 +156,8 @@ export default {
|
|||
async loadBoardBackground() {
|
||||
const url = this.board?.backgroundUrl;
|
||||
|
||||
if (this.board?.backgroundColor) this.$bus.$emit('UPDATE_BACKGROUND_COLOR', this.board?.backgroundColor);
|
||||
|
||||
if (url) {
|
||||
this.backgroundUrl = url.includes('igdb')
|
||||
? url
|
||||
|
|
@ -220,9 +215,8 @@ export default {
|
|||
.board {
|
||||
user-select: none;
|
||||
display: flex;
|
||||
background-size: cover;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
min-height: calc(100vh - 62px);
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
|
|
|
|||
|
|
@ -114,7 +114,6 @@ export default {
|
|||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.create-board-page {
|
||||
background-image: url('~/public/bg-tile.png');
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,27 +6,10 @@
|
|||
<!-- TODO: Show lists/boards that the game belongs to -->
|
||||
|
||||
<template lang="html">
|
||||
<b-container fluid class="game-page p-2">
|
||||
<b-container fluid class="px-2 pb-2">
|
||||
<b-skeleton v-if="loading" />
|
||||
|
||||
<template v-else-if="game">
|
||||
<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"
|
||||
|
|
@ -303,6 +286,7 @@ export default {
|
|||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.$bus.$emit('UPDATE_WALLPAPER', null);
|
||||
// TODO: only clear board if game being viewed is not in current board
|
||||
// if (!['game', 'board'].includes(this.$route.name)) {
|
||||
// this.$store.commit('CLEAR_BOARD');
|
||||
|
|
@ -378,6 +362,10 @@ export default {
|
|||
if (gameId) this.loadGame();
|
||||
// TODO: handle missing id, redirect? 404? search?
|
||||
},
|
||||
|
||||
gameScrenshot(value) {
|
||||
if (value) this.$bus.$emit('UPDATE_WALLPAPER', value);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -482,17 +470,4 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
// .game-page {
|
||||
// // z-index: 0;
|
||||
// }
|
||||
|
||||
.game {
|
||||
margin-top: -50vh;
|
||||
}
|
||||
|
||||
.game-backdrop {
|
||||
backdrop-filter: grayscale(0.5) opacity(0.8) /* ...and on and on... */;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</b-col>
|
||||
|
||||
<b-col cols="9">
|
||||
<div class="search-page p-2">
|
||||
<div class="p-2">
|
||||
<search-box />
|
||||
<!-- <b-alert show variant="success">
|
||||
Custom search controls go here!
|
||||
|
|
@ -134,10 +134,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
.search-page {
|
||||
min-height: calc(100vh - 46px);
|
||||
}
|
||||
|
||||
.masonry-container {
|
||||
column-count: 5;
|
||||
column-gap: 1rem;
|
||||
|
|
|
|||
Loading…
Reference in a new issue