mobile support for home and player
This commit is contained in:
cnachtigall1991
@@ -1,62 +1,77 @@
|
||||
<template>
|
||||
<div class="main-content content text-center">
|
||||
<div class="head">
|
||||
<h1 class="text-warning fw-bold">CSGO<span class="text-up text-white">WTF</span></h1>
|
||||
<h3>Open source CSGO data platform</h3>
|
||||
<div class="head pt-5 pb-5">
|
||||
<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="body row m-auto mt-5 mb-5">
|
||||
<div class="col-4">
|
||||
<svg class="mb-4" height="80" viewBox="0 0 24 24" width="80" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
fill="white"/>
|
||||
<div class="mt-n4">
|
||||
<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>
|
||||
</div>
|
||||
<div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
|
||||
<h4 class="mb-3s">Recently visited players</h4>
|
||||
<div v-for="player in recentVisited" :key="player.steamid64" class="player-card"
|
||||
@click="GoToPlayer(player.steamid64)">
|
||||
<div class="p-2">
|
||||
<div class="col-md-4 m-auto">
|
||||
<img :alt="player.name" :src="player.avatar">
|
||||
</div>
|
||||
<div class="col-md-8 m-auto">
|
||||
<p>{{ player.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<svg class="mb-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
fill="white"/>
|
||||
</svg>
|
||||
<h4 class="fw-light">Open Source</h4>
|
||||
<p class="w-75 m-auto fw-light">All project code is open source and available for contributors to improve and
|
||||
<p class="fw-light">All project code is open source and available for contributors to improve and
|
||||
modify.</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<svg class="bi bi-bar-chart-fill mb-4" fill="currentColor" height="80" viewBox="0 0 16 16"
|
||||
width="80" xmlns="http://www.w3.org/2000/svg">
|
||||
<div class="col-sm-12 col-md-4 col-lg-3">
|
||||
<svg class="bi bi-bar-chart-fill mb-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2z"/>
|
||||
</svg>
|
||||
<h4 class="fw-light">In-Depth Data</h4>
|
||||
<p class="w-75 m-auto fw-light">Parsing replay files provides highly detailed match data.</p>
|
||||
<p class="fw-light">Parsing replay files provides highly detailed match data.</p>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<svg class="bi bi-stars mb-4" fill="currentColor" height="80" viewBox="0 0 16 16" width="80"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<div class="col-sm-12 col-md-4 col-lg-3">
|
||||
<svg class="bi bi-stars mb-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
|
||||
</svg>
|
||||
<h4 class="fw-light">Free of Charge</h4>
|
||||
<p class="w-75 m-auto fw-light">This service is free of charge. If you want to support us, just contact us.</p>
|
||||
<p class="fw-light">This service is free of charge. If you want to support us, just contact us.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="m-auto text-muted">
|
||||
<div class="foot">
|
||||
MORE TEXT
|
||||
</div>
|
||||
<span class="image-by">Image by <a class="text-decoration-none text-info" href="https://unsplash.com/photos/6ou8gWpS9ns"
|
||||
target="_blank">Fredrick Tendong</a></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {onMounted} from "vue";
|
||||
import {GoToPlayer} from "../utils";
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
document.title = 'Home | CSGO-W.TV'
|
||||
})
|
||||
document.title = 'Home | csgoWTF'
|
||||
|
||||
const recentVisited = JSON.parse(localStorage.getItem('recent-visited')).reverse()
|
||||
|
||||
return {recentVisited, GoToPlayer}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.main-content {
|
||||
.head {
|
||||
background-image: url("https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80");
|
||||
@@ -64,9 +79,6 @@ export default {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
padding-top: 10rem;
|
||||
padding-bottom: 10rem;
|
||||
|
||||
h1 {
|
||||
font-size: 5rem;
|
||||
|
||||
@@ -89,24 +101,55 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.body, hr {
|
||||
width: 65%;
|
||||
.recent-search {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
.player-card {
|
||||
width: 180px;
|
||||
height: 75px;
|
||||
background: var(--bs-primary);
|
||||
border-radius: 5% 30%;
|
||||
|
||||
&:hover {
|
||||
background: var(--bs-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.foot {
|
||||
margin-top: 5rem;
|
||||
padding-bottom: 5rem;
|
||||
@media screen and (max-width: 768px) {
|
||||
.recent-search {
|
||||
.player-card {
|
||||
height: 60px;
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-by {
|
||||
position: absolute;
|
||||
bottom: -35px;
|
||||
right: 2rem;
|
||||
font-size: .8rem;
|
||||
.body, hr {
|
||||
p {
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user