Change how background is set

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;
+    min-height: calc(100vh - 62px);
-    overflow-y: auto;
+    // overflow-y: auto;
-    // height: calc(100vh - 54px);
   }
 </style>

src/components/BoardsDropdown.vue

@@ -1,46 +1,21 @@
 <template lang="html">
-  <b-dropdown
+  <div>
-    split
+    <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)

src/components/GameBoards.vue

@@ -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>

src/components/GameCards/GameCardDefault.vue

@@ -2,7 +2,7 @@
   <b-card
     no-body
     bg-variant="transparent"
-    class="card cursor-pointer"
+    class="cursor-pointer"
   >
     <b-row
       no-gutters

src/components/GameCards/GameCardGrid.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <b-card
     no-body
-    class="cursor-pointer"
+    class="cursor-pointer text-center"
     :img-src="coverUrl"
     img-top
   >

src/components/Lists/GameList.vue

@@ -83,14 +83,16 @@
           {{ $t('board.list.emptyListButton') }}
         </b-button> -->
 
-        <b-alert
+        <b-button
           v-if="isEmpty"
           variant="light"
-          show
+          block
-          class="text-center"
+          class="mb-2"
+          :to="{ name: 'search' }"
         >
-          [Empty]
+          <!-- TODO: add board id in params -->
-        </b-alert>
+          Add games
+        </b-button>
       </draggable>
     </b-card>
   </div>

src/components/PageHeader.vue

@@ -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">

src/pages/AuthPage.vue

@@ -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>

src/pages/BoardPage.vue

@@ -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;

src/pages/CreateBoardPage.vue

@@ -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);
 }
 

src/pages/GamePage.vue

@@ -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>

src/pages/SearchPage.vue

@@ -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;