Dhaverd/ Wishlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

This commit is contained in:
p.belezov 2024-10-28 17:59:00 +08:00
parent 0fdd2cf7e0
commit 8ff10a0915
9 changed files with 77 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/views/Auth/AuthButtons.vue
View File

@ -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">
Вход

3
resources/views/Auth/Login.vue
View File

@ -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"

3
resources/views/Auth/Registration.vue
View File

@ -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="Логин"

7
resources/views/Public.vue
View File

@ -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>

20
resources/views/PublicWishlist/ShowWhishlist.vue
View File

@ -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>

16
resources/views/Welcome.vue
View File

@ -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-title class="d-flex justify-space-between">
<div>
<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" :class="isWide ? '' : 'text-subtitle-1'">
<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() {

3
resources/views/Wishlist/CreateWish.vue
View File

@ -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>

3
resources/views/Wishlist/EditWish.vue
View File

@ -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>

30
resources/views/Wishlist/Wishlist.vue
View File

@ -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>