added search-icon to nav, changed gradient in matches

This commit is contained in:
cnachtigall1991
2021-10-09 01:16:36 +02:00
parent 7d479c4395
commit 11863f144c
4 changed files with 16 additions and 7 deletions

1
.gitignore vendored
View File

@@ -6,6 +6,7 @@ node_modules
# local env files # local env files
.env.local .env.local
.env.*.local .env.*.local
.env
# Log files # Log files
npm-debug.log* npm-debug.log*

View File

@@ -18,7 +18,7 @@
</ul> </ul>
<form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch"> <form class="d-flex" data-bs-target="#mainNav.show" @keydown.enter.prevent="parseSearch">
<label for="search"> <label for="search">
<i class="bi bi-search"></i> <i class="fas fa-search"></i>
</label> </label>
<input id="search" v-model="data.searchInput" aria-label="Search" <input id="search" v-model="data.searchInput" aria-label="Search"

View File

@@ -101,6 +101,7 @@ table {
text-align: center; text-align: center;
margin-top: 120px; margin-top: 120px;
margin-bottom: -100px; margin-bottom: -100px;
//background: black;
caption { caption {
color: white; color: white;

View File

@@ -15,7 +15,7 @@
{{ FormatFullDate(data.matchDetails.date) }} {{ FormatFullDate(data.matchDetails.date) }}
</p> </p>
<p class="text-center fs-6"> <p class="text-center fs-6">
<span class="text-muted">Match Length:</span> {{ data.matchDetails.rounds === 16 ? 'Short' : 'Long' }} <span class="text-muted">Match Length:</span> {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
<svg class="bi bi-circle-fill mx-2" fill="currentColor" height="8" viewBox="0 0 16 16" width="8" <svg class="bi bi-circle-fill mx-2" fill="currentColor" height="8" viewBox="0 0 16 16" width="8"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8"/> <circle cx="8" cy="8" r="8"/>
@@ -149,7 +149,6 @@ export default {
rgba(0, 0, 0, 0.95) 70%, rgba(0, 0, 0, 0.95) 70%,
rgba(0, 0, 0, .7) 100% rgba(0, 0, 0, .7) 100%
); );
border-bottom: 1px solid rgba(255, 255, 255, .2);
.map img { .map img {
width: auto; width: auto;
@@ -166,10 +165,10 @@ export default {
z-index: 1; z-index: 1;
max-width: 100vw; max-width: 100vw;
background: linear-gradient(90deg, background: linear-gradient(90deg,
rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 0%,
rgba(15, 15, 15, 0.9) 25%, rgba(0, 0, 0, 0.85) 30%,
rgba(15, 15, 15, 0.9) 75%, rgba(0, 0, 0, 0.85) 70%,
rgba(0, 0, 0, 0) 100% rgba(0, 0, 0, .6) 100%
); );
div { div {
@@ -182,6 +181,14 @@ export default {
.nav { .nav {
max-width: 100vw; max-width: 100vw;
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.9);
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.95) 30%,
rgba(0, 0, 0, 0.95) 70%,
rgba(0, 0, 0, .7) 100%
);
border-top: 1px solid rgba(255, 255, 255, .2);
border-bottom: 1px solid rgba(255, 255, 255, .2);
.list-item { .list-item {
padding: 10px 10px; padding: 10px 10px;