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

28
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,10 +44,8 @@
</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>
<div v-else class="dropdown">
<button <button
id="login-dropdown" id="login-dropdown"
aria-expanded="false" aria-expanded="false"
@@ -87,7 +88,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="matches m-auto"> <div class="matches m-auto">
<table v-if="data.matches" class="table table-borderless"> <table v-if="data.matches" class="table table-borderless">
<thead class="border-bottom"> <thead class="border-bottom">
@@ -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;
} }