From 2ce8a48c7773a979106b9cc1e4488ffb9e4b39f5 Mon Sep 17 00:00:00 2001
From: jo <ljonas@riseup.net>
Date: Fri, 30 Nov 2018 19:41:16 +0100
Subject: [PATCH] Enhance search bar

---
 server/ui/src/Main.css              |  8 +++++++-
 server/ui/src/components/home.tsx   |  1 -
 server/ui/src/components/navbar.tsx | 22 ++++++++++------------
 server/ui/src/components/search.tsx |  2 +-
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/server/ui/src/Main.css b/server/ui/src/Main.css
index c88addd..dbd98fb 100644
--- a/server/ui/src/Main.css
+++ b/server/ui/src/Main.css
@@ -15,4 +15,10 @@
     -webkit-box-shadow: 0 8px 6px -6px #999;
     -moz-box-shadow: 0 8px 6px -6px #999;
     box-shadow: 0 8px 6px -6px #999;
-}
\ No newline at end of file
+}
+
+.no-outline,
+.no-outline:focus {
+  box-shadow: none !important;
+  outline: none !important;
+}
diff --git a/server/ui/src/components/home.tsx b/server/ui/src/components/home.tsx
index 2904f74..366530b 100644
--- a/server/ui/src/components/home.tsx
+++ b/server/ui/src/components/home.tsx
@@ -25,4 +25,3 @@ export class Home extends Component<any, any> {
   }
 
 }
-
diff --git a/server/ui/src/components/navbar.tsx b/server/ui/src/components/navbar.tsx
index 38e3200..0349679 100644
--- a/server/ui/src/components/navbar.tsx
+++ b/server/ui/src/components/navbar.tsx
@@ -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>
diff --git a/server/ui/src/components/search.tsx b/server/ui/src/components/search.tsx
index 257324a..466f57e 100644
--- a/server/ui/src/components/search.tsx
+++ b/server/ui/src/components/search.tsx
@@ -175,4 +175,4 @@ export class Search extends Component<any, State> {
     a.i.props.history.push(`/search/${newSearch.q}/${newSearch.page}`);
   }
 
-}
\ No newline at end of file
+}