Facti13.Frontend.VueMaterial/src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

<template>
  <div>
    <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-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()">
          <h3 style="text-align: center; margin: 25% 0%">X</h3>
        </div>
      </div>
      <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
        <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>
            <hr width="30%">
          </div>
          <div style="justify-content: center; display: flex; margin-top: 2.5%">
            <div style="max-width: 40%; float: left;" v-on:click="onMove('steam')" class="clickable">
              <TerminalSvg class="img-server"/>
              <p class="p-server" style="margin-bottom: -5%">Подключиться</p>
              <p class="p-server-address">{{serverData['address']}}</p>
            </div>
            <div style="max-width: 40%; float: left;" v-if="serverData['workshop'].length > 0" v-on:click="onMove('workshop')" class="clickable">
              <SteamSvg class="img-server"/>
              <p class="p-server" style="margin-bottom: -5%">Workshop</p>
              <p class="p-server-address">by Пельмень</p>
            </div>
            <div style="max-width: 40%; float: left;" v-else v-on:click="onMove('fastdl')" class="clickable">
              <img :src="require('@/assets/images/logo/download.svg')" class="img-server">
              <p class="p-server" style="margin-bottom: -5%">FastDL</p>
              <p class="p-server-address">by Добродей</p>
            </div>
          </div>
          <hr width="30%">
          <h3 v-if="serverData['player_count'] < 1" style="text-align: center; line-height: 1em">На сервере пусто, заходи с друзьями...</h3>
          <div>
            <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
            <hr width="30%">
            <table v-if="serverData['players'].length > 0" style="margin-left: auto; margin-right: auto; height: 20em; padding-left: 10%; padding-right: 10%; padding-bottom: 5%">
              <thead>
                <tr>
                  <th style="text-align: left; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Имя</th>
                  <th style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Очки</th>
                  <th style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Время игры</th>
                </tr>
              </thead>
              <tbody>
              <PlayerTableInfo v-for="player_data in serverData['players']" :key="player_data['name']" :player="player_data"/>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </md-dialog>
  </div>
</template>

<script>
import PlayerTableInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue";
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import TerminalSvg from "@/components/Others/CustomSvg/TerminalSvg.vue";

export default {
  name: "ServerFullInfo",
  components: {TerminalSvg, SteamSvg, PlayerTableInfo},
  props: {
    serverData: Object,
  },
  data: () => ({
    showServerDialog: false
  }),
  methods: {
    openFIF() {
      this.showServerDialog = true;
    },
    closeFIF() {
      this.showServerDialog = false;
    },
    onMove(select){
      switch (select) {
        case 'steam': return window.open(`steam://${this.serverData['address']}`, '_self').focus();
        case 'workshop': return window.open(this.serverData['workshop'], '_blank').focus();
        case 'fastdl': return window.open(`https://tf2.pblr-nyk.pro/tf/maps/${this.serverData['map']}.bsp.bz2`, '_blank').focus();
      }
    }
  }
}
</script>

<style>
.p-server {
  text-align: center; font-size: 2em; color: #131213
}

.p-server-address {
  text-align: center; font-size: 1.5em; color: gray;
}

.img-server {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  color: #131213;
}

.img-server:hover {
  color: #fd8846;
}

.server-table-padding {
  padding: 2% 0%;
}

table {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}

table thead {
  /* head takes the height it requires,
  and it's not scaled when table is resized */
  flex: 0 0 auto;
  width: calc(100% - 0.9em);
}
table tbody {
  /* body takes all the remaining available space */
  flex: 1 1 auto;
  display: block;
  overflow-y: scroll;
}

table tbody tr {
  width: 100%;
}
table thead, table tbody tr {
  display: table;
  table-layout: fixed;
}

.server-info-rounded {
  border-radius: 20px;
  border: 5px solid black;
  background: #fdfdfe;
}

.md-dialog-container {
  max-height: 100%;
  max-width: 100%;
  box-shadow: unset;
}

@media(width < 599px) {
  .sfi-current-player {
    font-size: 2em;
  }
}
</style>