fix(ui): change mobile breakpoints to vuetify defined

unicovoit · Nov 29, 2022 · f7906af · f7906af
1 parent 48e4d67
commit f7906af
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 23 deletions.
diff --git a/components/TripForm.vue b/components/TripForm.vue
@@ -53,7 +53,7 @@ export default {
     name: "TripForm",
     data() {
         return {
-            mobile: this.$device.isMobileOrTablet,
+            mobile: this.$vuetify.breakpoint.mobile,
             search: {
                 from: null,
                 to: null,

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -22,8 +22,8 @@
         </v-snackbar>
 
         <v-app-bar
-            :absolute="$device.isMobileOrTablet"
-            :fixed="!$device.isMobileOrTablet"
+            :absolute="$vuetify.breakpoint.mobile"
+            :fixed="!$vuetify.breakpoint.mobile"
             clipped-left
             flat
             class="mx-md-auto"
@@ -45,7 +45,7 @@
                     ></v-img>
                 </NuxtLink>
                 <div
-                    v-if="!$device.isMobileOrTablet"
+                    v-if="!$vuetify.breakpoint.mobile"
                     class="ml-4"
                 >
                     <v-btn
@@ -61,7 +61,7 @@
                         {{ item.title }}
                     </v-btn>
                     <v-btn
-                        v-if="!$device.isMobileOrTablet"
+                        v-if="!$vuetify.breakpoint.mobile"
                         color="primary"
                         exact
                         router
@@ -74,7 +74,7 @@
                 </div>
                 <v-spacer></v-spacer>
                 <div
-                    v-if="!$device.isMobileOrTablet"
+                    v-if="!$vuetify.breakpoint.mobile"
                     class="mr-4"
                 >
                     <v-btn
@@ -108,8 +108,8 @@
                     :current-language="$i18n.locale"
                 />
                 <v-tooltip
-                    :left="$device.isMobileOrTablet"
-                    :right="!$device.isMobileOrTablet"
+                    :left="$vuetify.breakpoint.mobile"
+                    :right="!$vuetify.breakpoint.mobile"
                 >
                     <template v-slot:activator="{ on, attrs }">
                         <NuxtLink
@@ -131,26 +131,22 @@
         </v-app-bar>
 
         <v-main
-            class="mt-15"
+            class="mt-14"
         >
             <v-sheet
-                class="mx-md-auto mt-md-5 transparent"
+                class="mx-3 mx-md-auto mt-0 mt-md-5 transparent"
                 max-width="1080"
             >
-                <v-container
-                    class="pt-0"
-                >
-                    <Nuxt
-                        :keep-alive-props="{exclude: ['pages/trips/index.vue']}"
-                        class="px-md-16"
-                        keep-alive
-                    />
-                </v-container>
+                <Nuxt
+                    :keep-alive-props="{exclude: ['pages/trips/index.vue']}"
+                    class="px-0 px-md-16"
+                    keep-alive
+                />
             </v-sheet>
         </v-main>
 
         <v-bottom-navigation
-            v-if="$device.isMobileOrTablet"
+            v-if="$vuetify.breakpoint.mobile"
             v-model="activeBtn"
             :dark="$vuetify.theme.dark"
             app

diff --git a/pages/index.vue b/pages/index.vue
@@ -46,7 +46,7 @@
                 class="d-md-flex flex-md-column justify-center align-center"
             >
                 <div
-                    v-if="!$device.isMobileOrTablet"
+                    v-if="!$vuetify.breakpoint.mobile"
                     class="d-md-block"
                     style="height: 1rem; width: 1rem"
                 ></div>
@@ -69,7 +69,7 @@
                 src="/car-rental.svg"
             ></v-img>
             <v-row
-                v-for="advantage,i in advantages"
+                v-for="(advantage,i) in advantages"
                 :key="advantage.title"
                 :class="advantage.colour"
                 class="d-flex align-start mb-2"
@@ -95,7 +95,7 @@
             </v-row>
 
             <NuxtLink
-                v-if="$device.isMobileOrTablet"
+                v-if="$vuetify.breakpoint.mobile"
                 class="mt-2 text-decoration-none text--secondary"
                 :to="localePath('/about')"
             >