mobile support for home and player

2021-10-06 19:25:00 +02:00
parent 886f182ff2
commit 08ffe9e550
11 changed files with 602 additions and 389 deletions
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="bg-secondary text-center pt-5 pb-4">
    <div class="icons pb-4">
-      <a class="text-white" target="_blank" href="https://git.harting.dev/CSGOWTF/csgowtf">
+      <a class="text-white" target="_blank" href="https://git.harting.dev/CSGOWTF">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github"
             viewBox="0 0 16 16">
          <path
@@ -10,10 +10,8 @@
      </a>
    </div>
    <div class="text">
-      <p>This site is an open source project, originally created and maintained by <span class="text-warning">anonfunc</span> and <span
-          class="text-warning">vikingowl</span>.</p>
-      <p class="text-muted">For feedback contact us at <a class="text-muted text-decoration-none"
-                                                          href="mailto:#">EMAIL</a></p>
+      <p>This site is an open source project, originally created and maintained by the <span class="text-warning">CSGOWTF</span> team.</p>
+      <p class="text-muted">For feedback contact us on gitea.</p>
    </div>
  </div>
 </template>
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -1,21 +1,21 @@
 <template>
  <nav class="navbar navbar-expand navbar-dark fixed-top">
-    <div class="container-fluid w-75">
-      <div class="navbar-nav">
-        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">CSGO<span class="text-up text-white fw-bold">WTF</span>
+    <div class="container">
+      <div class="navbar-nav fs-5">
+        <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
+          CSGO<span class="text-up text-white fw-bold">WTF</span>
        </router-link>
        <router-link class="nav-link" to="/explore">Explore</router-link>
      </div>
-      <form class="d-flex col-5 justify-content-end" @keydown.enter.prevent="parseSearch">
+      <form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
        <label for="search">
-          <svg class="bi bi-search" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
-               xmlns="http://www.w3.org/2000/svg">
+          <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
          </svg>
        </label>
        <input id="search" v-model="data.searchInput" aria-label="Search"
-               class="form-control w-75 bg-transparent border-0"
+               class="form-control bg-transparent border-0"
               placeholder="SteamID64, Profile Link or Custom URL"
               type="search">
      </form>
@@ -68,6 +68,8 @@ export default {
          router.push(`/player/${store.state.vanityUrl}`)
        }
      }
