updated nav, colors and layout

This commit is contained in:
cnachtigall1991
2021-10-06 22:53:49 +02:00
parent a62a702484
commit a42c3ff777
6 changed files with 102 additions and 23 deletions

View File

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