Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Search button and input style fixes (#825)

Browse source 
* 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
This commit is contained in:
Rens Groothuijsen 2022-10-21 05:56:57 +02:00 committed by GitHub
parent daaac3dfe8
commit b979e0a3a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/css/main.css
View file

@ -306,7 +306,7 @@ pre {
}
.show-input {
width: 13em !important;
width: 13vw !important;
}
.hide-input {
background: transparent !important;

62
src/shared/components/app/navbar.tsx
View file

@ -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() ? (
<>