CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

re-positioned 'trackme' button, added glow to avatar when tracked

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-12 03:16:43 +02:00
parent a53c4a3c14
commit fa1d0e7058
1 changed files with 55 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/Player.vue
View File

@@ -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;
}