mobile servers view

src/api/GlobalApi.js

@@ -66,6 +66,7 @@ export default class GlobalApi {
                     else if (response[srv]['player_count'] > 0) srvs.w.push(response[srv]);
                     else srvs.e.push(response[srv]);
                 }
+                srvs['w'].sort((s1,s2) => s2.player_now - s1.player_now);
                 this.stats['servers'] = srvs;
             })
             .catch(err => {

src/components/TabsMenuElements/MainView/Components/SubComponents/ConnectButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="md-layout md-alignment-center-center" style="margin: 2%">
-    <div class="md-layout-item md-size-50 rounded-and-colored md-small-size-80">
+    <div class="md-layout-item md-size-50 rounded-and-colored md-small-size-80 clickable">
       <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; padding-right: 1%">{{' > '}}</h4>

src/components/TabsMenuElements/RulesView/Components/RuleCard.vue

@@ -28,7 +28,7 @@ export default {
   },
   methods: {
     ifItem() {
-      return this.box_in_item?`md-layout-item md-size-${this.md_size}`:'';
+      return this.box_in_item?`md-layout-item md-size-${this.md_size} md-xsmall-size-90 md-small-size-50`:'';
     },
     getImg() {
       return this.img_src;

src/components/TabsMenuElements/ServersView/Components/PlayerExtendedInfo.vue

@@ -1,8 +1,8 @@
 <template>
     <md-dialog :md-active.sync="showPlayerDialog">
       <div class="md-layout md-alignment-bottom-center"  style="z-index: 1">
-        <div class="md-layout-item md-size-5"/>
+        <div class="md-layout-item md-size-5 md-small-hide"/>
-        <div class="md-layout-item rounded-and-colored md-size-60" style="min-width: 35em">
+        <div class="md-layout-item rounded-and-colored md-size-60 md-small-size-90">
           <h3 style="text-align: center; margin: 2% 0%; max-height: 30em" class="h3-player">{{player['name']}}</h3>
         </div>
         <div class="md-layout-item rounded-and-colored-circle md-size-5" v-on:click="closePEI()" style="min-width: 3em">

src/components/TabsMenuElements/ServersView/Components/ServerCard.vue

@@ -7,9 +7,9 @@
         </md-card-media>
         <md-card-area class="md-card-area-server">
           <md-card-header>
-            <span class="md-title" style="text-align: left; font-family: tf2build; font-size: 2.5em">{{serverName}}</span>
+            <span class="md-title sc-title" style="text-align: left; font-family: tf2build; font-size: 2.5em">{{serverName}}</span>
-            <br>
+            <br class="sc-br">
-            <span class="md-subhead" style="text-align: left; font-family: tf2secondary; font-size: 3em">{{serverCurrentPlayer}}/{{serverMaxPlayer}}</span>
+            <span class="md-subhead sc-subhead" style="text-align: left; font-family: tf2secondary; font-size: 3em">{{serverCurrentPlayer}}/{{serverMaxPlayer}}</span>
           </md-card-header>
         </md-card-area>
       </md-card-media-cover>
@@ -78,4 +78,18 @@ export default {
   -ms-filter: blur(2px);
   filter: blur(2px);
 }
+
+@media(width < 599px) {
+  .sc-title {
+    font-size: 1.5em !important;
+  }
+
+  .sc-subhead {
+    font-size: 1em !important;
+  }
+
+  .sc-br {
+    display: none;
+  }
+}
 </style>

src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

@@ -3,7 +3,7 @@
     <md-dialog :md-active.sync="showServerDialog" style="z-index: 10">
       <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
         <div class="md-layout-item md-size-5"/>
-        <div class="md-layout-item rounded-and-colored md-size-60">
+        <div class="md-layout-item rounded-and-colored md-size-45 md-small-size-90">
           <h3 style="text-align: center; margin: 2% 0%">{{serverData['name']}}</h3>
         </div>
         <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closeFIF()">
@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
-        <div class="md-layout-item md-size-65 server-info-rounded">
+        <div class="md-layout-item md-size-50 server-info-rounded md-small-size-100">
           <img :src="serverData['preview']" style="width: 100%; height:12em;object-fit: cover;border-top-left-radius: 15px; border-top-right-radius: 15px">
           <div>
             <p class="p-server">{{serverData['description']}}</p>
@@ -37,7 +37,7 @@
           <hr width="30%">
           <h3 v-if="serverData['player_count'] < 1" style="text-align: center; line-height: 1em">На сервере пусто, заходи с друзьями...</h3>
           <div v-else>
-            <h3 style="text-align: center">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
+            <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
             <hr width="30%">
             <table style="margin-left: auto; margin-right: auto; height: 20em; padding-left: 10%; padding-right: 10%; padding-bottom: 5%">
               <thead>
@@ -150,8 +150,14 @@ table thead, table tbody tr {
 }
 
 .md-dialog-container {
-  max-height: 90%;
+  max-height: 100%;
-  max-width: 70%;
+  max-width: 100%;
   box-shadow: unset;
 }
+
+@media(width < 599px) {
+  .sfi-current-player {
+    font-size: 2em;
+  }
+}
 </style>

src/components/TabsMenuElements/ServersView/ServersView.vue

@@ -1,15 +1,15 @@
 <template>
   <md-tab id="serversView" md-label="Серверы">
-    <div class="md-layout md-alignment-bottom-center" style="margin-bottom: -1%; margin-top: 1%">
+    <div class="md-layout md-alignment-bottom-center md-small-hide" style="margin-bottom: -1%; margin-top: 1%">
       <CharacterImage :size="10" :img_src="require(`@/assets/images/characters/toilet.png`)" :audio_src="require(`@/assets/sounds/puk.mp3`)"/>
     </div>
     <div class="md-layout md-alignment-bottom-center" v-on:click="updateServers()">
-      <div class="md-layout-item md-size-25 md-alignment-bottom-center rounded-and-colored clickable" style="z-index: 1">
+      <div class="md-layout-item md-size-25 md-small-size-100 md-alignment-bottom-center rounded-and-colored clickable" style="z-index: 1">
-        <h3 style="text-align: center; margin: 4% 0%">Список серверов</h3>
+        <h3 style="text-align: center; margin: 4% 0%; line-height: 1em">Список серверов</h3>
       </div>
     </div>
     <div class="md-layout md-alignment-bottom-center" style="margin-top: -1.5%">
-      <div class="md-layout-item md-size-50 md-alignment-bottom-center rounded-only">
+      <div class="md-layout-item md-size-50 md-small-size-100 md-alignment-bottom-center rounded-only">
         <h4 style="text-align: center">Для подключения к серверу нажми на него</h4>
         <hr>
         <h5 style="text-align: center" v-if="this.$API.stats.servers['w'].length>0">где сейчас играют карлики</h5>