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