UI cleanup

src/components/Board/MiniBoard.vue

@@ -1,6 +1,6 @@
 <template lang="html">
   <div
-    :class="['mini-board overflow-hidden p-1 rounded cursor-pointer', { 'bg-secondary': !board.backgroundColor }]"
+    :class="['mini-board overflow-hidden p-1 rounded cursor-pointer m-0', { 'bg-secondary': !board.backgroundColor }]"
     :style="miniBoardStyles"
     @click="$emit('view-board', board.id)"
   >
@@ -10,10 +10,6 @@
       <small v-if="board.isPublic" class="text-info">
         (Public)
       </small>
-
-      <div class="ml-auto">
-        <slot />
-      </div>
     </header>
 
     <div class="lists rounded overflow-hidden">
@@ -68,12 +64,13 @@ $boardHeight: 200px;
   background-repeat: no-repeat;
   background-size: cover;
   height: $boardHeight;
-  width: 363.2px;
+  width: 100%;
+  // width: 363.2px;
 
-  @media(max-width: 1024px) { width: 320px; }
+  // @media(max-width: 1024px) { width: 320px; }
-  @media(max-width: 768px) { width: 360px; }
+  // @media(max-width: 768px) { width: 360px; }
-  @media(width: 500px) { width: 222px; }
+  // @media(width: 500px) { width: 222px; }
-  @media(max-width: 500px) { width: calc(100% - 8px); }
+  // @media(max-width: 500px) { width: calc(100% - 8px); }
 }
 
 .lists {

src/components/Game/GameSpeedruns.vue

@@ -1,7 +1,8 @@
 <template lang="html">
-  <div>
+  <b-card class="bg-info">
-    <pre>{{ gameLogo }}</pre>
+    [SPEEDRUNS]
-  </div>
+    <!-- <pre>{{ gameLogo }}</pre> -->
+  </b-card>
 </template>
 
 <script>

src/components/Game/GameVideos.vue

@@ -1,29 +0,0 @@
-<template lang="html">
-  <div class="videos">
-    <b-embed
-      v-for="{ video_id } in videos"
-      class="rounded mb-2"
-      :key="video_id"
-      type="iframe"
-      aspect="16by9"
-      :src="`https://www.youtube.com/embed/${video_id}`"
-      allowfullscreen
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    videos: Array,
-  },
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.videos {
-  display: grid;
-  grid-template-columns: auto auto auto auto;
-  grid-gap: 1rem;
-}
-</style>

src/components/Game/SimilarGames.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-card v-if="similarGames.length" class="mx-2">
+  <b-card v-if="similarGames.length">
     <h4 class="text-center">You may also like:</h4>
 
     <div class="d-flex overflow-auto">

src/components/GameBoards.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div v-if="user">
+  <b-row v-if="user" class="p-1">
     <!-- TODO: allow reorganizing and save -->
     <empty-state
       v-if="!user || !loading && sortedBoards.length === 0"
@@ -15,47 +15,28 @@
       </b-button> -->
     </empty-state>
 
-    <div class="packery-grid">
+    <template v-if="showPlaceholder">
-      <div v-if="showPlaceholder">
       Loading
-      </div>
+    </template>
 
-      <mini-board
+    <template v-else>
+      <b-col
         v-for="board in sortedBoards"
         :key="board.id"
+        cols="6"
+        sm="6"
+        md="4"
+        lg="3"
+        class="p-1"
+      >
+        <mini-board
           :board="board"
           :background-image="getWallpaperUrl(board.backgroundUrl)"
-        class="p-relative"
           @view-board="viewBoard(board.id)"
-      >
+        />
-        <!-- <b-button
+      </b-col>
-          size="sm"
+    </template>
-          variant="transparent"
+  </b-row>
-          @click.stop="editBoard(board.id)"
-        >
-          <i class="fas fa-pencil-alt fa-fw" aria-hidden />
-        </b-button> -->
-      </mini-board>
-
-      <!-- TODO: show public boards -->
-      <!-- <mini-board
-        v-for="board in publicBoards"
-        :key="board.id"
-        :board="board"
-        :background-image="getWallpaperUrl(board.backgroundUrl)"
-        class="p-relative"
-        @view-board="viewPublicBoard(board.id)"
-      >
-        <b-button
-          class="position-absolute edit-board-button"
-          size="sm"
-          @click.stop="editBoard(board)"
-        >
-          <i class="fas fa-pencil-alt fa-fw" aria-hidden />
-        </b-button>
-      </mini-board> -->
-    </div>
-  </div>
 </template>
 
 <script>
