added mixin for mobile check

This commit is contained in:
Kostya
2023-12-16 15:15:24 +03:00
parent 4960d1dbd6
commit f763c1f301
6 changed files with 42 additions and 17 deletions

View File

@@ -11,7 +11,7 @@
<h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2> <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
</div> </div>
<div class="header-mobile__btn--balance btn-card btn-card__margin"> <div class="header-mobile__btn--balance btn-card btn-card__margin">
<img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg"> <a href="#" @click="$router.push({ name: 'profile' })"><img src="@/assets/icons-adaptive/home-adaptive/icon-wallet.svg"></a>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -2,11 +2,11 @@
<footer class="footer-mobile"> <footer class="footer-mobile">
<div class="footer-mobile__content"> <div class="footer-mobile__content">
<div class="footer-mobile__icons icons-size"> <div class="footer-mobile__icons icons-size">
<a href=""><img class="icon-start" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a> <a href="#"><img class="icon-start" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></a>
<a href=""><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a> <a href="#" @click="$router.push({ name: 'profile' })"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-wallet-menu.svg"></a>
<a href=""><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-chat-menu.png"></a> <a href="#"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-chat-menu.png"></a>
<a href=""><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-info-menu.png"></a> <a href="#"><img class="icon-center" src="@/assets/icons-adaptive/home-adaptive/icon-info-menu.png"></a>
<a href=""><img class="icon-end" src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a> <a href="#"><img class="icon-end" src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a>
</div> </div>
</div> </div>
</footer> </footer>

View File

@@ -2,10 +2,12 @@ import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from "@/router/router"; import router from "@/router/router";
import { Mixins } from "@/mixins/mixin";
import '@/assets/css/global.css' import '@/assets/css/global.css'
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.mixin(Mixins)
app.mount('#app') app.mount('#app')

View File

@@ -0,0 +1,13 @@
export const Mixins = {
methods: {
checkWindowSize() {
this.mobile = window.innerWidth <= 600
},
AddWindowListener() {
window.addEventListener('resize', this.checkWindowSize)
},
RemoveWindowListener() {
window.removeEventListener('resize', this.checkWindowSize)
}
}
}

View File

@@ -1,6 +1,6 @@
<template> <template>
<homemobile-page v-if="mobile"></homemobile-page> <homemobile-page v-if="mobile"></homemobile-page>
<div class="content-grid" v-if="!mobile"> <div class="content-grid" v-else>
<aside-bar-component></aside-bar-component> <aside-bar-component></aside-bar-component>
<chat-component></chat-component> <chat-component></chat-component>
@@ -115,26 +115,25 @@ export default {
GameModes, GameModes,
AnimationOff: false, AnimationOff: false,
mobile: false, mobile: false,
currentPage: 'Desktop'
} }
}, },
methods: { methods: {
// claimSettings(value) { // claimSettings(value) {
// this.AnimationOff = value // this.AnimationOff = value
// }, // },
checkWindowSize() { // checkWindowSize() {
this.mobile = window.innerWidth <= 600 // this.mobile = window.innerWidth <= 600
//
this.currentPage = this.mobile ? 'Mobile' : 'Desktop' // this.currentPage = this.mobile ? 'Mobile' : 'Desktop'
} // }
}, },
mounted() { mounted() {
this.checkWindowSize() this.checkWindowSize()
window.addEventListener('resize', this.checkWindowSize) this.AddWindowListener()
}, },
beforeUnmount() { beforeUnmount() {
window.removeEventListener('resize', this.checkWindowSize) this.RemoveWindowListener()
}, },
computed: { computed: {
mainGameMode() { mainGameMode() {

View File

@@ -1,5 +1,6 @@
<template> <template>
<div class="content__grid-profile"> <profilemobile-page v-if="mobile"></profilemobile-page>
<div class="content__grid-profile" v-else>
<aside-bar-component></aside-bar-component> <aside-bar-component></aside-bar-component>
<chat-component id="chat-profile"></chat-component> <chat-component id="chat-profile"></chat-component>
@@ -57,22 +58,32 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue";
import ChatComponent from "@/components/ChatComponent.vue"; import ChatComponent from "@/components/ChatComponent.vue";
import HeaderComponent from "@/components/HeaderComponent.vue"; import HeaderComponent from "@/components/HeaderComponent.vue";
import PaymentsModal from "@/components/PaymentsModal.vue"; import PaymentsModal from "@/components/PaymentsModal.vue";
import ProfilemobilePage from "@/pages/adaptive-pages/ProfilemobilePage.vue";
import { GetCookie } from "@/assets/js/storage/CookieStorage"; import { GetCookie } from "@/assets/js/storage/CookieStorage";
import '@/assets/css/PagesStyles/profile.css' import '@/assets/css/PagesStyles/profile.css'
import {GetCurrentMoney} from "@/assets/js/rest/RestMethods"; import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
export default { export default {
components: { HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal }, components: {ProfilemobilePage, HeaderComponent, AsideBarComponent, ChatComponent, PaymentsModal },
data() { data() {
return { return {
username: 'Artemka', username: 'Artemka',
imageUrl: '', imageUrl: '',
balance: 0, balance: 0,
mobile: false,
openModal: false, openModal: false,
payments: true, payments: true,
arrayHistory: [], arrayHistory: [],
} }
}, },
mounted() {
this.checkWindowSize()
this.AddWindowListener()
},
beforeUnmount() {
this.RemoveWindowListener()
},
created() { created() {
this.username = GetCookie('SpUserName') this.username = GetCookie('SpUserName')