Commit 45d3027b authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Mobile support for search bar.

parent abdaa7e6
Pipeline #1885 passed with stage
in 1 minute and 42 seconds
...@@ -13,7 +13,8 @@ class CustomAppBar extends React.Component { ...@@ -13,7 +13,8 @@ class CustomAppBar extends React.Component {
constructor(props) { constructor(props) {
super(); super();
this.state = { this.state = {
isAppBarExpanded: false isAppBarExpanded: false,
isSearchExpanded: false,
}; };
this.toggleExpand = this.toggleExpand.bind(this); this.toggleExpand = this.toggleExpand.bind(this);
...@@ -27,17 +28,19 @@ class CustomAppBar extends React.Component { ...@@ -27,17 +28,19 @@ class CustomAppBar extends React.Component {
render() { render() {
return (<div> return (<div>
<AppBar position="absolute" className={'app-bar'}> <AppBar position="absolute"
className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}>
<Toolbar className={'app-bar-tool-bar'}> <Toolbar className={'app-bar-tool-bar'}>
<img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/> <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
<Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}> <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
What's Open What's Open
</Typography> </Typography>
<SearchBar onSearchExpand={() => this.setState({isSearchExpanded: true})}
onSearchCollapse={() => this.setState({isSearchExpanded: false})}/>
<IconButton onClick={this.toggleExpand} aria-label="Menu" <IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames('app-bar-menu-button', 'app-bar-text-color')}> className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/> <MenuIcon/>
</IconButton> </IconButton>
<SearchBar />
<div <div
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}> className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<Button <Button
......
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {setSearchTerm} from '../actions/ui'; import {setSearchTerm} from '../actions/ui';
import SearchIcon from 'material-ui-icons/Search'; import SearchIcon from 'material-ui-icons/Search';
import CloseIcon from 'material-ui-icons/Close'; import CloseIcon from 'material-ui-icons/Close';
import ArrowBackIcon from 'material-ui-icons/ArrowBack';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import Input from 'material-ui/Input'; import Input from 'material-ui/Input';
import Paper from 'material-ui/Paper'; import Paper from 'material-ui/Paper';
...@@ -15,6 +17,7 @@ class SearchBar extends React.Component { ...@@ -15,6 +17,7 @@ class SearchBar extends React.Component {
this.state = { this.state = {
isFocused: false, isFocused: false,
isMobileOpen: false,
value: '' value: ''
}; };
} }
...@@ -38,6 +41,24 @@ class SearchBar extends React.Component { ...@@ -38,6 +41,24 @@ class SearchBar extends React.Component {
}); });
}; };
handleMobileExpand = () => {
this.setState({
isMobileOpen: true
});
this.props.onSearchExpand();
this.inputElement.focus();
};
handleMobileCollapse = () => {
this.setState({
isMobileOpen: false
});
this.props.onSearchCollapse();
};
clear = () => { clear = () => {
this.setState({ this.setState({
value: '' value: ''
...@@ -49,13 +70,15 @@ class SearchBar extends React.Component { ...@@ -49,13 +70,15 @@ class SearchBar extends React.Component {
render() { render() {
return ( return (
<Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus', <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus',
this.state.value && 'search-bar-has-value')}> this.state.value && 'search-bar-has-value', this.state.isMobileOpen && 'search-bar-mobile-open')}>
<div className={'search-bar-left-search-container'}> <IconButton onClick={this.handleMobileExpand} disableRipple className={'search-bar-search-btn'}>
<SearchIcon className={'search-bar-search-icon'}/> <SearchIcon className={'search-bar-search-icon'}/>
</div> </IconButton>
<IconButton onClick={this.handleMobileCollapse} disableRipple className={'search-bar-back-btn'}>
<ArrowBackIcon className={'search-bar-back-icon'}/>
</IconButton>
<Input <Input
placeholder="Names, Locations, etc." placeholder="Name, Location, etc."
autoFocus
disableUnderline disableUnderline
className={'search-bar-input'} className={'search-bar-input'}
onChange={this.handleChange} onChange={this.handleChange}
...@@ -64,14 +87,20 @@ class SearchBar extends React.Component { ...@@ -64,14 +87,20 @@ class SearchBar extends React.Component {
inputProps={{ inputProps={{
'aria-label': 'Search Bar', 'aria-label': 'Search Bar',
}} }}
inputRef={el => this.inputElement = el}
value={this.state.value} value={this.state.value}
/> />
<IconButton onClick={this.clear} className={'search-bar-close-btn'}> <IconButton onClick={this.clear} disableRipple className={'search-bar-close-btn'}>
<CloseIcon /> <CloseIcon/>
</IconButton> </IconButton>
</Paper> </Paper>
); );
} }
} }
SearchBar.propTypes = {
onSearchExpand: PropTypes.func,
onSearchCollapse: PropTypes.func
};
export default connect(null, {setSearchTerm})(SearchBar); export default connect(null, {setSearchTerm})(SearchBar);
\ No newline at end of file
@import '../variables';
.app-bar { .app-bar {
background-color: white !important; background-color: white !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
...@@ -21,7 +23,7 @@ ...@@ -21,7 +23,7 @@
color: #354052; color: #354052;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.app-bar-link-button { .app-bar-link-button {
display: block !important; display: block !important;
padding: 0 !important; padding: 0 !important;
...@@ -46,4 +48,10 @@ ...@@ -46,4 +48,10 @@
flex-basis: 100%; flex-basis: 100%;
transition: ease-in-out 2s; transition: ease-in-out 2s;
} }
.app-bar-search-expanded {
.app-bar-logo, .app-bar-title, .app-bar-menu-button, .app-bar-link-container {
display: none !important;
}
}
} }
\ No newline at end of file
@import '../_variables.scss';
.search-bar-paper-background { .search-bar-paper-background {
height: 44px; height: 44px;
width: 400px; width: 400px;
...@@ -5,30 +7,30 @@ ...@@ -5,30 +7,30 @@
border-radius: 4px !important; border-radius: 4px !important;
background-color: rgba(0, 0, 0, 0.04) !important; background-color: rgba(0, 0, 0, 0.04) !important;
box-shadow: none !important; box-shadow: none !important;
}
&.search-bar-focus { .search-bar-search-btn {
background-color: rgba(255, 255, 255, 1) !important; width: 44px !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important; height: 44px !important;
border: 1px solid rgba(0,0,0,0.15); cursor: default !important;
}
} }
.search-bar-left-search-container { .search-bar-back-btn {
height: 100%; display: none !important;
display: flex;
align-items: center;
margin: 0 8px;
} }
.search-bar-search-icon { .search-bar-search-icon, .search-bar-arrow-icon {
display: block; display: block;
color: rgba(0,0,0,0.54); color: rgba(0,0,0,0.54);
} }
.search-bar-arrow-icon {
display: none !important;
}
.search-bar-input { .search-bar-input {
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
transition: ease-in-out width 250ms;
width: 100% width: 100%
} }
...@@ -42,4 +44,55 @@ ...@@ -42,4 +44,55 @@
.search-bar-close-btn { .search-bar-close-btn {
display: inline-flex !important; display: inline-flex !important;
} }
}
@media screen and (min-width: map-get($breakpoints, lg)) {
.search-bar-paper-background {
&.search-bar-focus {
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
border: 1px solid rgba(0,0,0,0.15);
}
}
.search-bar-input {
transition: ease-in-out width 250ms;
}
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.search-bar-paper-background {
background-color: rgba(255, 255, 255, 1) !important;
width: auto !important;
&.search-bar-mobile-open {
height: 100% !important;
width: 100% !important;
}
}
.search-bar-input {
width: 0 !important;
}
.search-bar-mobile-open {
.search-bar-input {
width: 100% !important;
}
.search-bar-search-btn {
display: none !important;
}
.search-bar-back-btn {
display: inline-flex !important;
width: 56px !important;
height: 56px !important;
}
.search-bar-close-btn {
width: 56px !important;
height: 56px !important;
}
}
} }
\ 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