Fix bugs appeared after migrating to vuetify 2

package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.6.5",
     "firebase": "^8.4.2",
     "interactjs": "^1.10.11",
+    "pan-zoom": "^3.5.2",
     "shortid": "^2.2.16",
     "shuffle-array": "^1.0.1",
     "vue": "^2.6.11",

src/App.vue

@@ -16,3 +16,9 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.v-application {
+  background: transparent !important;
+}
+</style>

src/components/Chat.vue

@@ -1,12 +1,18 @@
 <template>
-  <v-navigation-drawer v-model="sidebar" :mobile-breakpoint="4000">
+  <v-navigation-drawer
+    v-model="sidebar"
+    absolute
+    temporary
+    :mobile-breakpoint="4000"
+    width="320px"
+  >
     <div class="sendMsgBox">
       <v-text-field
         label="Message"
         single-line
         v-model="chatMsgValue"
         @keyup.enter.prevent="chatMsg"
-        :append-icon-cb="chatMsg"
+        @click:append="chatMsg"
         append-icon="send"
       >
       </v-text-field>
@@ -16,7 +22,7 @@
         :rules="diceRules"
         required
         @keyup.enter.prevent="diceSet"
-        :append-icon-cb="diceSet"
+        @click:append="diceSet"
         append-icon="send"
       ></v-text-field>
     </div>

src/components/DeckOptions.vue

@@ -28,7 +28,7 @@
         label="Size"
         v-model="data.size"
         thumb-label
-        step="0"
+        step="0.1"
       ></v-slider>
     </template>
   </div>

src/components/DecksList.vue

@@ -22,9 +22,7 @@
         <v-divider :key="index" v-if="index + 1 < decks.length"></v-divider>
       </template>
     </v-list>
-    <v-card text v-else>
-      <v-card-text> No decks found </v-card-text>
-    </v-card>
+    <v-card-text v-else>No decks found</v-card-text>
   </div>
 </template>
 

src/components/Imgur.vue

@@ -5,7 +5,7 @@
       single-line
       v-model="imgur_url"
       @keyup.enter.prevent="getImgurData"
-      :append-icon-cb="getImgurData"
+      @click:append="getImgurData"
       append-icon="send"
     >
     </v-text-field>
@@ -30,7 +30,7 @@
         label="Size"
         v-model="data.size"
         thumb-label
-        step="0"
+        step="0.1"
       ></v-slider>
     </template>
   </div>

src/components/Lobby.vue

@@ -2,6 +2,7 @@
   <v-app>
     <main>
       <!-- {{$route.params.id}} -->
+      <div class="background" :style="backgroundStyle"></div>
       <tabletop></tabletop>
 
       <chat></chat>
@@ -47,6 +48,16 @@ export default {
     background() {
       return this.$store.state.game.background;
     },
+    backgroundStyle() {
+      return this.background
+        ? {
+            backgroundImage: this.background.background_url
+              ? `url(${this.background.background_url})`
+              : "none",
+            backgroundColor: `url(${this.background.background_color})`,
+          }
+        : {};
+    },
   },
   data() {
     return {
@@ -95,4 +106,12 @@ body {
 .application--light {
   background-color: inherit;
 }
+.background {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+}
 </style>

src/components/MainPage.vue

@@ -1,15 +1,15 @@
 <template>
   <v-app>
-    <v-toolbar class="red" dark fixed>
-      <v-toolbar-title>OpenTabletop</v-toolbar-title>
+    <v-app-bar class="red" dark fixed>
+      <v-app-bar-title>OpenTabletop</v-app-bar-title>
       <!-- <v-spacer></v-spacer>
       <v-btn icon @click="syncTypeChange">
         <v-icon>sync</v-icon>
       </v-btn>
       <span>{{sync}}</span> -->
-    </v-toolbar>
-    <main>
-      <div>
+    </v-app-bar>
+    <main class="pt-md-10">
+      <div class="pt-md-10">
         <v-container fluid v-if="firebaseLoading">
           <v-layout row wrap justify-space-around>
             <v-progress-circular

src/components/NewEmptyDeck.vue

@@ -4,7 +4,7 @@
     single-line
     v-model="deck_name"
     @keyup.enter.prevent="createDeck"
-    :append-icon-cb="createDeck"
+    @click:append="createDeck"
     append-icon="send"
   >
   </v-text-field>

src/components/Snackbar.vue

@@ -1,7 +1,11 @@
 <template>
   <v-snackbar :timeout="3000" :color="color" v-model="snackbar">
     <span v-html="text"></span>
-    <v-btn dark text @click.native="snackbar = false">Close</v-btn>
+    <template v-slot:action="{ attrs }">
+      <v-btn dark text v-bind="attrs" @click.native="snackbar = false"
+        >Close</v-btn
+      >
+    </template>
   </v-snackbar>
 </template>
 
@@ -26,4 +30,8 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.v-snack {
+  font-family: "Roboto", sans-serif;
+}
+</style>

src/components/Tabletop.vue

@@ -1,24 +1,13 @@
 <template>
-  <div
-    class="tabletop"
-    :style="{
-      background:
-        (game.background !== undefined && game.background.tabletop_color) ||
-        '#eee',
-      backgroundImage:
-        (game.background !== undefined &&
-          'url(' + game.background.tabletop_url + ')') ||
-        'none',
-    }"
-  >
+  <div class="tabletop" :style="tabletopStyle">
     <template v-for="(object, i) in game.objects">
       <!-- card -->
       <div
         :key="i"
         v-if="object !== undefined && object.type === 'card'"
         @contextmenu.prevent="showMenu('card', object.x, object.y, i)"
         @dblclick="cardPreviewOpen(i)"
-        @auxclick="cardMiddleClick($event, i)"
+        @click.middle.prevent="cardMiddleClick($event, i)"
         class="card"
         :class="{
           inhand: object.hand === user.uid,
@@ -127,6 +116,17 @@ export default {
     user() {
       return this.$store.state.user;
     },
+    tabletopStyle() {
+      return this.game.background
+        ? {
+            backgroundColor: this.game.background.tabletop_color || "#eee",
+            backgroundImage: this.game.background
+              ? `url(${this.game.background.tabletop_url})`
+              : "none",
+            transform: "scale(1)",
+          }
+        : {};
+    },
   },
   data() {
     return {

src/components/dialogs/CardSize.vue

@@ -27,7 +27,7 @@
               label="Size"
               v-model="data.size"
               thumb-label
-              step="0"
+              step="0.1"
             ></v-slider>
           </template>
         </v-card-text>

src/components/dialogs/DeckEditor.vue

@@ -10,11 +10,7 @@
           v-model="data.card_back"
           label="Card back url"
         ></v-text-field>
-        <v-text-field
-          v-model="data.card_urls"
-          label="Card urls"
-          multi-line
-        ></v-text-field>
+        <v-textarea v-model="data.card_urls" label="Card urls"></v-textarea>
         <v-layout row wrap>
           <v-flex sm6 xs12>
             <v-switch
@@ -36,7 +32,7 @@
             label="Size"
             v-model="data.size"
             thumb-label
-            step="0"
+            step="0.1"
           ></v-slider>
         </template>
       </v-card-text>