+
+      document.activeElement.blur()
    }

    return {
@@ -79,6 +81,7 @@ export default {

 <style lang="scss" scoped>
 nav {
+  max-width: 100vw;
  height: 70px;
  width: 100vw;
  background: rgba(16, 18, 26, 0.5);
@@ -88,6 +91,12 @@ nav {
    vertical-align: top;
  }

+  svg {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+  }
+
  label {
    padding-top: 6px;
  }
@@ -107,4 +116,16 @@ nav {
    }
  }
 }
+
+@media screen and (max-width: 768px) {
+  nav input[type="search"] {
+    min-width: 0;
+    max-width: 0;
+
+    &:focus {
+      min-width: 100%;
+      max-width: 100%;
+    }
+  }
+}
 </style>
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -1,45 +1,49 @@
 <template>
-  <table>
-    <thead>
-    <tr>
-      <th class="player__avatar"></th>
-      <th class="player__name"></th>
-      <th class="player__rank"></th>
-      <th class="player__kills cursor__help" title="Kills">K</th>
-      <th class="player__assist cursor__help" title="Assists">A</th>
-      <th class="player__deaths cursor__help" title="Deaths">D</th>
-      <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
-      <th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
-      <th class="player__adr cursor__help" title="Average damage per round">ADR</th>
-      <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
-      <th class="player__kast cursor__help" title="Percentage of rounds with a Kill, Assist, Survived or Death Traded">
-        KAST
-      </th>
-      <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
-    </tr>
-    </thead>
-    <tbody v-for="player in props.stats" :key="player.player.steamid64">
-    <tr v-if="player.team_id === props.team_id" class="player">
-      <ScoreTeamPlayer
-          :assists="player.assists"
-          :avatar="player.player.avatar"
-          :deaths="player.deaths"
-          :dmg="player.extended?.dmg?.enemy"
-          :hs="player.headshot"
-          :kast="player.extended?.kast"
-          :kdiff="player.kills - player.deaths"
-          :kills="player.kills"
-          :mk_duo="player.extended?.multi_kills?.duo"
-          :mk_pent="player.extended?.multi_kills?.pent"
-          :mk_quad="player.extended?.multi_kills?.quad"
-          :mk_triple="player.extended?.multi_kills?.triple"
-          :name="player.player.name"
-          :rounds_played="props.rounds_played"
-          :rank="player.extended?.rank?.old"
-      />
-    </tr>
-    </tbody>
-  </table>
+  <div class="scoreboard" :class="'team-' + props.team_id">
+    <table>
+      <caption :class="props.score === 16 ? 'text-success' : 'text-danger'">{{props.score}}</caption>
+      <thead>
+      <tr>
+        <th class="player__avatar"></th>
+        <th class="player__name"></th>
+        <th class="player__rank"></th>
+        <th class="player__kills cursor__help" title="Kills">K</th>
+        <th class="player__assist cursor__help" title="Assists">A</th>
+        <th class="player__deaths cursor__help" title="Deaths">D</th>
+        <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
+        <th class="player__kd cursor__help" title="Kill death ratio">K/D</th>
+        <th class="player__adr cursor__help" title="Average damage per round">ADR</th>
+        <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
+        <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
+        <th class="player__mvp cursor__help" title="Most valuable player">MVP</th>
+        <th class="player__score">Score</th>
+      </tr>
+      </thead>
+      <tbody v-for="player in props.stats" :key="player.player.steamid64">
+      <tr v-if="player.team_id === props.team_id" class="player">
+        <ScoreTeamPlayer
+            :assists="player.assists"
+            :avatar="player.player.avatar"
+            :deaths="player.deaths"
+            :dmg="player.extended?.dmg?.enemy"
+            :hs="player.headshot"
+            :kdiff="player.kills - player.deaths"
+            :kills="player.kills"
+            :mk_duo="player.extended?.multi_kills?.duo"
+            :mk_pent="player.extended?.multi_kills?.pent"
+            :mk_quad="player.extended?.multi_kills?.quad"
+            :mk_triple="player.extended?.multi_kills?.triple"
+            :mvp="player.mvp"
+            :name="player.player.name"
+            :player_score="player.score"
+            :rank="player.extended?.rank?.old"
+            :rounds_played="props.rounds_played"
+        />
+      </tr>
+      </tbody>
+    </table>
+  </div>
+  <hr v-if="props.team_id === 1">
 </template>

 <script>
@@ -62,10 +66,49 @@ export default {
      type: Number,
      required: true,
      default: 1
+    },
+    score: {
+      type: Number,
+      required: true,
+      default: 0
    }
  },
  setup(props) {
    return {props}
  }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.scoreboard {
+  margin-bottom: 20px;
+}
+
+table {
+  width: 900px;
+  text-align: center;
+  margin-top: 120px;
+  margin-bottom: -100px;
+
+  caption {
+    color: white;
+    font-size: 3rem;
+    caption-side: top;
+    padding: 0;
+    margin-left: -70px;
+    margin-bottom: -178px;
+  }
+
+  tr {
+    height: 40px;
+  }
+
+  td {
+    padding: 5px 10px;
+  }
+
+  .cursor__help {
+    cursor: help;
+  }
+}
+</style>
--- a/src/components/ScoreTeamPlayer.vue
+++ b/src/components/ScoreTeamPlayer.vue
@@ -19,7 +19,7 @@
  <td class="player__deaths">
    {{ props.deaths }}
  </td>
-  <td :class="props.kdiff >= 0 ? 'text-success' : 'text-danger'" class="player__diff">
+  <td :class="props.kdiff >= 0 ? 'text-success' : 'text-danger'" class="player__kdiff">
    {{ props.kdiff }}
  </td>
  <td class="player__kd">
@@ -31,14 +31,17 @@
  <td class="player__hs">
    {{ (props.hs > 0 && props.kills > 0) ? (props.hs * 100 / props.kills).toFixed(0) + "%" : "0%" }}
  </td>
-  <td class="player__kast">
-    {{ props.kast ? props.kast + "%" : "-" }}
-  </td>
  <td class="player__rating">
    {{
      GetHLTV_1(props.kills, props.rounds_played, props.deaths, props.mk_duo, props.mk_triple, props.mk_quad, props.mk_pent)
    }}
  </td>
+  <td class="player__mvp">
+    {{props.mvp}}
+  </td>
+  <td class="player__score">
+    {{props.player_score}}
+  </td>
 </template>

 <script>
@@ -112,19 +115,57 @@ export default {
      required: true,
      default: 0
    },
-    kast: {
-      type: Number,
-      required: true,
-      default: 0
-    },
    dmg: {
      type: Number,
      required: true,
      default: 0
    },
+    mvp: {
+      type: Number,
+      required: true,
+      default: 0
+    },
+    player_score: {
+      type: Number,
+      required: true,
+      default: 0
+    }
  },
  setup(props) {
    return {props, GetHLTV_1}
  }
 }
-</script>
+</script>
+
+<style scoped lang="scss">
+.player__avatar {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+}
+
+.player__name {
+  text-align: left;
+  width: 150px;
+}
+
+.player__rank {
+  width: 60px;
+}
+
+.player__kills, .player__assist, .player__deaths, .player__kdiff, .player__mvp {
+  width: 40px;
+}
+
+.player__kd, .player__hs, .player__rating, .player__score {
+  width: 75px;
+}
+
+.player__adr {
+  width: 85px;
+}
+
+.player__rating {
+  border-radius: 25% 25%;
+}
+</style>