made background-gradient of matches variable + fixed background image on player not scaling properly on mobile devices

2021-10-24 16:41:21 +02:00
parent f610b27317
commit 95a3fb085a
4 changed files with 79 additions and 57 deletions
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="bg-secondary text-center pt-5 pb-4">
+  <div class="footer bg-secondary text-center pt-5 pb-4">
    <div class="icons pb-4">
-      <a class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank" aria-label="Git Link">
-<!--        <i class="bi bi-github"></i>-->
-        <img src="../assets/images/icons/gitea.svg" alt="Gitea Icon">
+      <a aria-label="Git Link" class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
+        <!--        <i class="bi bi-github"></i>-->
+        <img alt="Gitea Icon" src="../assets/images/icons/gitea.svg">
      </a>
    </div>
    <div class="text">
@@ -22,12 +22,17 @@ export default {
 }
 </script>

-<style scoped>
-img {
+<style lang="scss" scoped>
+.footer {
+  height: 200px;
+
+  img {
    width: 35px;
    height: 35px;
-}
-p {
+  }
+
+  p {
    font-size: .85rem;
+  }
 }
 </style>
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -18,3 +18,6 @@ export const GRENADES = {
  505: 'EqSmoke', // eqElementToName[EqSmoke] = "Smoke Grenade"
  506: 'EqHE', // eqElementToName[EqHE] = "HE Grenade"
 }
+
+export const NAV_HEIGHT = 70
+export const FOOTER_HEIGHT = 200
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,7 +1,7 @@
 <template>
  <img alt="" class="bg-img" src="">

-  <div class="">
+  <div class="match-wrapper">
    <div class="head row m-auto text-center">
      <div class="map-score">
        <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
@@ -39,7 +39,8 @@
        <p class="text-center fs-6">
          <img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
               src="../assets/images/icons/timer_short.svg" title="Short-Match">
-            <img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length" class="match-len"
+          <img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
+               class="match-len"
               src="../assets/images/icons/timer_long.svg" title="Long-Match">
          <span v-if="data.matchDetails.parsed" class="text-muted px-2">—</span>
          <img v-if="data.matchDetails.parsed"
@@ -106,8 +107,8 @@
      </ul>
    </div>
  </div>
-  <div v-if="data.score.length === 2 && data.stats" id="scoreWrapper" class="scoreboard">
-    <router-view name="score"/>
+  <div id="scoreWrapper" class="scoreboard">
+    <router-view v-if="data.score.length === 2 && data.stats" name="score"/>
  </div>
 </template>

@@ -120,12 +121,13 @@ import {
  FormatDuration,
  FormatFullDate,
  GetAvgRank,
+  getMatchDetails,
  GoToLink,
-  LoadImage,
-  getMatchDetails
+  LoadImage
 } from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
+import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";

 export default {
  name: 'Match',
@@ -221,14 +223,21 @@ export default {
      GetMatch()
    })

-    onMounted(() => {
-      checkRoute()
-    })
-
    onBeforeUnmount(() => {
      store.commit('resetMatchDetails')
    })

+    onMounted(() => {
+      checkRoute()
+
+      const headHeight = 230
+      const navHeight = 42
+
+      const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT - headHeight - navHeight
+      const scoreWrapper = document.getElementById('scoreWrapper')
+      scoreWrapper.style.minHeight = height + 'px'
+    })
+
    document.addEventListener('click', () => {
      closeNav('matchNav')
    })
@@ -251,6 +260,7 @@ export default {
 }

 .head {
+  height: 230px;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.95) 30%,
@@ -340,6 +350,7 @@ export default {

 .nav {
  max-width: 100vw;
+  height: 42px;
  background: rgba(0, 0, 0, 0.9);
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.7) 0%,
@@ -379,9 +390,7 @@ export default {
  justify-content: center;
  flex-wrap: wrap;

-  //padding-left: 70px;
  z-index: 1;
-  height: 100%;
  width: 100%;
  max-width: 100vw;
  background: linear-gradient(90deg,
@@ -392,7 +401,7 @@ export default {
  );
 }

-@media screen and (max-width: 991px) {
+@media (max-width: 991px) {
  .score-team-1,
  .score-team-2 {
    top: 2rem !important;
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -214,7 +214,7 @@
          <h5 v-else>No matches on record</h5>
        </div>
        <div v-if="store.state.playerDetails.matches" class="side-info">
-          <div class="side-info-box most-played-with">
+          <div v-if="data.playerMeta.most_mates" class="side-info-box most-played-with">
            <div class="heading">
              <h5>Most played with</h5>
            </div>
@@ -232,7 +232,7 @@
              </li>
            </ul>
          </div>
-          <div class="side-info-box best-mate">
+          <div v-if="data.playerMeta.best_mates" class="side-info-box best-mate">
            <div class="heading">
              <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
            </div>
@@ -250,7 +250,7 @@
              </li>
            </ul>
          </div>
-          <div class="side-info-box preferred-weapons">
+          <div v-if="data.playerMeta.eq_map && data.playerMeta.weapon_dmg" class="side-info-box preferred-weapons">
            <div class="heading">
              <h5>Weapons <span class="text-muted">(by dmg)</span></h5>
            </div>
@@ -295,7 +295,7 @@
 </template>

 <script>
-import {onBeforeMount, onBeforeUnmount, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {useStore} from "vuex";
 import {
  constructAvatarUrl,
@@ -320,6 +320,7 @@ import {
  sortObjectValue,
  TrackMe,
 } from "../utils";
+import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";

 export default {
  name: 'Player',
@@ -407,7 +408,6 @@ export default {
          SetPlayerData()

          console.log(store.state.playerDetails)
-          console.log(data.playerMeta)
        } else {
          GoToLink('/')
          // TODO: needs 404
@@ -455,6 +455,7 @@ export default {
    }

    const mapWeaponDamage = () => {
+      if (data.playerMeta.eq_map && data.playerMeta.weapon_dmg) {
        Object.keys(data.playerMeta.eq_map).forEach((key) => {
          for (const id in data.playerMeta.weapon_dmg) {
            Object.keys(data.playerMeta.weapon_dmg[id]).forEach((k) => {
@@ -474,6 +475,7 @@ export default {
        data.best_weapons = data.best_weapons_tmp
        data.best_weapons_tmp = []
      }
+    }

    watch(() => props.id, () => {
      GetPlayer()
@@ -492,6 +494,12 @@ export default {
      store.commit('resetPlayerDetails')
    })

+    onMounted(() => {
+      const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT
+      const wrapper = document.querySelector('.wrapper')
+      wrapper.style.minHeight = height + 'px'
+    })
+
    return {
      data,
      store,
@@ -521,17 +529,14 @@ export default {
 .bg-img {
  z-index: -1;
  position: fixed;
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
  width: 100%;
-  left: 0;
+  height: 100%;
+  object-fit: cover;
+  overflow: hidden;
 }

 .wrapper {
  background: rgba(0, 0, 0, .7);
-  min-width: 100%;
-  min-height: 100%;

  .load-more {
    padding: 1rem 0;