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

@@ -1,6 +1,6 @@
 {
   "name": "csgowtf",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

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,