@@ -104,10 +85,7 @@ export default {
 
   methods: {
     load() {
-      if (this.user) {
+      if (this.user) this.loadPlatforms();
-        this.renderGrid();
-        this.loadPlatforms();
-      }
     },
 
     editBoard(id) {
@@ -152,13 +130,6 @@ export default {
         });
 
       this.loading = false;
-      this.renderGrid();
-    },
-
-    renderGrid() {
-      this.packery = this.showPlaceholder && this.user
-        ? null
-        : new Packery('.packery-grid', { itemSelector: '.mini-board', gutter: 16 });
     },
 
     viewBoard(id) {

src/components/PageHeader.vue

@@ -48,6 +48,7 @@
       <b-button
         v-else
         class="ml-2"
+        variant="primary"
         :to="{ name: 'auth' }"
       >
         Login

src/pages/DashboardPage.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <b-container fluid class="p-2">
+  <b-container fluid>
     <portal to="headerActions">
       <b-button
         variant="primary"
@@ -10,9 +10,7 @@
       </b-button>
     </portal>
 
-    <div v-if="boards.length">
+    <game-boards v-if="boards.length" class="mb-3" />
-      <game-boards class="mb-3" />
-    </div>
 
     <empty-state
       v-else

src/pages/EditBoardPage.vue

@@ -1,9 +1,27 @@
+<!-- TODO: Add back button -->
+<!-- TODO: refactor platforms and wallpapers -->
+<!-- TODO: add board preview-->
+<!-- TODO: use board placeholder for preview / disable placeholder animation -->
 <template lang="html">
-  <!-- TODO: Add back button -->
+  <b-container fluid class="p-0">
-  <!-- TODO: refactor platforms and wallpapers -->
+    <b-row v-if="board" no-gutters>
-  <!-- TODO: add board preview-->
+      <b-col sm="12" md="6">
-  <!-- TODO: use board placeholder for preview / disable placeholder animation -->
+        <div class="p-3 list-preview d-flex justify-content-center">
-  <b-container fluid class="p-2">
+          <!-- <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">
+            <h1 class="mb-0">Edit board</h1>
+
+            <b-button variant="success">
+              Add games
+            </b-button>
+          </header>
+
           <form ref="boardSettingsForm" @submit.stop.prevent="submit">
             <b-row>
               <b-col>
@@ -170,16 +188,21 @@
               </b-col>
             </b-row>
           </form>
+        </b-card>
+      </b-col>
+    </b-row>
   </b-container>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex';
 import EditBoardBackgroundModal from '@/components/Board/EditBoardBackgroundModal';
+import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
 import orderby from 'lodash.orderby';
 
 export default {
   components: {
+    BoardPlaceholder,
     EditBoardBackgroundModal,
   },
 

src/pages/GamePage.vue

@@ -11,7 +11,14 @@
 
     <template v-else-if="game">
       <b-row>
-        <b-col>
+        <b-col
+          offset="2"
+          offset-sm="0"
+          cols="8"
+          sm="4"
+          md="4"
+          xl="3"
+        >
           <b-img
             :src="gameCoverUrl"
             :alt="game.name"
@@ -26,9 +33,6 @@
             height="100px"
           /> -->
 
-          <!-- <template v-else>
-            <game-videos :videos="game.videos" v-if="game.videos" />
-          </template> -->
           <amazon-links class="mt-2" />
 
           <div class="game-info">
@@ -36,7 +40,22 @@
           </div>
         </b-col>
 
-        <b-col>
+        <b-col
+          cols="12"
+          sm="8"
+          md="8"
+          lg="8"
+          xl="9"
+        >
+          <b-row>
+            <b-col
+              offset="12"
+              offset-sm="0"
+              cols="12"
+              sm="12"
+              md="7"
+              xl="8"
+            >
               <game-titles />
               <b-progress
                 v-if="progress"
@@ -66,10 +85,16 @@
               <game-notes />
             </b-col>
 
-        <b-col>
+            <b-col
+              offset="1"
+              offset-sm="0"
+              cols="10"
+              sm="12"
+              md="5"
+              xl="4"
+            >
               <b-card
                 no-body
-            style="max-width: 20rem;"
               >
                 <b-link :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
                   <b-card-img :src="gameScrenshot" top />
@@ -98,20 +123,41 @@
               </b-card>
             </b-col>
           </b-row>
+        </b-col>
 
-      <b-row>
+        <b-col
-        <b-col>
+          cols="12"
+          sm="12"
+          md="6"
+          xl="6"
+          class="mt-3"
+        >
           <similar-games
             :loading="loading"
-            class="mb-2"
           />
         </b-col>
-        <b-col>
+
-          <!-- Bundles -->
+        <b-col
+          cols="12"
+          sm="12"
+          md="6"
+          xl="6"
+          class="mt-3"
+        >
           <game-speedruns v-if="game" />
           <!-- <pre>{{ game.speedruns }}</pre> -->
           <!-- TODO: add bundles to game detail? -->
-          {{ game.bundles ? `Found in ${game.bundles.length} compilations.` : null }}
+        </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>
       </b-row>
     </template>

src/pages/SearchPage.vue

@@ -4,18 +4,18 @@
       <b-col cols="3">
         <!-- TODO: add filters -->
         <!-- TODO: add view toggle -->
-        <!-- Filter -->
+        Filter
 
-        <!-- <h3>Sort by</h3> -->
+        <h3>Sort by</h3>
-        <!-- Latest -->
+        Latest
-        <!-- Oldest -->
+        Oldest
-        <!-- Relevance -->
+        Relevance
 
-        <!-- <h3>Filters</h3> -->
+        <h3>Filters</h3>
-        <!-- Tags -->
+        Tags
-        <!-- Genre -->
+        Genre
-        <!-- Platform -->
+        Platform
-        <!-- Year released -->
+        Year released
       </b-col>
 
       <b-col cols="9">
@@ -79,21 +79,20 @@ export default {
 
   watch: {
     query(value) {
+      // todo: Avoid search if new/old values are same
       this.search(value);
     },
   },
 
   mounted() {
-    if (this.query) this.search();
+    this.search();
   },
 
   methods: {
     async search() {
       this.loading = true;
 
-      this.searchResults = this.query
+      this.searchResults = await this.$store.dispatch('CUSTOM_SEARCH', { searchText: 'mario' })
-        ? await this.$store.dispatch('CUSTOM_SEARCH', { searchText: this.query })
-        : [];
 
       this.loading = false;
     },

src/pages/game/GameMediaPage.vue

@@ -3,38 +3,61 @@
 <!-- TODO: add loading placeholder -->
 <template lang="html">
   <b-container fluid class="p-2">
-    <b-row>
+    <b-form-row>
       <b-col cols="3">
         <b-img
           :src="gameCoverUrl"
           rounded
           fluid-grow
-          @click.stop="openModal(index)"
+          @click.stop="openModal"
         />
       </b-col>
 
-      <b-col cols="7">
+      <b-col cols="9">
-        <div>
         <h2>{{ game.name }}</h2>
-          <p class="text-muted">
+        <h4>Screenshots</h4>
-            Images
-          </p>
 
-        </div>
+        <b-form-row no-gutters>
-
+          <b-col
-        <div class="packery-grid">
+            cols="4"
-          <b-img
+            sm="4"
+            md="3"
+            xl="2"
             v-for="(thumbnail, index) in gameThumbnails"
+            v-show="index > 1"
+            class="p-1"
             :key="index"
+          >
+            <b-img
               :src="thumbnail"
-            width="200"
-            :class="index === 0 ? 'd-none' : 'image'"
               rounded
+              fluid
               @click.stop="openModal(index)"
             />
-        </div>
           </b-col>
-    </b-row>
+
+          <template v-if="game.videos">
+            <b-col
+              cols="4"
+              sm="4"
+              md="3"
+              xl="2"
+              v-for="{ video_id } in game.videos"
+              :key="video_id"
+              class="p-1"
+            >
+              <b-embed
+                class="rounded"
+                type="iframe"
+                aspect="16by9"
+                :src="`https://www.youtube.com/embed/${video_id}`"
+                allowfullscreen
+              />
+            </b-col>
+          </template>
+        </b-form-row>
+      </b-col>
+    </b-form-row>
 
     <b-modal
       id="game-images"
@@ -114,13 +137,11 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
-import Packery from 'packery';
 
 // TODO: load game if not loaded
 export default {
   data() {
     return {
-      packery: null,
       activeIndex: 0,
       maxThumbnails: 3,
       saving: false,
@@ -218,19 +239,7 @@ export default {
     },
   },
 
-  mounted() {
-    this.packery = new Packery('.packery-grid', { itemSelector: '.image', gutter: 16 });
-
-    this.$nextTick(() => {
-      setTimeout(() => { this.layout(); }, 1000);
-    });
-  },
-
   methods: {
-    layout() {
-      this.packery.layout();
-    },
-
     async setAsWallpaper() {
       this.saving = true;