Commit f3afc915 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Search bar moved to navbar.

parent 53f99deb
Pipeline #1881 passed with stage
in 1 minute and 42 seconds
......@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui-icons/Menu';
import SearchBar from '../containers/SearchBar';
import classNames from 'classnames'
class CustomAppBar extends React.Component {
......@@ -36,6 +37,7 @@ class CustomAppBar extends React.Component {
className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/>
</IconButton>
<SearchBar />
<div
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<Button
......
......@@ -46,7 +46,6 @@ class Layout extends React.Component {
}}/>
<div className={'layout-container'}>
<div className={'layout-main-content'}>
<SearchBar suggestions={{}}/>
<div className={'layout-card-container'}>
<CardContainer styles={'layout-card-container'} searchTerm={searchTerm}
facilities={facilities} />
......
import React from 'react';
import PropTypes from 'prop-types';
import Paper from 'material-ui/Paper';
import {withStyles} from 'material-ui/styles';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {setSearchTerm} from '../actions/ui';
import Search from 'material-ui-icons/Search'
import SearchIcon from 'material-ui-icons/Search'
import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper';
import classNames from 'classnames';
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
isFocused: false,
value: ''
};
}
handleChange = (e) => {
this.setState({
value: e.target.value,
......@@ -16,23 +24,36 @@ class SearchBar extends React.Component {
this.props.setSearchTerm(e.target.value)
};
handleFocus = () => {
this.setState({
isFocused: true
});
};
handleBlur = () => {
this.setState({
isFocused: false
});
};
render() {
return (
<Paper className={'search-bar-paper-background'} elevation={3}>
<Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus')}>
<div className={'search-bar-left-search-container'}>
<SearchIcon className={'search-bar-search-icon'}/>
</div>
<Input
placeholder="names, locations, etc"
disableUnderline
fullWidth
placeholder="Names, Locations, etc."
autoFocus
className={'search-bar-no-suggest-input'}
disableUnderline
className={'search-bar-input'}
onChange={this.handleChange}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
inputProps={{
'aria-label': 'Description',
'aria-label': 'Search Bar',
}}
/>
<div className={'search-bar-right-search-container'}>
<Search className={'search-bar-search-icon'}/>
</div>
</Paper>
);
}
......
.search-bar-paper-background {
height: 54px;
max-width: 600px;
width: 90%;
height: 44px;
width: 400px;
display: flex;
margin: 0 auto 16px auto;
border-radius: 4px !important;
background-color: rgba(0, 0, 0, 0.04) !important;
box-shadow: none !important;
&.search-bar-focus {
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
}
}
.search-bar-right-search-container {
.search-bar-left-search-container {
height: 100%;
display: flex;
align-items: center;
......@@ -18,8 +24,9 @@
color: rgba(0,0,0,0.54);
}
.search-bar-no-suggest-input {
.search-bar-input {
display: flex !important;
align-items: center !important;
margin-left: 8px !important;
transition: ease-in-out width 250ms;
width: 100%
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment