Skip to content

Commit

Permalink
Merge pull request #330 from LiskHQ/search-input-placement
Browse files Browse the repository at this point in the history
Improve search bar placement - Closes #311
  • Loading branch information
gina contrino authored Feb 12, 2018
2 parents a79ec0c + 7b6eac3 commit 7e60322
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 17 deletions.
6 changes: 2 additions & 4 deletions src/components/account/account.css
Original file line number Diff line number Diff line change
Expand Up @@ -81,16 +81,14 @@
color: white;
}

.status {
vertical-align: super;
}

.current {
color: var(--color-grayscale-medium);
}

.peer {
font-size: 16px;
display: inline-block;
text-align: left;
}

@media (--medium-viewport) {
Expand Down
9 changes: 5 additions & 4 deletions src/components/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ class Header extends React.Component {
}

shouldShowSearchBar() {
return this.props.location.pathname.includes('explorer') && !this.props.location.pathname.includes(routes.search.long);
const { pathname } = this.props.location;
return ![routes.search.long, routes.register.url, routes.addAccount.url]
.some(el => pathname.includes(el)) && pathname !== routes.login.url;
}

render() {
Expand Down Expand Up @@ -90,9 +92,8 @@ class Header extends React.Component {
</div>
</div>
<div className={`${styles.searchBar}`}>
{this.shouldShowSearchBar()
? <SearchBar/>
: <Account peers={this.props.peers} t={this.props.t}/>}
{this.shouldShowSearchBar() && <SearchBar/>}
<Account peers={this.props.peers} t={this.props.t}/>
</div>
</header>
);
Expand Down
26 changes: 22 additions & 4 deletions src/components/searchBar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,36 @@ import { withRouter } from 'react-router';
import { translate } from 'react-i18next';
import { FontIcon } from '../fontIcon';
import { visitAndSaveSearch } from './../search/keyAction';
import routes from './../../constants/routes';
import styles from './searchBar.css';

const getSearchItem = (location) => {
const regex = new RegExp('/explorer/(?:[^/]*)/?');

return location.pathname.includes('explorer')
? location.pathname.replace(regex, '')
: '';
};

class Search extends React.Component {
constructor(props) {
super(props);
const regex = new RegExp('/explorer/(?:[^/]*)/?');
const searchItem = this.props.history.location.pathname.replace(regex, '');
this.state = { searchItem };
this.state = { searchItem: getSearchItem(props.location) };
}

componentWillReceiveProps(nextProps) {
if (nextProps.location !== this.props.location) {
this.setState({ searchItem: getSearchItem(nextProps.location) });
}
}

shouldShowSearchBarOnMobile() {
const { pathname } = this.props.location;
return pathname.includes('explorer') && !pathname.includes(routes.search.long);
}

render() {
return (<div className={styles.searchBar}>
return (<div className={`${styles.searchBar} ${this.shouldShowSearchBarOnMobile() ? styles.show : null}`}>
<FontIcon value='search' className={styles.icon}/>
<input onKeyUp={(e) => { visitAndSaveSearch(e, this.props.history); }}
className={styles.input} type="text"
Expand Down
15 changes: 10 additions & 5 deletions src/components/searchBar/searchBar.css
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
@import './../app/variables.css';

:root {
--search-box-max-width: 558px;
--search-box-width: 32vw; /* stylelint-disable-line */
--search-box-width: 30vw; /* stylelint-disable-line */
--search-box-font-size: 16px;
--search-box-line-height: 56px;
--sub-title-line-height: 26px;
}

.searchBar {
vertical-align: top;
display: inline-block;
position: relative;
width: var(--search-box-width);
margin-right: 50px;

& .icon {
position: absolute;
Expand All @@ -25,7 +27,6 @@
line-height: var(--search-box-line-height);
font-size: var(--search-box-font-size);
color: var(--color-grayscale-medium);
max-width: var(--search-box-max-width);
width: 100%;
padding-left: 24px;
border-radius: 3px;
Expand All @@ -50,15 +51,19 @@

@media (--medium-viewport) {
.searchBar {
width: 100%;
display: none;

& .icon {
right: 20px;
}

& .input {
border-radius: 0px;
max-width: none;
}
}

.searchBar.show {
display: block;
width: 100%;
}
}

0 comments on commit 7e60322

Please sign in to comment.