LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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