clean up

src/App.vue

@@ -45,7 +45,7 @@
 
     <template v-else>
       <page-header v-if="!isAuthPage" />
-      <router-view :class="['viewport', isGamePage ? '' : 'p-2']" />
+      <router-view :class="['viewport', routerViewClass]" />
       <keyboard-shortcuts-modal />
       <markdown-cheatsheet />
     </template>
@@ -86,7 +86,7 @@ export default {
 
   computed: {
     ...mapState(['user', 'settings', 'sessionExpired', 'platforms', 'games']),
-    ...mapGetters(['darkTheme']),
+    ...mapGetters(['darkTheme', 'isVerticalNav']),
 
     style() {
       const backgroundImage = ['game', 'board'].includes(this.$route?.name) && this.backgroundImageUrl
@@ -104,6 +104,12 @@ export default {
       return this.$route.meta?.public;
     },
 
+    routerViewClass() {
+      if (this.isGamePage) return '';
+
+      return this.isVerticalNav ? 'p-3' : 'p-3'
+    },
+
     isGamePage() {
       return this.$route.name === 'game';
     },
@@ -173,7 +179,7 @@ export default {
     },
 
     init() {
-      if (!this.platforms.length) this.loadPlatforms();
+      if (!this.platforms?.length) this.loadPlatforms();
       if (this.isPublicRoute && !this.user) return this.loading = false;
 
       if (this.user) {

src/components/Board/KanbanBoard.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="kanban-board">
+  <div class="kanban-board p-1">
     <kanban-list
       v-for="(list, listIndex) in board.lists"
       :ref="`list-${listIndex}`"

src/components/GameCards/GameCardText.vue

@@ -50,13 +50,6 @@
               <small>{{ name }}</small>
             </b-button>
           </b-popover>
-
-        </div>
-
-        <div class="text-white">
-          {{ gameId }}
-
-          <pre>{{ listIndex }}</pre>
         </div>
         <!-- <div class="d-flex mb-2" v-if="gamePlatformsText">
           <small>{{ gamePlatformsText }}</small>

src/components/MainMenu.vue

@@ -5,8 +5,10 @@
     :dropright="navPosition === 'left'"
     :dropleft="navPosition === 'right'"
     no-caret
-    :menu-class="darkTheme ? 'bg-dark' : null"
+    :class="isVerticalNav ? 'mt-1' : ''"
   >
+    <!-- TODO: style dark dropdown -->
+    <!-- :menu-class="darkTheme ? 'bg-dark' : null" -->
     <!-- <b-dropdown-text style="width: 240px;">
       <small>Welcome {{ user.displayName }}</small>
     </b-dropdown-text> -->
@@ -101,21 +103,14 @@
       <small>Steam</small>
     </b-list-group-item> -->
 
-    <b-dropdown-text>
+    <!-- <b-dropdown-text>
       <b-link
-        href="https://github.com/romancm/gamebrary"
+        href="https://github.com/romancm/gamebrary/"
         target="_blank"
-        :class="darkTheme ? 'text-primary' : 'text-dark'"
       >
-        <b-link
-          href="https://github.com/romancm/gamebrary/releases"
-          target="_blank"
-          :class="darkTheme ? 'text-light' : 'text-dark'"
-        >
-          {{ latestRelease }}
-        </b-link>
+        GitHub
       </b-link>
-    </b-dropdown-text>
+    </b-dropdown-text> -->
   </b-dropdown>
 </template>
 
@@ -133,7 +128,7 @@ export default {
 
   computed: {
     ...mapState(['board', 'boards', 'settings', 'user', 'games', 'notes', 'tags', 'wallpapers']),
-    ...mapGetters(['darkTheme', 'navPosition', 'sortedBoards', 'latestRelease']),
+    ...mapGetters(['darkTheme', 'navPosition', 'sortedBoards', 'latestRelease', 'isVerticalNav']),
 
     year() {
       return new Date().getFullYear();

src/components/PageHeader.vue

@@ -6,7 +6,7 @@
 
 <template lang="html">
   <div class="page-header position-relative">
-    <header :class="[darkTheme ? 'bg-dark' : 'bg-white', isVerticalNav ? 'p-2' : 'px-3 py-2', `nav-${navPosition}`]">
+    <header :class="[darkTheme ? 'bg-dark' : 'bg-white', isVerticalNav ? 'py-3 px-2' : 'px-3 py-2', `nav-${navPosition}`]">
       <!-- TODO: allow to collapse menu -->
       <div :class="['alert', alertType, { visible }]">
         <div class="d-flex align-items-center">

src/components/PageTitle.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <header
     v-if="isVerticalNav"
-    :class="['d-flex justify-content-between align-items-center bg-info mb-3']"
+    :class="['d-flex justify-content-between align-items-center mb-3']"
   >
     <h2>{{ title }}</h2>
     <slot />