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

mobile support for home and player

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-06 19:25:00 +02:00
parent 886f182ff2
commit 08ffe9e550
11 changed files with 602 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Nav.vue
View File

@@ -1,21 +1,21 @@
<template>
<nav class="navbar navbar-expand navbar-dark fixed-top">
<div class="container-fluid w-75">
<div class="navbar-nav">
<router-link class="navbar-brand text-warning fw-bold fs-3" to="/">CSGO<span class="text-up text-white fw-bold">WTF</span>
<div class="container">
<div class="navbar-nav fs-5">
<router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
CSGO<span class="text-up text-white fw-bold">WTF</span>
</router-link>
<router-link class="nav-link" to="/explore">Explore</router-link>
</div>
<form class="d-flex col-5 justify-content-end" @keydown.enter.prevent="parseSearch">
<form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
<label for="search">
<svg class="bi bi-search" fill="currentColor" height="24" viewBox="0 0 16 16" width="24"
xmlns="http://www.w3.org/2000/svg">
<svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</label>
<input id="search" v-model="data.searchInput" aria-label="Search"
class="form-control w-75 bg-transparent border-0"
class="form-control bg-transparent border-0"
placeholder="SteamID64, Profile Link or Custom URL"
type="search">
</form>
@@ -68,6 +68,8 @@ export default {
router.push(`/player/${store.state.vanityUrl}`)
}
}
document.activeElement.blur()
}
return {
@@ -79,6 +81,7 @@ export default {
<style lang="scss" scoped>
nav {
max-width: 100vw;
height: 70px;
width: 100vw;
background: rgba(16, 18, 26, 0.5);
@@ -88,6 +91,12 @@ nav {
vertical-align: top;
}
svg {
width: 24px;
height: 24px;
fill: currentColor;
}
label {
padding-top: 6px;
}
@@ -107,4 +116,16 @@ nav {
}
}
}
@media screen and (max-width: 768px) {
nav input[type="search"] {
min-width: 0;
max-width: 0;
&:focus {
min-width: 100%;
max-width: 100%;
}
}
}
</style>