Enhance search bar

This commit is contained in:
jo 2018-11-30 19:41:16 +01:00
parent e774d4d8c3
commit 2ce8a48c77
4 changed files with 18 additions and 15 deletions

View File

@ -16,3 +16,9 @@
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
.no-outline,
.no-outline:focus {
box-shadow: none !important;
outline: none !important;
}

View File

@ -25,4 +25,3 @@ export class Home extends Component<any, any> {
}
}

View File

@ -29,31 +29,29 @@ export class Navbar extends Component<any, State> {
navbar() {
return (
<nav class="navbar navbar-dark navbar-purple">
<a class="navbar-brand" href="#">
<nav class="navbar navbar-dark navbar-purple py-1">
<a class="navbar-brand mx-1" href="#">
<i class="fas fa-fw fa-database mr-1"></i>
Torrents.csv
</a>
<ul class="navbar-nav ml-auto">
{this.searchForm()}
<ul class="navbar-nav mx-1">
<li class="nav-item">
<a class="nav-link" href={repoUrl}><i class="fab fa-fw fa-github"></i></a>
</li>
</ul>
<div class="col-12 col-sm-6">
{this.searchForm()}
</div>
</nav>
);
}
// TODO
// https://www.codeply.com/go/xBVaM3q5X4/bootstrap-4-navbar-search-full-width
searchForm() {
return (
<form class="my-2 my-lg-0 d-inline w-100" onSubmit={linkEvent(this, this.search)}>
<div class="input-group">
<input value={this.state.searchParams.q} onInput={linkEvent(this, this.searchChange)} type="text" class="form-control" placeholder="Search..." />
<button type="submit" class="btn btn-light border border-left-0 border-radius-left-0">
<form class="form-inline col-7 col-sm-8 col-xl-10 mx-1 my-0" onSubmit={linkEvent(this, this.search)}>
<div class="input-group w-100">
<input class="form-control border-0 rounded-0 no-outline" type="search" placeholder="Search..." aria-label="Search..." required
value={this.state.searchParams.q}
onInput={linkEvent(this, this.searchChange)}></input>
<button class="btn btn-secondary border-0 rounded-0 no-outline" type="submit">
<i className="fas fa-fw fa-search"></i>
</button>
</div>