fix vuetify warning

SharifAIChallenge · Jan 6, 2021 · d017fe4 · d017fe4
1 parent 01640e0
commit d017fe4
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 60 deletions.
diff --git a/layouts/dashboard.vue b/layouts/dashboard.vue
@@ -12,10 +12,13 @@
       collapse
       :min-width="mobile ? 220 : 256"
       :hide-on-scroll="mobile"
-      style="left: unset;"
+      style="left: unset"
       height="80"
     >
-      <v-app-bar-nav-icon class="ms-1 hidden-md-and-up" @click.stop="drawer = !drawer" />
+      <v-app-bar-nav-icon
+        class="ms-1 hidden-md-and-up"
+        @click.stop="drawer = !drawer"
+      />
       <v-row class="justify-center">
         <nuxt-link to="/" class="white--text">
           <logo />
@@ -56,38 +59,38 @@
         </template>
       </v-list>
     </v-navigation-drawer>
-    <v-content>
+    <v-main>
       <v-container class="dashboard px-md-6 pb-12" fluid>
         <nuxt />
       </v-container>
-    </v-content>
+    </v-main>
   </v-app>
 </template>
 
 <script>
-import Logo from '../components/Logo'
-import AccountMenu from '../components/AccountMenu'
-import { mapGetters } from 'vuex'
+import Logo from "../components/Logo";
+import AccountMenu from "../components/AccountMenu";
+import { mapGetters } from "vuex";
 
 export default {
   components: { AccountMenu, Logo },
   data() {
     return {
       drawer: null,
-    }
+    };
   },
   computed: {
     ...mapGetters({
-      sidebar: 'dashboard/sidebar',
+      sidebar: "dashboard/sidebar",
     }),
     mobile() {
-      return this.$vuetify.breakpoint.smAndDown
+      return this.$vuetify.breakpoint.smAndDown;
     },
   },
   created() {
-    return this.$store.dispatch('games/getChallenge')
+    return this.$store.dispatch("games/getChallenge");
   },
-}
+};
 </script>
 
 <style scoped>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,6 +1,12 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" app right disable-resize-watcher floating>
+    <v-navigation-drawer
+      v-model="drawer"
+      app
+      right
+      disable-resize-watcher
+      floating
+    >
       <v-list rounded nav>
         <v-list-item to="/dashboard" nuxt class="d-sm-none">
           <v-list-item-content>
@@ -10,7 +16,10 @@
         <template v-if="$route.path === '/'">
           <v-list-item v-for="(item, i) in items" :key="i" link>
             <v-list-item-content>
-              <v-list-item-title @click="scrollAndClose(item.scroll)" v-text="$t(item.title)" />
+              <v-list-item-title
+                @click="scrollAndClose(item.scroll)"
+                v-text="$t(item.title)"
+              />
             </v-list-item-content>
           </v-list-item>
         </template>
@@ -22,16 +31,20 @@
       </v-list>
     </v-navigation-drawer>
     <v-app-bar app fixed hide-on-scroll flat height="100" class="px-sm-3">
-      <h1 class="d-none">
-        Sharif AI Challenge نبرد هوش مصنوعی شریف
-      </h1>
-      <v-app-bar-nav-icon class="me-2 hidden-md-and-up" @click.stop="drawer = !drawer" />
+      <h1 class="d-none">Sharif AI Challenge نبرد هوش مصنوعی شریف</h1>
+      <v-app-bar-nav-icon
+        class="me-2 hidden-md-and-up"
+        @click.stop="drawer = !drawer"
+      />
       <nuxt-link to="/" class="white--text">
         <logo class="hidden-xs-only" />
         <logo-mark class="hidden-sm-and-up" />
       </nuxt-link>
       <v-spacer />
-      <v-row v-if="$route.path === '/'" class="justify-end align-center mx-2 hidden-sm-and-down">
+      <v-row
+        v-if="$route.path === '/'"
+        class="justify-end align-center mx-2 hidden-sm-and-down"
+      >
         <v-btn
           v-for="(item, i) in items"
           :key="i"
@@ -55,31 +68,36 @@
         to="/dashboard"
         class="hidden-xs-only"
       >
