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

This commit is contained in:
2021-11-15 16:04:24 +01:00
parent e93fb5aadb
commit 299eae2938
13 changed files with 88 additions and 116 deletions

View File

@@ -8,13 +8,13 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"@popperjs/core": "^2.10.2",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"core-js": "^3.19.1",
"dotenv-webpack": "^7.0.3",
"echarts": "^5.2.2",
"fork-awesome": "^1.2.0",
"jquery": "^3.6.0",
"luxon": "^2.1.1",
"string-sanitizer": "^2.0.2",

View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</svg>

Before

Width:  |  Height:  |  Size: 208 B

View File

@@ -1,12 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
<g>
<path id="teabag" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
<g>
<g>
<path style="fill:#FFFFFF" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
<path style="fill:#FFFFFF" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"/>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

View File

@@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M7,12 L14.5,12 C16.277025,12 17.7447372,10.6756742 17.970024,8.96013518 C16.2885152,8.7047201 15,7.25283448 15,5.5 C15,3.56700338 16.5670034,2 18.5,2 C20.4329966,2 22,3.56700338 22,5.5 C22,7.27155475 20.6838151,8.73569805 18.9759671,8.96790818 C18.7419236,11.2333126 16.8272778,13 14.5,13 L7,13 L7,15.0354444 C8.69614707,15.2780593 10,16.736764 10,18.5 C10,20.4329966 8.43299662,22 6.5,22 C4.56700338,22 3,20.4329966 3,18.5 C3,16.736764 4.30385293,15.2780593 6,15.0354444 L6,8.96455557 C4.30385293,8.72194074 3,7.26323595 3,5.5 C3,3.56700338 4.56700338,2 6.5,2 C8.43299662,2 10,3.56700338 10,5.5 C10,7.26323595 8.69614707,8.72194074 7,8.96455557 L7,12 Z M4,18.5 C4,19.8807119 5.11928813,21 6.5,21 C7.88071187,21 9,19.8807119 9,18.5 C9,17.1192881 7.88071187,16 6.5,16 C5.11928813,16 4,17.1192881 4,18.5 Z M4,5.5 C4,6.88071187 5.11928813,8 6.5,8 C7.88071187,8 9,6.88071187 9,5.5 C9,4.11928813 7.88071187,3 6.5,3 C5.11928813,3 4,4.11928813 4,5.5 Z M18.5,3 C17.1192881,3 16,4.11928813 16,5.5 C16,6.88071187 17.1192881,8 18.5,8 C19.8807119,8 21,6.88071187 21,5.5 C21,4.11928813 19.8807119,3 18.5,3 Z"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@@ -1,4 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-image" viewBox="0 0 16 16">
<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
<path d="M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z"/>
</svg>

Before

Width:  |  Height:  |  Size: 410 B

View File

@@ -2,8 +2,7 @@
<div class="footer bg-secondary text-center pt-4 pb-4">
<div class="icons pb-4">
<a aria-label="Git Link" class="gitea text-white" href="https://git.harting.dev/CSGOWTF" target="_blank">
<!-- <i class="bi bi-github"></i>-->
<img alt="Gitea Icon" src="../assets/images/icons/gitea.svg">
<i class="fa fa-gitea fa-2x" aria-hidden="true"></i>
</a>
</div>
<div class="text">
@@ -31,23 +30,9 @@ export default {
.footer {
height: 200px;
img {
width: 35px;
height: 35px;
.fa:hover {
color: #609926;
}
a:not(.gitea):focus,
a:not(.gitea):hover {
outline: none;
box-shadow: 0 4px 2px -2px var(--bs-warning);
}
.gitea:focus,
.gitea:hover {
outline: none;
filter: brightness(0.4) sepia(1) hue-rotate(15deg) saturate(2);
}
p {
font-size: .85rem;
}

View File

@@ -21,7 +21,7 @@
</ul>
<form id="searchform" class="d-flex" @keydown.enter.prevent="parseSearch" @submit.prevent="parseSearch">
<label for="search">
<i class="fas fa-search"></i>
<i class="fa fa-search"></i>
</label>
<input id="search" v-model="data.searchInput" aria-label="Search"

View File

@@ -15,9 +15,9 @@
class="player__avatar">
</td>
<td class="player__name" @click="GoToPlayer(props.steamid64)">
<i v-if="props.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i>
<i v-if="props.tracked" class="fa fa-dot-circle-o text-success tracked" title="Tracked user"></i>
{{ props.name }}
<i class="fas fa-link"></i>
<i class="fa fa-external-link"></i>
</td>
<td v-if="props.parsed" class="player__rank">
<img :alt="DisplayRank(props.rank)[1]"
@@ -261,8 +261,8 @@ export default {
font-size: .8rem;
}
.fas {
font-size: .5rem;
.fa-external-link {
font-size: .8rem;
vertical-align: top;
}
}

View File

@@ -55,7 +55,7 @@ $success: #609926;
// Bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap";
@import "../../node_modules/@fortawesome/fontawesome-free/css/all.css";
@import "../../node_modules/fork-awesome/css/fork-awesome.css";
:root {
// CSGO COLORS

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

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);
}
}
}
}
}

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

View File

@@ -1256,13 +1256,6 @@ __metadata:
languageName: node
linkType: hard
"@fortawesome/fontawesome-free@npm:^5.15.4":
version: 5.15.4
resolution: "@fortawesome/fontawesome-free@npm:5.15.4"
checksum: 32281c3df4075290d9a96dfc22f72fadb3da7055d4117e48d34046b8c98032a55fa260ae351b0af5d6f6fb57a2f5d79a4abe52af456da35195f7cb7dda27b4a2
languageName: node
linkType: hard
"@gar/promisify@npm:^1.0.1":
version: 1.1.2
resolution: "@gar/promisify@npm:1.1.2"
@@ -4099,7 +4092,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "csgowtf@workspace:."
dependencies:
"@fortawesome/fontawesome-free": ^5.15.4
"@popperjs/core": ^2.10.2
"@vue/cli-plugin-babel": ~4.5.13
"@vue/cli-plugin-eslint": ~4.5.13
@@ -4115,6 +4107,7 @@ __metadata:
echarts: ^5.2.2
eslint: ^6.8.0
eslint-plugin-vue: ^7.19.1
fork-awesome: ^1.2.0
jquery: ^3.6.0
luxon: ^2.1.1
sass: ^1.43.4
@@ -5636,6 +5629,13 @@ __metadata:
languageName: node
linkType: hard
"fork-awesome@npm:^1.2.0":
version: 1.2.0
resolution: "fork-awesome@npm:1.2.0"
checksum: 473a6452d44020530b4f39d23c87ea3a3bba67390b08b4b9e279b2c79cd17288562403f9d4acdd640c978c7491bf3f3220f5bdbed06221104fee3aa77da84d40
languageName: node
linkType: hard
"form-data@npm:~2.3.2":
version: 2.3.3
resolution: "form-data@npm:2.3.3"