fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-24 18:15:20 +00:00
Code Issues Packages Projects Releases 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 { .show-input {
width: 13em !important; width: 13vw !important;
} }
.hide-input { .hide-input {
background: transparent !important; 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( {!this.context.router.history.location.pathname.match(
/^\/search/ /^\/search/
) && ( ) && (
<form <ul className="navbar-nav">
className="form-inline mr-2" <li className="nav-item">
onSubmit={linkEvent(this, this.handleSearchSubmit)} <form
> className="form-inline mr-1"
<input onSubmit={linkEvent(this, this.handleSearchSubmit)}
id="search-input" >
className={`form-control mr-0 search-input ${ <input
this.state.toggleSearch ? "show-input" : "hide-input" id="search-input"
}`} className={`form-control mr-0 search-input ${
onInput={linkEvent(this, this.handleSearchParam)} this.state.toggleSearch ? "show-input" : "hide-input"
value={this.state.searchParam} }`}
ref={this.searchTextField} onInput={linkEvent(this, this.handleSearchParam)}
type="text" value={this.state.searchParam}
placeholder={i18n.t("search")} ref={this.searchTextField}
onBlur={linkEvent(this, this.handleSearchBlur)} disabled={!this.state.toggleSearch}
></input> type="text"
<label className="sr-only" htmlFor="search-input"> placeholder={i18n.t("search")}
{i18n.t("search")} onBlur={linkEvent(this, this.handleSearchBlur)}
</label> ></input>
<button <label className="sr-only" htmlFor="search-input">
name="search-btn" {i18n.t("search")}
onClick={linkEvent(this, this.handleSearchBtn)} </label>
className="px-1 btn btn-link" <button
style="color: var(--gray)" name="search-btn"
aria-label={i18n.t("search")} onClick={linkEvent(this, this.handleSearchBtn)}
> className="px-1 btn btn-link nav-link"
<Icon icon="search" /> aria-label={i18n.t("search")}
</button> >
</form> <Icon icon="search" />
</button>
</form>
</li>
</ul>
)} )}
{UserService.Instance.myUserInfo.isSome() ? ( {UserService.Instance.myUserInfo.isSome() ? (
<> <>