LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 14:21:13 +00:00
Code Issues 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;

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

@ -314,8 +314,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
{!this.context.router.history.location.pathname.match( {!this.context.router.history.location.pathname.match(
/^\/search/ /^\/search/
) && ( ) && (
<ul className="navbar-nav">
<li className="nav-item">
<form <form
className="form-inline mr-2" className="form-inline mr-1"
onSubmit={linkEvent(this, this.handleSearchSubmit)} onSubmit={linkEvent(this, this.handleSearchSubmit)}
> >
<input <input
@ -326,6 +328,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
onInput={linkEvent(this, this.handleSearchParam)} onInput={linkEvent(this, this.handleSearchParam)}
value={this.state.searchParam} value={this.state.searchParam}
ref={this.searchTextField} ref={this.searchTextField}
disabled={!this.state.toggleSearch}
type="text" type="text"
placeholder={i18n.t("search")} placeholder={i18n.t("search")}
onBlur={linkEvent(this, this.handleSearchBlur)} onBlur={linkEvent(this, this.handleSearchBlur)}
@ -336,13 +339,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
<button <button
name="search-btn" name="search-btn"
onClick={linkEvent(this, this.handleSearchBtn)} onClick={linkEvent(this, this.handleSearchBtn)}
className="px-1 btn btn-link" className="px-1 btn btn-link nav-link"
style="color: var(--gray)"
aria-label={i18n.t("search")} aria-label={i18n.t("search")}
> >
<Icon icon="search" /> <Icon icon="search" />
</button> </button>
</form> </form>
</li>
</ul>
)} )}
{UserService.Instance.myUserInfo.isSome() ? ( {UserService.Instance.myUserInfo.isSome() ? (
<> <>