From fa1d0e70583f859471879bc86c423657b6f65592 Mon Sep 17 00:00:00 2001
From: cnachtigall1991 <40701475+cnachtigall1991@users.noreply.github.com>
Date: Tue, 12 Oct 2021 03:16:43 +0200
Subject: [PATCH] re-positioned 'trackme' button, added glow to avatar when
 tracked

---
 src/views/Player.vue | 96 +++++++++++++++++++++++++-------------------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/views/Player.vue b/src/views/Player.vue
index 345388e..3c73b50 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -6,9 +6,12 @@
         <div class="row g-0">
           <div class="img-container col-md-2 pt-3">
             <img
-                :src="data.playerDetails.avatar" alt="Player avatar" class="img-fluid avatar">
+                :class="data.playerDetails.tracked ? 'tracked' : ''" :src="data.playerDetails.avatar"
+                :title="data.playerDetails.tracked ? 'Tracked' : ''"
+                alt="Player avatar"
+                class="img-fluid avatar">
           </div>
-          <div class="col-md-8">
+          <div class="col-md-8 d-flex">
             <div class="card-body">
               <h3 class="card-title"><a
                   :href="/^\d{17}$/.test(props.id) ? 'https://steamcommunity.com/profiles/' + props.id : 'https://steamcommunity.com/id/' + props.id"
@@ -41,48 +44,45 @@
                   </td>
                 </tr>
               </table>
-              <small v-if="data.playerDetails.tracked" class="card-text text-muted">
-                Currently tracked
-              </small>
-              <div v-else class="dropdown">
-                <button
-                    id="login-dropdown"
-                    aria-expanded="false"
-                    class="btn border-2 btn-outline-info"
-                    data-bs-toggle="dropdown"
-                    type="button"
-                >
-                  Track Me!
-                </button>
-                <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
-                     style="width: 320px">
-                  <form class="px-4 py-3">
-                    <!-- AuthCode input -->
-                    <div class="form-outline mb-4">
-                      <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
-                             placeholder="AuthCode*"
-                             required type="text"/>
-                    </div>
+            </div>
+            <div v-if="!data.playerDetails.tracked" class="dropdown trackme-btn">
+              <button
+                  id="login-dropdown"
+                  aria-expanded="false"
+                  class="btn border-2 btn-outline-info"
+                  data-bs-toggle="dropdown"
+                  type="button"
+              >
+                Track Me!
+              </button>
+              <div aria-labelledby="login-dropdown" class="dropdown-menu mt-2 border-2 border-primary bg-body"
+                   style="width: 320px">
+                <form class="px-4 py-3">
+                  <!-- AuthCode input -->
+                  <div class="form-outline mb-4">
+                    <input id="track-authcode" v-model="data.userData.authcode" class="form-control bg-secondary"
+                           placeholder="AuthCode*"
+                           required type="text"/>
+                  </div>
 
-                    <!-- ShareCode input -->
-                    <div class="form-outline mb-2">
-                      <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
-                             placeholder="ShareCode"
-                             type="text"/>
-                    </div>
+                  <!-- ShareCode input -->
+                  <div class="form-outline mb-2">
+                    <input id="track-sharecode" v-model="data.userData.sharecode" class="form-control bg-secondary"
+                           placeholder="ShareCode"
+                           type="text"/>
+                  </div>
 
-                    <div class="form-outline mb-4">
-                      <small>You can find your AuthCode and ShareCode <a
-                          href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
-                          target="_blank">here</a>.</small>
-                    </div>
+                  <div class="form-outline mb-4">
+                    <small>You can find your AuthCode and ShareCode <a
+                        href="https://help.steampowered.com/en/wizard/HelpWithGameIssue/?appid=730&issueid=128"
+                        target="_blank">here</a>.</small>
+                  </div>
 
-                    <!-- Submit button -->
-                    <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
-                      TrackMe
-                    </button>
-                  </form>
-                </div>
+                  <!-- Submit button -->
+                  <button class="btn btn-outline-warning border-2" type="submit" @click.prevent="TrackMe">
+                    TrackMe
+                  </button>
+                </form>
               </div>
             </div>
           </div>
@@ -329,6 +329,12 @@ export default {
   background: rgba(0, 0, 0, .7);
   min-width: 100%;
   min-height: 100%;
+
+  .trackme-btn {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
 }
 
 .card {
@@ -339,6 +345,10 @@ export default {
     height: 150px;
     width: 150px;
     box-shadow: 0 0 10px black;
+
+    &.tracked {
+      box-shadow: 0 0 20px 5px var(--bs-success);
+    }
   }
 
   .fas, .far {
@@ -488,6 +498,10 @@ table {
       width: 75px;
     }
   }
+  .trackme-btn {
+    top: 25px;
+  }
+
   .map {
     padding-left: 2.2rem !important;
   }