updated nav, colors and layout
This commit is contained in:
@@ -102,6 +102,7 @@
|
||||
<tbody>
|
||||
<tr v-for="match in data.matches"
|
||||
:key="match.match_id"
|
||||
:class="GetWinLoss(match.match_result, match.stats[0].team_id)"
|
||||
class="match"
|
||||
@click="GoToMatch(match.match_id)">
|
||||
<td class="td-map text-center">
|
||||
@@ -258,6 +259,16 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
const GetWinLoss = (matchResult, teamId) => {
|
||||
if (matchResult === teamId) {
|
||||
return 'win'
|
||||
} else if (matchResult === 0) {
|
||||
return 'draw'
|
||||
} else {
|
||||
return 'loss'
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => props.id, GetUser)
|
||||
|
||||
onBeforeMount(() => {
|
||||
@@ -272,6 +283,7 @@ export default {
|
||||
props,
|
||||
GetUser,
|
||||
TrackMe,
|
||||
GetWinLoss,
|
||||
FormatDate,
|
||||
FormatFullDate,
|
||||
FormatDuration,
|
||||
@@ -295,6 +307,30 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.win {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.loss {
|
||||
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.draw {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
tr {
|
||||
th {
|
||||
@@ -353,12 +389,22 @@ table {
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.win {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
|
||||
}
|
||||
|
||||
.loss {
|
||||
background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
|
||||
}
|
||||
|
||||
.draw {
|
||||
background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
|
||||
}
|
||||
.card {
|
||||
.avatar {
|
||||
height: 75px;
|
||||
|
||||
Reference in New Issue
Block a user