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>
</div>
<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>

View File

@@ -2,11 +2,11 @@
<footer class="footer-mobile">
<div class="footer-mobile__content">
<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-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-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-start" src="@/assets/icons-adaptive/home-adaptive/icon-home-menu.png"></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-info-menu.png"></a>
<a href="#"><img class="icon-end" src="@/assets/icons-adaptive/home-adaptive/icon-menu.png"></a>
</div>
</div>
</footer>

View File

@@ -2,10 +2,12 @@ import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/router";
import { Mixins } from "@/mixins/mixin";
import '@/assets/css/global.css'
const app = createApp(App)
app.use(router)
app.mixin(Mixins)
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>
<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>
<chat-component></chat-component>
@@ -115,26 +115,25 @@ export default {
GameModes,
AnimationOff: false,
mobile: false,
currentPage: 'Desktop'
}
},
methods: {
// claimSettings(value) {
// this.AnimationOff = value
// },
checkWindowSize() {
this.mobile = window.innerWidth <= 600
this.currentPage = this.mobile ? 'Mobile' : 'Desktop'
}
// checkWindowSize() {
// this.mobile = window.innerWidth <= 600
//
// this.currentPage = this.mobile ? 'Mobile' : 'Desktop'
// }
},
mounted() {
this.checkWindowSize()
window.addEventListener('resize', this.checkWindowSize)
this.AddWindowListener()
},
beforeUnmount() {
window.removeEventListener('resize', this.checkWindowSize)
this.RemoveWindowListener()
},
computed: {
mainGameMode() {

View File

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