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

updated nav, colors and layout

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -3,7 +3,7 @@
<Nav/>
</header>
<main>
<div class="spacer bg-secondary"></div>
<div class="spacer"></div>
<router-view/>
</main>
<footer>

9
src/components/Nav.vue
View File

@@ -84,7 +84,8 @@ nav {
max-width: 100vw;
height: 70px;
width: 100vw;
background: rgba(16, 18, 26, 0.5);
//background: rgba(16, 18, 26, 0.5);
background: rgba(16, 18, 26, 1);
.text-up {
font-size: 40%;
@@ -118,7 +119,10 @@ nav {
}
@media screen and (max-width: 768px) {
nav input[type="search"] {
nav {
background: rgba(16, 18, 26, 1);
input[type="search"] {
min-width: 0;
max-width: 0;
@@ -128,4 +132,5 @@ nav {
}
}
}
}
</style>

17
src/utils/index.js
View File

@@ -71,13 +71,26 @@ export const GetHLTV_1 = (kills = 0, rounds, deaths = 0, k2 = 0, k3 = 0, k4 = 0,
export const SaveLastVisitedToLocalStorage = (data) => {
let a = JSON.parse(localStorage.getItem('recent-visited')) || [];
if (a.length === 0) {
a.push(data);
} else if (a.find(p => p.steamid64 === data.steamid64)) {
a.splice(a.findIndex(j => j.steamid64 === data.steamid64), 1)
} else if (a.length === 9) {
if (a.find(p => p.steamid64 === data.steamid64)) {
a.shift()
a.splice(a.findIndex(i => i.steamid64 === data.steamid64), 1)
a.push(data)
} else if (!a.find(p => p.steamid64 === data.steamid64)) {
a.shift()
a.push(data)
}
} else if (a.length > 0 && a.length < 9) {
if (a.find(p => p.steamid64 === data.steamid64)) {
a.splice(a.findIndex(i => i.steamid64 === data.steamid64), 1)
a.push(data)
} else if (!a.find(p => p.steamid64 === data.steamid64)) {
a.push(data)
}
}
localStorage.setItem('recent-visited', JSON.stringify(a));
}

26
src/views/Home.vue
View File

@@ -4,7 +4,7 @@
<h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
<h3 class="mb-lg-5">Open source CSGO data platform</h3>
</div>
<div class="mt-n4">
<div class="mt-n4 img-sub">
<span class="text-muted">Image by <a class="text-decoration-none text-warning"
href="https://unsplash.com/photos/6ou8gWpS9ns"
target="_blank">Fredrick Tendong</a></span>
@@ -63,7 +63,9 @@ export default {
setup() {
document.title = 'Home | csgoWTF'
const recentVisited = JSON.parse(localStorage.getItem('recent-visited')).reverse()
const recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
if (recentVisited !== null)
recentVisited.reverse()
return {recentVisited, GoToPlayer}
}
@@ -101,18 +103,24 @@ export default {
}
}
.img-sub {
font-size: .8rem;
text-align: left;
margin-left: 10px;
}
.recent-search {
max-width: 900px;
max-width: 1100px;
margin: 0 auto;
.player-card {
width: 180px;
height: 75px;
background: var(--bs-primary);
border-radius: 5% 30%;
background: var(--bs-blue);
border-radius: 15% 5%;
&:hover {
background: var(--bs-secondary);
background: var(--bs-primary);
cursor: pointer;
}
@@ -124,12 +132,18 @@ export default {
p {
font-size: .9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
@media screen and (max-width: 768px) {
.recent-search {
max-height: 240px;
overflow: hidden;
.player-card {
height: 60px;
img {

7
src/views/Match.vue
View File

@@ -1,8 +1,6 @@
<template>
<div class="pt-3">
<p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
alt="Rank icon"
class="rank-icon mx-2"/></p>
<div v-if="data.matchDetails" class="head row m-auto mb-3 text-center">
<div class="m-auto">
<img :alt="data.matchDetails.map"
@@ -10,6 +8,9 @@
:title="data.matchDetails.map" class="map-icon">
</div>
</div>
<p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
alt="Rank icon"
class="rank-icon mx-2"/></p>
</div>
<div class="nav">
<ul class="list-unstyled d-flex m-auto">

48
src/views/Player.vue
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;