mobile main view

1 year ago · c7c84bb169
7 changed files with 57 additions and 34 deletions
--- 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: {
--- 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>
--- 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"/>
--- 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>
--- 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>
--- 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>

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