From b979e0a3a973f09a76d7198622b285b4c9c71ed5 Mon Sep 17 00:00:00 2001 From: Rens Groothuijsen <l.groothuijsen@alumni.maastrichtuniversity.nl> Date: Fri, 21 Oct 2022 05:56:57 +0200 Subject: [PATCH] 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 --- src/assets/css/main.css | 2 +- src/shared/components/app/navbar.tsx | 62 +++++++++++++++------------- 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 3ec52d0..0018f59 100644 --- 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 c0adb80..4607b5a 100644 --- 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() ? ( <> -- 2.44.1