better information when not enough data on PlayerSideInfo

src/components/PlayerSideInfo.vue

@@ -52,6 +52,16 @@
       </ul>
     </div>
 
+    <div v-else-if="props.player_meta.most_mates && props.player_meta.most_mates[0].total === 1" class="side-info-box best-mate">
+      <div class="heading">
+        <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
+      </div>
+      <hr>
+      <ul class="list-unstyled placeholder-glow">
+        <li class="col-11">Not enough Data</li>
+      </ul>
+    </div>
+
     <div v-else class="side-info-box best-mate">
       <div class="heading">
         <h5>Best Mate <span class="text-muted">(by winrate)</span></h5>
@@ -116,6 +126,16 @@
       </ul>
     </div>
 
+    <div v-else-if="props.player_meta.total_maps && !props.player_meta.win_maps" class="side-info-box best-map">
+      <div class="heading">
+        <h5>Best Map <span class="text-muted">(by winrate)</span></h5>
+      </div>
+      <hr>
+      <ul class="list-unstyled placeholder-glow">
+        <li class="col-11">Not enough Data</li>
+      </ul>
+    </div>
+
     <div v-else class="side-info-box best-map">
       <div class="heading">
         <h5>Best Map <span class="text-muted">(by winrate)</span></h5>
@@ -235,6 +255,10 @@ export default {
     border-radius: 5px;
   }
 
+    ol, ul, dl {
+      margin-bottom: 0;
+    }
+
   .best-mate,
   .preferred-weapons,
   .most-played-with,
@@ -262,7 +286,7 @@ export default {
       line-height: 25px;
       font-size: .9rem;
       padding: 0 10px;
-      margin: 5px 0;
+      margin: 10px 0;
       cursor: pointer;
 
       display: flex;

src/utils/ApiRequests.js

@@ -10,7 +10,7 @@ export const GetMatches = async () => {
       return res.data
   } catch (err) {
     // TODO: Error handling
-    console.log(err.response.status, err.response.statusText)
+    // console.log(err.response.status, err.response.statusText)
   }
 }
 
@@ -109,6 +109,7 @@ export const GetPlayerMeta = async (player_id, limit = 4) => {
     const res = await axios.get(`${API_URL}/player/${player_id}/meta/${limit}`)
 
     if (res.status === 200) {
+      // console.log(res.data)
       return res.data
     }
   } catch (err) {