create board route

src/components/GlobalModals.vue

@@ -1,6 +1,5 @@
 <template lang="html">
   <div>
-    <create-board-modal />
     <game-modal />
     <game-sidebar />
     <auth-modal />
@@ -18,7 +17,6 @@ import { mapState } from 'vuex';
 import DevToolsModal from '@/components/DevToolsModal';
 import GameModal from '@/components/Game/GameModal';
 import GameSidebar from '@/components/Game/GameSidebar';
-import CreateBoardModal from '@/components/Board/CreateBoardModal';
 import AuthModal from '@/components/AuthModal';
 import KeyboardShortcutsModal from '@/components/KeyboardShortcutsModal';
 
@@ -27,7 +25,6 @@ export default {
     DevToolsModal,
     AuthModal,
     KeyboardShortcutsModal,
-    CreateBoardModal,
     GameModal,
     GameSidebar,
   },

src/pages/CreateBoardPage.vue

@@ -1,19 +1,6 @@
 <template lang="html">
-  <b-modal
-    id="create-board"
-    hide-footer
-    scrollable
-    @show="init"
-    @hidden="init"
-  >
-    <!-- TODO: handle boards without platforms -->
-    <!-- TODO: Show loading spinner when creating -->
-    <template v-slot:modal-header="{ close }">
-      <modal-header
-        :title="$t('boards.create')"
-        @close="close"
-      />
-    </template>
+  <b-container fluid>
+    {{ $t('boards.create') }}
 
     <b-form-group label="Board name:" label-for="boardName">
       <b-form-input
@@ -26,7 +13,11 @@
       />
     </b-form-group>
 
-    <!-- <b-button
+
+      <!-- TODO: handle boards without platforms -->
+      <!-- TODO: Show loading spinner when creating -->
+
+    <b-button
       v-if="!showOptionalFields"
       variant="link"
       class="px-0"
@@ -34,9 +25,9 @@
       @click="showOptionalFields = !showOptionalFields"
     >
       Show more fields
-    </b-button> -->
+    </b-button>
 
-    <!-- <b-collapse v-model="showOptionalFields">
+    <b-collapse v-model="showOptionalFields">
       <b-form-group
         label="Board description"
         label-for="boardDescription"
@@ -83,7 +74,11 @@
           </b-col>
         </b-row>
       </b-form-group>
-    </b-collapse> -->
+    </b-collapse>
+
+    <b-button @click="$router.push({ name: 'home' })">
+      Cancel
+    </b-button>
 
     <b-button
       variant="primary"
@@ -93,7 +88,7 @@
         <b-spinner small v-if="saving" />
         <template v-else>Create board</template>
     </b-button>
-  </b-modal>
+  </b-container>
 </template>
 
 <script>
@@ -103,6 +98,11 @@ export default {
       board: {
         name: '',
         description: '',
+        theme: null,
+        backgroundUrl: null,
+        backgroundColor: null,
+        platforms: [],
+        lists: [],
       },
       stepTitles: {
         1: 'Name your board',
@@ -135,21 +135,6 @@ export default {
   },
 
   methods: {
-    init() {
-      this.showOptionalFields = false;
-      this.saving = false;
-
-      this.board = {
-        name: '',
-        description: '',
-        theme: null,
-        backgroundUrl: null,
-        backgroundColor: null,
-        platforms: [],
-        lists: [],
-      };
-    },
-
     async createBoard() {
       this.saving = true;
 

src/pages/DashboardPage.vue

@@ -4,11 +4,18 @@
       <page-title
         title="Boards"
         action-text="Create board"
-        @action="$bvModal.show('create-board')"
+        @action="$router.push({ name: 'create-board' })"
       />
     </portal>
 
-    <boards v-if="boards.length" class="mb-3" />
+
+    <div v-if="boards.length">
+      Boards
+
+      <b-button @click="$router.push({ name: 'create-board' })">Create board</b-button>
+
+      <boards class="mb-3" />
+    </div>
 
     <empty-state
       v-else

src/routes.js

@@ -3,6 +3,7 @@ import AuthPage from '@/pages/AuthPage';
 import BoardPage from '@/pages/BoardPage';
 import UpgradePage from '@/pages/UpgradePage';
 import EditBoardPage from '@/pages/EditBoardPage';
+import CreateBoardPage from '@/pages/CreateBoardPage';
 import DevToolsPage from '@/pages/DevToolsPage';
 import ProfileSettingsPage from '@/pages/ProfileSettingsPage';
 import ExplorePage from '@/pages/ExplorePage';
@@ -204,6 +205,11 @@ const routes = [
       },
     ],
   },
+  {
+    path: '/board/create',
+    name: 'create-board',
+    component: CreateBoardPage,
+  },
   {
     path: '/board/:id',
     name: 'board',