From c7c84bb16930a18181e2ce605ac613a2fc3e8bcc Mon Sep 17 00:00:00 2001
From: gsd <mamu@ebal.net>
Date: Tue, 17 Oct 2023 20:41:49 +0300
Subject: [PATCH] mobile main view
---
src/components/Others/CharacterImage.vue | 10 +++++-
src/components/TabsMenuElements/EmptyTab.vue | 8 +++--
.../Components/LogoWithCharacters.vue | 16 ++++-----
.../SubComponents/ConnectButton.vue | 6 ++--
.../SubComponents/CurrentPlayers.vue | 35 +++++++++++--------
.../MainView/Components/WhyNot.vue | 6 ++--
.../MainView/Components/WhyNotText.vue | 10 ++++--
7 files changed, 57 insertions(+), 34 deletions(-)
diff --git a/src/components/Others/CharacterImage.vue b/src/components/Others/CharacterImage.vue
index f35318f..e92376b 100644
--- a/src/components/Others/CharacterImage.vue
+++ b/src/components/Others/CharacterImage.vue
@@ -1,5 +1,5 @@
<template>
- <div class="md-layout-item" :class="`md-size-${size}`">
+ <div class="md-layout-item" :class="`md-size-${size} md-small-size-${sm_size} ${hide_if_small?'md-small-hide':''}`">
<img :src="img_src" @click="audio_puk">
</div>
</template>
@@ -12,11 +12,19 @@ export default {
type: Number,
default: 15
},
+ sm_size: {
+ type: Number,
+ default: 15
+ },
img_src: {
type: String
},
audio_src: {
type: String
+ },
+ hide_if_small: {
+ type: Boolean,
+ default: false
}
},
methods: {
diff --git a/src/components/TabsMenuElements/EmptyTab.vue b/src/components/TabsMenuElements/EmptyTab.vue
index 5082b75..d44220a 100644
--- a/src/components/TabsMenuElements/EmptyTab.vue
+++ b/src/components/TabsMenuElements/EmptyTab.vue
@@ -1,11 +1,15 @@
<template>
- <md-tab :md-label="this.lb" md-disabled/>
+ <md-tab :md-label="this.lb" md-disabled v-if="enabled_tab"/>
</template>
<script>
export default {
name: 'EmptyTab',
props: {
- lb: String
+ lb: String,
+ enabled_tab: {
+ type: Boolean,
+ default: false
+ }
}
}
</script>
diff --git a/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue b/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue
index 192d60b..f4d9706 100644
--- a/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue
+++ b/src/components/TabsMenuElements/MainView/Components/LogoWithCharacters.vue
@@ -1,26 +1,26 @@
<template>
<div>
<div class="md-layout md-alignment-bottom-center">
- <div class="md-layout-item md-size-20"/>
- <CharacterImage :size="20" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/>
- <div class="md-layout-item md-size-20">
- <div class="md-layout md-alignment-bottom-center">
+ <div class="md-layout-item md-large-size-20 md-small-hide"/>
+ <CharacterImage :size="20" :hide_if_small="true" :img_src="require(`@/assets/images/characters/pootisd.png`)" :audio_src="require(`@/assets/sounds/pootis.mp3`)"/>
+ <div class="md-layout-item md-size-20 md-small-size-100">
+ <div class="md-layout md-alignment-bottom-center md-small-hide">
<CharacterImage :size="25" :img_src="require(`@/assets/images/characters/pyro.png`)" :audio_src="require(`@/assets/sounds/alertmgs.mp3`)"/>
<CharacterImage :size="50" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/>
<CharacterImage :size="25" :img_src="require(`@/assets/images/characters/engi_n.png`)" :audio_src="require(`@/assets/sounds/nigger.mp3`)"/>
</div>
<div class="md-layout md-size-40">
- <div class="md-layout-item md-alignment-bottom-center rounded-and-colored-without-bottom">
+ <div class="md-layout-item md-alignment-bottom-center rounded-and-colored-without-bottom">
<h1 style="text-align: center; text-shadow: rgba(80,80,80,0.59) 2px 5px; margin: 2%">Факты 13</h1>
</div>
</div>
</div>
- <CharacterImage :size="20" :img_src="require(`@/assets/images/characters/mgesold.png`)" :audio_src="require(`@/assets/sounds/soldier_laughevil03.mp3`)"/>
- <div class="md-layout-item md-size-20"/>
+ <CharacterImage :size="20" :hide_if_small="true" :img_src="require(`@/assets/images/characters/mgesold.png`)" :audio_src="require(`@/assets/sounds/soldier_laughevil03.mp3`)"/>
+ <div class="md-layout-item md-size-large-20 md-small-hide"/>
</div>
<div class="md-layout">
<div class="md-layout-item md-size"/>
- <div class="md-layout-item md-size-55 rounded-and-colored-without-bottom">
+ <div class="md-layout-item md-size-55 rounded-and-colored-without-bottom md-small-size-100">
<h4 style="text-align: center; text-transform: uppercase; font-size: 2.5em; margin: 1%">Добро пожаловать на "лучший" ру-сервер тф2</h4>
</div>
<div class="md-layout-item md-size"/>
diff --git a/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue b/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
index a478293..5a24a6d 100644
--- a/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
+++ b/src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue
@@ -1,15 +1,15 @@
<template>
<div class="md-layout md-alignment-center-center" style="margin: 2%">
- <div class="md-layout-item md-size-30 rounded-and-colored">
+ <div class="md-layout-item md-size-50 rounded-and-colored md-small-size-80">
<div class="md-layout md-alignment-center-center" style="margin: -5% 5%">
<div class="md-layout-item md-size-5">
- <h4 style="text-align: left">{{' > '}}</h4>
+ <h4 style="text-align: left; padding-right: 1%">{{' > '}}</h4>
</div>
<div class="md-layout-item" v-on:click="moveToServer()">
<h4 style="text-align: center;">ПОДКЛЮЧИТЬСЯ К СЕРВЕРУ</h4>
</div>
<div class="md-layout-item md-size-5">
- <h4 style="text-align: right">{{' < '}}</h4>
+ <h4 style="text-align: right; padding-left: 1%">{{' < '}}</h4>
</div>
</div>
</div>
diff --git a/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue b/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
index 0bd4f4b..2adbd8a 100644
--- a/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
+++ b/src/components/TabsMenuElements/MainView/Components/SubComponents/CurrentPlayers.vue
@@ -1,28 +1,28 @@
<template>
<div>
<div class="md-layout md-alignment-center-center">
- <div class="md-layout-item" v-bind:class="`md-size-${puff_size}`">
+ <div class="md-layout-item" v-bind:class="`md-size-${puff_size} ${getSS()}`">
<h5 style="text-align: center">Сейчас играют</h5>
</div>
- <div class="md-layout-item" v-bind:class="`md-size-${space_size}`" style="border-left:1px solid #000;height:3.5em;border-right: 1px solid #000"/>
- <div class="md-layout-item" v-bind:class="`md-size-${puff_size}`">
+ <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`" style="border-left:1px solid #000;height:3.5em;border-right: 1px solid #000"/>
+ <div class="md-layout-item" v-bind:class="`md-size-${puff_size} ${getSS()}`">
<h5 style="text-align: center;">Пик игроков за день</h5>
</div>
- <div class="md-layout-item" v-bind:class="`md-size-${space_size}`" style="border-left:1px solid #000;height:3.5em;border-right: 1px solid #000"/>
- <div class="md-layout-item" v-bind:class="`md-size-${puff_size}`">
+ <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`" style="border-left:1px solid #000;height:3.5em;border-right: 1px solid #000"/>
+ <div class="md-layout-item" v-bind:class="`md-size-${puff_size} ${getSS()}`">
<h5 style="text-align: center">Серверов работает</h5>
</div>
</div>
<div class="md-layout md-alignment-center-center" style="margin-top: -1%">
- <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size}`">
+ <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
<h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_now}}</h4>
</div>
- <div class="md-layout-item" v-bind:class="`md-size-${space_size}`"/>
- <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size}`">
+ <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`"/>
+ <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
<h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.player_max}}</h4>
</div>
- <div class="md-layout-item" v-bind:class="`md-size-${space_size}`"/>
- <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size}`">
+ <div class="md-layout-item" v-bind:class="`md-size-${space_size} ${getSH()}`"/>
+ <div class="md-layout-item rounded-and-colored" v-bind:class="`md-size-${puff_size} ${getSS()}`">
<h4 style="text-align: center; margin: 10% 10%;">{{this.$API.stats.statistic.working_servers}}/{{this.$API.stats.statistic.total_servers}}</h4>
</div>
</div>
@@ -34,11 +34,18 @@
export default {
name: 'CurrentPlayers',
data: () => ({
- puff_size: 10,
- space_size: 5
+ puff_size: 15,
+ space_size: 5,
+ small_hide: true,
+ small_puff_size: 30
}),
- beforeMount() {
-
+ methods: {
+ getSH() {
+ return this.small_hide?"md-small-hide":'';
+ },
+ getSS() {
+ return this.small_puff_size>0?`md-small-size-${this.small_puff_size}`:'';
+ }
}
}
</script>
\ No newline at end of file
diff --git a/src/components/TabsMenuElements/MainView/Components/WhyNot.vue b/src/components/TabsMenuElements/MainView/Components/WhyNot.vue
index e288780..f647250 100644
--- a/src/components/TabsMenuElements/MainView/Components/WhyNot.vue
+++ b/src/components/TabsMenuElements/MainView/Components/WhyNot.vue
@@ -1,7 +1,7 @@
<template>
<div class="md-layout">
- <div class="md-layout-item md-size"/>
- <div class="md-layout-item md-size-60 rounded-and-colored" style="background: #fffefc">
+ <div class="md-layout-item md-size md-small-hide"/>
+ <div class="md-layout-item md-size-60 md-small-size-100 rounded-and-colored" style="background: #fffefc">
<h5 style="text-align: center;margin: 1%;">Давно искал место где можно почилить в данной мертвой игре??? Поздравляю ты его нашел!!!</h5>
<hr>
<CurrentPlayers/>
@@ -10,7 +10,7 @@
<hr>
<WhyNotText/>
</div>
- <div class="md-layout-item md-size"/>
+ <div class="md-layout-item md-size md-small-hide"/>
</div>
</template>
diff --git a/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue b/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue
index 0a698fe..4465a5f 100644
--- a/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue
+++ b/src/components/TabsMenuElements/MainView/Components/WhyNotText.vue
@@ -1,12 +1,12 @@
<template>
<div>
<div class="md-layout md-alignment-center-center" style="margin: 2%">
- <div class="md-layout-item md-size-50" style="margin: -5% 0%">
+ <div :class="`md-layout-item md-size-${d_size} md-small-size-${s_size}`" style="margin: -5% 0%">
<h4 style="text-align: center">Почему стоит начать играть?</h4>
</div>
</div>
<div class="md-layout md-alignment-center-center" style="margin: 2%">
- <div class="md-layout-item md-size-50">
+ <div :class="`md-layout-item md-size-${d_size} md-small-size-${s_size}`">
<p class="txt">> Все карты на сервере уникальны и сделаны нами, ты всегда можншь найти место по вкусу!</p>
<p class="txt">> Большенство плагинов на сервере сделаны нами и добавляют некий шарм в геймплей.</p>
<p class="txt">> Правила для вас не писаны(каканы), можете делать всё что душе угодно, но ожидайте что вам дадут пиздюлей наши модераторы.</p>
@@ -18,7 +18,11 @@
<script>
export default {
- name: 'WhyNotText'
+ name: 'WhyNotText',
+ data: () => ({
+ d_size: 60,
+ s_size: 90
+ })
}
</script>