Search button and input style fixes (#825)

* Align search button style with other navbar buttons, disable search box when hidden, adjust search box size

* Align search button margin with other navigation bar buttons

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 3ec52d0a6cabc747adfbe4ebaa401086e48bd441..0018f59ea6869192d6c0bbda4b20f0d39f6e6c1b 100644 (file)
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -306,7 +306,7 @@ pre {
 }
 
 .show-input {
-  width: 13em !important;
+  width: 13vw !important;
 }
 .hide-input {
   background: transparent !important;

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index c0adb802a5f672c0e6df05ddae659647990b0ad7..4607b5adfcfa81b34dea6727ef6f23e6124c1f1d 100644 (file)
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -314,35 +314,39 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             {!this.context.router.history.location.pathname.match(
               /^\/search/
             ) && (
-              <form
-                className="form-inline mr-2"
-                onSubmit={linkEvent(this, this.handleSearchSubmit)}
-              >
-                <input
-                  id="search-input"
-                  className={`form-control mr-0 search-input ${
-                    this.state.toggleSearch ? "show-input" : "hide-input"
-                  }`}
-                  onInput={linkEvent(this, this.handleSearchParam)}
-                  value={this.state.searchParam}
-                  ref={this.searchTextField}
-                  type="text"
-                  placeholder={i18n.t("search")}
-                  onBlur={linkEvent(this, this.handleSearchBlur)}
-                ></input>
-                <label className="sr-only" htmlFor="search-input">
-                  {i18n.t("search")}
-                </label>
-                <button
-                  name="search-btn"
-                  onClick={linkEvent(this, this.handleSearchBtn)}
-                  className="px-1 btn btn-link"
-                  style="color: var(--gray)"
-                  aria-label={i18n.t("search")}
-                >
-                  <Icon icon="search" />
-                </button>
-              </form>
+              <ul className="navbar-nav">
+                <li className="nav-item">
+                  <form
+                    className="form-inline mr-1"
+                    onSubmit={linkEvent(this, this.handleSearchSubmit)}
+                  >
+                    <input
+                      id="search-input"
+                      className={`form-control mr-0 search-input ${
+                        this.state.toggleSearch ? "show-input" : "hide-input"
+                      }`}
+                      onInput={linkEvent(this, this.handleSearchParam)}
+                      value={this.state.searchParam}
+                      ref={this.searchTextField}
+                      disabled={!this.state.toggleSearch}
+                      type="text"
+                      placeholder={i18n.t("search")}
+                      onBlur={linkEvent(this, this.handleSearchBlur)}
+                    ></input>
+                    <label className="sr-only" htmlFor="search-input">
+                      {i18n.t("search")}
+                    </label>
+                    <button
+                      name="search-btn"
+                      onClick={linkEvent(this, this.handleSearchBtn)}
+                      className="px-1 btn btn-link nav-link"
+                      aria-label={i18n.t("search")}
+                    >
+                      <Icon icon="search" />
+                    </button>
+                  </form>
+                </li>
+              </ul>
             )}
             {UserService.Instance.myUserInfo.isSome() ? (
               <>