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