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

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">
+      <a aria-label="Git Link" class="text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
         <!--        <i class="bi bi-github"></i>-->
-        <img src="../assets/images/icons/gitea.svg" alt="Gitea Icon">
+        <img alt="Gitea Icon" src="../assets/images/icons/gitea.svg">
       </a>
     </div>
     <div class="text">
@@ -22,12 +22,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.footer {
+  height: 200px;
+
   img {
     width: 35px;
     height: 35px;
   }
+
   p {
     font-size: .85rem;
   }
+}
 </style>

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

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">
+  <div id="scoreWrapper" class="scoreboard">
-    <router-view name="score"/>
+    <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,
+  LoadImage
-  getMatchDetails
 } 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;

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;