Намутил адаптивности под мобилки

resources/views/Auth/AuthButtons.vue

@@ -1,11 +1,14 @@
 <script>
 export default {
-    name: "AuthButtons"
+    name: "AuthButtons",
+    data: ()=>({
+        isWide: window.innerWidth >= 800
+    })
 }
 </script>
 
 <template>
-    <div class="d-flex flex-column justify-center align-center pa-3 w-33">
+    <div class="d-flex flex-column justify-center align-center pa-3" :class="isWide ? 'w-33' : 'w-100'">
         <router-link to="/login" class="w-100 ma-2">
             <v-btn class="w-100">
                 Вход

resources/views/Auth/Login.vue

@@ -11,6 +11,7 @@ export default {
     },
     data: () => ({
         userStore: useUserStore(),
+        isWide: window.innerWidth >= 800,
         valid: false,
         email: null,
         password: null,
@@ -63,7 +64,7 @@ export default {
 </script>
 
 <template>
-    <div class="d-flex flex-column justify-center align-center w-33">
+    <div class="d-flex flex-column justify-center align-center" :class="isWide ? 'w-33' : 'w-100'">
         <v-text-field class="w-100"
                       v-model="email"
                       label="E-mail"

resources/views/Auth/Registration.vue

@@ -6,6 +6,7 @@ export default {
     name: "Registration",
     data: () => ({
         userStore: useUserStore(),
+        isWide: window.innerWidth >= 800,
         valid: false,
         login: null,
         email: null,
@@ -66,7 +67,7 @@ export default {
 </script>
 
 <template>
-    <div class="d-flex flex-column justify-center align-center w-33">
+    <div class="d-flex flex-column justify-center align-center" :class="isWide ? 'w-33' : 'w-100'">
         <v-text-field class="w-100"
                       v-model="login"
                       label="Логин"

resources/views/Public.vue

@@ -1,7 +1,7 @@
 <template>
     <v-card class="bg-gradient" style="height: 100%">
         <v-card-text class="d-flex justify-center align-center">
-            <v-card class="align-center justify-center h-auto w-66 card-bg">
+            <v-card class="align-center justify-center h-auto card-bg" :class="isWide ? 'w-66' : 'w-100'">
                 <v-card-title class="d-flex justify-space-between">
                     <div>
                         <span>Добро пожаловать в </span>
@@ -20,7 +20,10 @@
 import ShowWhishlist from "./PublicWishlist/ShowWhishlist.vue";
 export default {
     name: "Public",
-    components: {ShowWhishlist}
+    components: {ShowWhishlist},
+    data: ()=>({
+        isWide: window.innerWidth >= 800
+    })
 }
 </script>
 

resources/views/PublicWishlist/ShowWhishlist.vue

@@ -7,6 +7,7 @@ export default {
         wishes: [],
         wishStore: useWishStore(),
         userStore: useUserStore(),
+        isWide: window.innerWidth >= 800,
         fetching: false,
         username: ''
     }),
@@ -28,7 +29,7 @@ export default {
 
 <template>
     <v-skeleton-loader color="grey-darken-4" type="table" v-if="fetching"></v-skeleton-loader>
-    <v-table v-else class="card-bg w-100 h-auto mt-5 pa-3">
+    <v-table v-if="!fetching && isWide" class="card-bg w-100 h-auto mt-5 pa-3">
         <thead>
             <tr>
                 <th colspan="3" class="text-center text-h5">Список пользователя {{ this.username }}</th>
@@ -47,6 +48,23 @@ export default {
             </tr>
         </tbody>
     </v-table>
+    <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">
+        <thead>
+            <tr>
+                <th colspan="3" class="text-center text-subtitle-1">Список пользователя {{ this.username }}</th>
+            </tr>
+            <tr>
+                <th class="text-body-1">Наименование</th>
+                <th class="text-body-1">Цена</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="wish in wishes">
+                <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
+                <td>{{ wish['price'] }}</td>
+            </tr>
+        </tbody>
+    </v-table>
 </template>
 
 <style scoped>

resources/views/Welcome.vue

@@ -1,14 +1,19 @@
 <template>
-    <v-card class="bg-gradient" style="height: 100%">
+    <v-card class="bg-gradient" style="height: 100%" :class="isWide ? '' : 'd-flex justify-center align-center'">
         <v-card-text class="d-flex justify-center align-center">
-            <v-card class="align-center justify-center h-auto w-66 card-bg">
+            <v-card class="align-center justify-center h-auto w-66 card-bg" :class="isWide ? 'w-66' : 'w-100'">
-                <v-card-title class="d-flex justify-space-between">
+                <v-card-title class="d-flex justify-space-between" :class="isWide ? '' : 'text-subtitle-1'">
-                    <div>
+                    <div v-if="isWide">
+                        <!-- Добро пожаловать в <router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, {{ isAuthenticated ? user['name'] : 'Гость' }}! -->
                         <span>Добро пожаловать в </span>
                         <span><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, </span>
                         <span v-if="isAuthenticated">{{ this.user['name'] }}!</span>
                         <span v-else>Гость!</span>
                     </div>
+                    <div v-if="!isWide">
+                        <p>Добро пожаловать в</p>
+                        <p><router-link :to="isAuthenticated ? '/wishlist' : '/auth_options'" class="link-no-decor">Wishlist</router-link>, {{ isAuthenticated ? user['name'] : 'Гость' }}!</p>
+                    </div>
                     <span v-if="isAuthenticated" class="link-no-decor align-end" @click="logout">Выйти</span>
                 </v-card-title>
                 <v-card-text class="d-flex justify-center align-center">
@@ -28,7 +33,8 @@ export default {
     data: () => ({
         isAuthenticated: false,
         userStore: useUserStore(),
-        fetchingUser: false
+        fetchingUser: false,
+        isWide: window.innerWidth >= 800
     }),
     computed: {
         user() {

resources/views/Wishlist/CreateWish.vue

@@ -7,6 +7,7 @@ export default {
     data: () => ({
         userStore: useUserStore(),
         wishStore: useWishStore(),
+        isWide: window.innerWidth >= 800,
         name: null,
         price: null,
         url: null,
@@ -61,7 +62,7 @@ export default {
 <template>
     <v-card class="card-bg">
         <v-card-title class="d-flex justify-space-between">
-            <span>Создать новый элемент</span>
+            <span>Создание</span>
             <span>
                 <v-icon @click="dialogCreate" class="cursor-pointer" color="white" icon="mdi-close-thick"></v-icon>
             </span>

resources/views/Wishlist/EditWish.vue

@@ -15,6 +15,7 @@ export default {
     data: () => ({
         userStore: useUserStore(),
         wishStore: useWishStore(),
+        isWide: window.innerWidth >= 800,
         name: null,
         price: null,
         url: null,
@@ -89,7 +90,7 @@ export default {
             <v-text-field class="w-100" label="Наименование" v-model="name" :rules="[rules.notNull]"></v-text-field>
             <v-text-field class="w-100" label="Стоимость" v-model="price"></v-text-field>
             <v-text-field class="w-100" label="Ссылка" v-model="url"></v-text-field>
-            <v-btn :loading="updating" class="w-33" @click="editWish">Сохранить</v-btn>
+            <v-btn :loading="updating" class="w-67" @click="editWish">Сохранить</v-btn>
         </v-card-text>
     </v-card>
 </template>

resources/views/Wishlist/Wishlist.vue

@@ -10,6 +10,7 @@ export default {
     data: () => ({
         userStore: useUserStore(),
         wishStore: useWishStore(),
+        isWide: window.innerWidth >= 800,
         wishesList: [],
         fetching: true,
         dialogCreate: ref(false),
@@ -77,7 +78,7 @@ export default {
             </v-text-field>
             <v-snackbar v-model="snackbar">Текст скопирован!</v-snackbar>
         </div>
-        <v-table v-if="!fetching" class="card-bg w-100 h-auto mt-5 pa-3">
+        <v-table v-if="!fetching && isWide" class="card-bg w-100 h-auto mt-5 pa-3">
             <thead>
                 <tr>
                     <th class="text-subtitle-1">Наименование</th>
@@ -106,6 +107,33 @@ export default {
                 <EditWish :dialogEdit="dialogEditClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToEditId"/>
             </v-dialog>
         </v-table>
+        <v-table v-if="!fetching && !isWide" class="card-bg w-100 h-auto mt-5 pa-3">
+            <thead>
+                <tr>
+                    <th class="text-subtitle-1">Наименование</th>
+                    <th class="text-subtitle-1">Цена</th>
+                    <th class="text-subtitle-1"></th>
+                    <th class="text-subtitle-1"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="wish in wishesList">
+                    <td><a target="_blank" :href="wish['url']">{{ wish['name'] }}</a></td>
+                    <td>{{ wish['price'] }}</td>
+                    <td><v-icon @click="editWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-pencil"></v-icon></td>
+                    <td><v-icon @click="removeWish(wish['id'])" class="cursor-pointer" color="white" icon="mdi-trash-can"></v-icon></td>
+                </tr>
+                <tr class="text-center">
+                    <td colspan="5"><v-btn @click="dialogCreate = true" color="#212022" elevation="0" block><v-icon class="cursor-pointer" icon="mdi-plus-thick"></v-icon></v-btn></td>
+                </tr>
+            </tbody>
+            <v-dialog v-model="dialogCreate" :class="isWide ? 'w-66' : 'w-100'">
+                <CreateWish :dialogCreate="dialogCreateClose" :updateFrontWishes="updateFrontWishes"/>
+            </v-dialog>
+            <v-dialog v-model="dialogEdit" :class="isWide ? 'w-66' : 'w-100'">
+                <EditWish :dialogEdit="dialogEditClose" :updateFrontWishes="updateFrontWishes" :wish_id="wishToEditId"/>
+            </v-dialog>
+        </v-table>
     </div>
 </template>