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

replaced font-awesome with fork-awesome + added replay link for match demo
All checks were successful
CSGOWTF/csgowtf/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
vikingowl
2021-11-15 16:04:24 +01:00
parent e93fb5aadb
commit 299eae2938
13 changed files with 88 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/Home.vue
View File

@@ -14,25 +14,25 @@
<p>{{ player.name }}</p>
</div>
</div>
<i class="delete fas fa-times" tabindex="0" @click="removeRecentVisited(id)"></i>
<i class="delete fa fa-times" tabindex="0" @click="removeRecentVisited(id)"></i>
</div>
</div>
<hr v-if="recentVisited !== null" class="m-auto text-muted">
<div class="body container m-auto row mt-5 mb-5 justify-content-center">
<div class="col-sm-12 col-md-4 col-lg-3">
<i class="fas fa-code-branch"></i>
<i class="fa fa-code-fork"></i>
<h4 class="fw-light">Open Source</h4>
<p class="fw-light">All project code is open source and available for contributors to improve and
modify.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-3">
<i class="fas fa-chart-pie"></i>
<i class="fa fa-pie-chart"></i>
<h4 class="fw-light">In-Depth Data</h4>
<p class="fw-light">Parsing replay files provides highly detailed match data.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-3">
<i class="fas fa-money-bill-wave-alt"></i>
<i class="fa fa-liberapay"></i>
<h4 class="fw-light">Free of Charge</h4>
<p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
</div>
@@ -92,7 +92,7 @@ export default {
<style lang="scss" scoped>
.fas {
.fa {
font-size: 5rem;
padding-bottom: 1.5rem;
}

64
src/views/Match.vue
View File

@@ -38,7 +38,7 @@
on
<span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
</p>
<p class="text-center fs-6">
<div class="text-center fs-6">
<img v-if="data.matchDetails.max_rounds === 16" alt="Match length" class="match-len"
src="../assets/images/icons/timer_short.svg" title="Short-Match">
<img v-if="data.matchDetails.max_rounds === 30 || !data.matchDetails.max_rounds" alt="Match length"
@@ -51,10 +51,21 @@
:title="'Average Rank: ' + DisplayRank(data.avgRank)[1]"
class="rank-icon"/>
<span v-if="data.matchDetails.replay_url" class="text-muted px-2">—</span>
<a v-if="data.matchDetails.replay_url" :href="data.matchDetails.replay_url" class="text-white" title="Download Match">
<i class="fas fa-download"></i>
</a>
</p>
<div v-if="data.matchDetails.replay_url" class="btn-group">
<button id="dropdownMenuButton" aria-expanded="false" class="btn dropdown-toggle" data-bs-toggle="dropdown"
type="button">
<i class="fa fa-download"></i>
</button>
<ul aria-labelledby="dropdownMenuButton" class="dropdown-menu dropdown-menu-end">
<li v-if="data.matchDetails.replay_url"><a :href="data.matchDetails.replay_url"
class="text-primary dropdown-item" title="Download Match">Download
Match</a></li>
<li v-if="data.matchDetails.share_code"><a
:href="'steam://rungame/730/76561202255233023/+csgo_download_match ' + data.matchDetails.share_code"
class="text-primary dropdown-item" title="Download Match">Replay Match in CSGO</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
@@ -92,13 +103,6 @@
replace>Flashes
</router-link>
</li>
<!-- <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
<!-- :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
<!-- class="list-item nav-item">-->
<!-- <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
<!-- class="nav-link">Utility-->
<!-- </router-link>-->
<!-- </li>-->
<li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
class="list-item nav-item">
<router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
@@ -339,16 +343,34 @@ export default {
height: 20px;
}
a {
font-weight: 600;
text-decoration: none;
color: var(--bs-warning) !important;
transition: all .25s;
line-height: 1rem;
.btn-group {
margin-left: -10px;
&:hover {
color: #b98d00 !important;
text-decoration: underline;
.btn, .dropdown-toggle {
outline: none;
border: none;
box-shadow: none;
&:focus, &:hover, &:active {
outline: none;
border: none;
box-shadow: none;
}
.fa {
color: var(--bs-warning);
}
}
ul {
border: 2px solid var(--bs-primary);
background: var(--bs-secondary);
li {
a:hover, a:focus {
background: var(--bs-body-bg);
}
}
}
}
}

57
src/views/Player.vue
View File

@@ -22,7 +22,7 @@
title="Open steam profile">{{
store.state.playerDetails.name
}}
<i class="fas fa-link"></i>
<i class="fa fa-external-link"></i>
</a></h3>
<table class="table table-borderless text-center">
<tr>
@@ -110,7 +110,7 @@
</div>
</div>
<div v-if="data.tracked" class="refresh-btn" title="Refresh Match-List" @click="RefreshData">
<i class="fas fa-sync"></i>
<i class="fa fa-refresh fa-2x"></i>
</div>
</div>
</div>
@@ -144,16 +144,16 @@
@click="GoToMatch(match.match_id)"
>
<td class="td-map text-center">
<i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
<i v-if="match.parsed" class="fa fa-bar-chart parsed" style="cursor: help"
title="Demo has been parsed for additional data"></i>
<i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fas fa-hourglass-half not-yet-parsed" style="cursor: help"
<i v-if="!match.parsed && MatchNotParsedTime(match.date)" class="fa fa-hourglass-half not-yet-parsed" style="cursor: help"
title="Match has not been parsed yet"></i>
<img v-if="match.map"
:alt="match.map ? match.map : 'Map not found'"
:src="match.map !== '' ? require('../assets/images/map_icons/map_icon_' + match.map + '.svg') : require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
:title="match.map"
class="map-icon">
<i v-else title="Match not parsed" class="far fa-question-circle map-not-found"></i>
<i v-else title="Match not parsed" class="fa fa-question-circle-o map-not-found"></i>
</td>
<td class="td-rank text-center">
<img
@@ -452,12 +452,18 @@ export default {
}
const RefreshData = async () => {
const refreshButton = document.querySelector('.refresh-btn .fas')
refreshButton.classList.add('animate')
const refreshButton = document.querySelector('.refresh-btn .fa')
refreshButton.classList.add('fa-spin')
refreshButton.classList.add('fa-fw')
refreshButton.classList.remove('fa-refresh')
refreshButton.classList.add('fa-spinner')
await GetPlayer(true).then(() => {
setTimeout(() => {
refreshButton.classList.remove('animate')
refreshButton.classList.remove('fa-spin')
refreshButton.classList.remove('fa-fw')
refreshButton.classList.add('fa-refresh')
refreshButton.classList.remove('fa-spinner')
}, 2000)
})
@@ -604,34 +610,15 @@ export default {
&:hover,
&:focus {
.fas {
.fa-refresh {
color: var(--bs-warning);
}
}
.fas {
.fa {
font-size: 1.3rem;
&.animate {
animation: refresh 2s infinite;
}
}
}
@keyframes refresh {
0% {
transform: rotate(0deg) scale(1);
}
10% {
transform: rotate(-15deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.4);
}
100% {
transform: rotate(360deg) scale(1);
}
};
}
.card {
@@ -658,7 +645,7 @@ export default {
}
}
.fas, .far {
.fa {
font-size: .75rem;
vertical-align: top;
}
@@ -878,10 +865,10 @@ table {
.map-not-found {
position: absolute;
top: 13px;
left: 53px;
font-size: 3.2rem;
color: var(--bs-warning);
top: 4px;
left: 48px;
font-size: 4.35rem;
color: rgba(255, 193, 7, .86);
}
img {
@@ -1053,7 +1040,7 @@ table {
.refresh-btn {
&:hover,
&:focus {
.fas {
.fa {
color: white !important;
}
}