From 1c178404abc9594a5d1a90401759d70c54fc4f50 Mon Sep 17 00:00:00 2001
From: vikingowl <vikingowl@git.harting.dev>
Date: Mon, 31 Jan 2022 03:05:29 +0100
Subject: [PATCH] fixed background on player (#42)

Co-authored-by: vikingowl <cw.nachtigall@gmail.com>
Reviewed-on: https://git.harting.dev/CSGOWTF/csgowtf/pulls/42
Co-authored-by: vikingowl <vikingowl@git.harting.dev>
Co-committed-by: vikingowl <vikingowl@git.harting.dev>
---
 package.json         |  2 +-
 src/views/Player.vue | 21 ++++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8b117f4..4812545 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "csgowtf",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 3d0968f..bf299ed 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -1,7 +1,7 @@
 <template>
   <img alt="" class="bg-img" src="">
 
-  <div class="wrapper">
+  <div class="wrapper" :style="{minHeight: pHeight + 'px'}">
     <div class="container-lg">
       <div v-if="store.state.playerDetails.name">
         <div class="card mb-3 bg-transparent border-0">
@@ -148,7 +148,7 @@
 </template>
 
 <script>
-import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch} from "vue";
 import {useStore} from "vuex";
 import {
   constructAvatarUrl,
@@ -180,7 +180,7 @@ export default {
   setup(props) {
     // Variables
     const store = useStore()
-
+    const pHeight = ref(0)
     const displayCounter = 3
 
     const data = reactive({
@@ -201,6 +201,16 @@ export default {
       playerMeta: {},
     })
 
+    const getWindowHeight = () => {
+      const navHeight = document.getElementsByTagName('nav')[0].clientHeight
+      const footerHeight = document.getElementsByTagName('footer')[0].clientHeight
+
+      // 70 = nav-height | 108.5 = footer-height
+      return window.innerHeight - navHeight - footerHeight
+    }
+
+    pHeight.value = getWindowHeight()
+
     onBeforeMount(() => {
           if (Object.entries(store.state.playerDetails).length === 0) {
             GetPlayer()
@@ -352,9 +362,14 @@ export default {
       })
     })
 
+    window.onresize = () => {
+      pHeight.value = getWindowHeight()
+    }
+
     return {
       data,
       store,
+      pHeight,
       props,
       TrackPlayer,
       RefreshData,