embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Display a search for small screen

This commit is contained in:
Anthony Laibe 2018-10-22 17:06:40 +01:00 committed by Pascal Precht
parent 6a97930ceb
commit aecc667a8c
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 36 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
embark-ui/src/components/Layout.js
View File

@ -147,7 +147,7 @@ class Layout extends React.Component {
renderRightNav() { renderRightNav() {
return ( return (
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
<NavItem className="d-sm-down-none"> <NavItem>
<SearchBar loading={this.state.searchLoading} searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/> <SearchBar loading={this.state.searchLoading} searchSubmit={searchValue => this.searchTheExplorer(searchValue)}/>
</NavItem> </NavItem>
{this.renderSettings()} {this.renderSettings()}

9
embark-ui/src/components/SearchBar.css
View File

@ -4,6 +4,7 @@
outline: none; outline: none;
box-shadow: none; box-shadow: none;
width: 245px; width: 245px;
display: inline-block;
border: 1px solid #c8ced3; border: 1px solid #c8ced3;
border-right: 0; border-right: 0;
} }
@ -12,12 +13,18 @@
border: 0; border: 0;
} }
#root .search-bar button { #root .search-bar .search-bar__button {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
box-shadow: none; box-shadow: none;
} }
@media(max-width:575px){
#root .search-bar .search-bar__button {
margin-bottom: 4px;
}
}
.search-bar .search-loading { .search-bar .search-loading {
margin-top: 16px; margin-top: 16px;
} }

34
embark-ui/src/components/SearchBar.js
View File

@ -11,7 +11,8 @@ class SearchBar extends React.Component {
super(props); super(props);
this.state = { this.state = {
searchValue: '' searchValue: '',
showForm: false
}; };
} }
@ -23,26 +24,45 @@ class SearchBar extends React.Component {
onSubmit(e) { onSubmit(e) {
e.preventDefault(); e.preventDefault();
this.hideForm();
this.props.searchSubmit(this.state.searchValue); this.props.searchSubmit(this.state.searchValue);
} }
hideForm() {
this.setState({showForm: false});
}
onKeyPress(e) { onKeyPress(e) {
if (e.key === 'Enter') { if (e.key === 'Enter') {
this.onSubmit(e); this.onSubmit(e);
} }
} }
revealForm() {
this.setState({showForm: true});
}
render() { render() {
return ( return (
<Form inline className={classNames('search-bar', 'mr-2', {hidden: this.props.hidden})}> <Form inline className={classNames('search-bar', 'mr-2', {hidden: this.props.hidden})}>
{!this.props.loading && {!this.props.loading &&
<React.Fragment> <React.Fragment>
<Input type="text" name="search-bar" placeholder="Search by Address / Txhash / Block" <div className={classNames({'d-sm-down-none': !this.state.showForm})}>
onChange={(e) => this.onChange(e)} <Input type="text" name="search-bar"
value={this.state.searchValue} onKeyPress={e => this.onKeyPress(e)}/> placeholder="Search by Address / Txhash / Block"
<Button color="secondary" onClick={(e) => this.onSubmit(e)}> onChange={(e) => this.onChange(e)}
<FontAwesome name="search"/> value={this.state.searchValue}
</Button> onBlur={() => this.hideForm()}
onKeyPress={e => this.onKeyPress(e)}/>
<Button className='search-bar__button' color="secondary" onClick={(e) => this.onSubmit(e)}>
<FontAwesome name="search"/>
</Button>
</div>
{!this.state.showForm && <div className="d-block d-md-none">
<Button color="secondary" onClick={() => this.revealForm()}>
<FontAwesome name="search"/>
</Button>
</div>}
</React.Fragment> </React.Fragment>
} }
{this.props.loading && {this.props.loading &&