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

refactor to utils + bug-fixes

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-07 19:04:34 +02:00
parent 0619989748
commit 9794235339
12 changed files with 189 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Nav.vue
View File

@@ -1,12 +1,19 @@
<template>
<nav class="navbar navbar-expand navbar-dark fixed-top">
<div class="container">
<div class="navbar-nav fs-5">
<button aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
data-bs-target="#navbar-collapse" data-bs-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-nav fs-5" id="navbar-collapse">
<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 justify-content-end" @keydown.enter.prevent="parseSearch">
<label for="search">
<svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -14,6 +21,7 @@
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 bg-transparent border-0"
placeholder="SteamID64, Profile Link or Custom URL"
@@ -84,7 +92,6 @@ nav {
max-width: 100vw;
height: 70px;
width: 100vw;
//background: rgba(16, 18, 26, 0.5);
background: rgba(16, 18, 26, 1);
.text-up {
@@ -120,16 +127,14 @@ nav {
@media screen and (max-width: 768px) {
nav {
background: rgba(16, 18, 26, 1);
input[type="search"] {
min-width: 0;
max-width: 0;
&:focus {
min-width: 100%;
max-width: 100%;
}
min-width: 100%;
max-width: 100%;
//
//&:focus {
// min-width: 100%;
// max-width: 100%;
//}
}
}
}