-        <v-icon left color="primary">
-          mdi-view-dashboard
-        </v-icon>
-        {{ $t('dashboard.dashboard') }}
+        <v-icon left color="primary"> mdi-view-dashboard </v-icon>
+        {{ $t("dashboard.dashboard") }}
       </v-btn>
-      <v-btn v-else rounded outlined depressed light large color="white" to="/login">
-        <v-icon left color="primary">
-          mdi-shield-star
-        </v-icon>
-        {{ $t('form.signIn') }}
+      <v-btn
+        v-else
+        rounded
+        outlined
+        depressed
+        light
+        large
+        color="white"
+        to="/login"
+      >
+        <v-icon left color="primary"> mdi-shield-star </v-icon>
+        {{ $t("form.signIn") }}
       </v-btn>
       <account-menu v-if="$auth.loggedIn" mobile class="ms-3 me-0" />
     </v-app-bar>
-    <v-content>
+    <v-main>
       <nuxt />
-    </v-content>
+    </v-main>
     <my-footer />
   </v-app>
 </template>
 
 <script>
-import Logo from '../components/Logo'
-import LogoMark from '../components/LogoMark'
-import MyFooter from '../components/MyFooter'
-import AccountMenu from '../components/AccountMenu'
+import Logo from "../components/Logo";
+import LogoMark from "../components/LogoMark";
+import MyFooter from "../components/MyFooter";
+import AccountMenu from "../components/AccountMenu";
 
 export default {
   components: { AccountMenu, MyFooter, Logo, LogoMark },
@@ -88,45 +106,45 @@ export default {
       drawer: false,
       items: [
         {
-          title: 'home.about',
-          scroll: '#about',
+          title: "home.about",
+          scroll: "#about",
         },
         {
-          title: 'home.timeline',
-          scroll: '#timeline',
+          title: "home.timeline",
+          scroll: "#timeline",
         },
         {
-          title: 'home.trophies',
-          scroll: '#trophies',
+          title: "home.trophies",
+          scroll: "#trophies",
         },
         {
-          title: 'home.whyUs',
-          scroll: '#whyai',
+          title: "home.whyUs",
+          scroll: "#whyai",
         },
         {
-          title: 'home.ourTeam',
-          scroll: '#our_team',
+          title: "home.ourTeam",
+          scroll: "#our_team",
         },
         {
-          title: 'home.organizer',
-          scroll: '#organizer',
+          title: "home.organizer",
+          scroll: "#organizer",
         },
       ],
       miniVariant: false,
       right: true,
       rightDrawer: false,
-      title: 'AI Challenge',
-    }
+      title: "AI Challenge",
+    };
   },
   methods: {
     scrollAndClose(target) {
-      if (this.$route.path !== '/') {
-        this.$router.push('/')
-        return
+      if (this.$route.path !== "/") {
+        this.$router.push("/");
+        return;
       }
-      this.$vuetify.goTo(target)
-      if (this.drawer) this.drawer = false
+      this.$vuetify.goTo(target);
+      if (this.drawer) this.drawer = false;
     },
   },
-}
+};
 </script>
diff --git a/layouts/form.vue b/layouts/form.vue
@@ -1,26 +1,33 @@
 <template>
   <v-app class="bg-decorated">
-    <v-app-bar absolute hide-on-scroll flat collapse height="100" min-width="140">
+    <v-app-bar
+      absolute
+      hide-on-scroll
+      flat
+      collapse
+      height="100"
+      min-width="140"
+    >
       <nuxt-link to="/" class="white--text">
         <logo />
         <!--        <logo-mark />-->
       </nuxt-link>
     </v-app-bar>
-    <v-content>
+    <v-main>
       <v-container fluid>
         <nuxt />
       </v-container>
-    </v-content>
+    </v-main>
   </v-app>
 </template>
 
 <script>
-import Logo from '../components/Logo'
-import LogoMark from '../components/LogoMark'
+import Logo from "../components/Logo";
+import LogoMark from "../components/LogoMark";
 
 export default {
   components: { Logo, LogoMark },
-}
+};
 </script>
 
 <style scoped></style>