Commit 2fb217b5 authored by Andrew Hrdy's avatar Andrew Hrdy

AppBar fix for iOS.

parent 1116679e
......@@ -32,20 +32,24 @@ class CustomAppBar extends React.Component {
<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>
<div className={'app-bar-logo-name'}>
<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>
</div>
<div className={'app-bar-search-menu'}>
<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>
</div>
<div
className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
<Button className={classNames('app-bar-link-button', 'app-bar-text-color')}
......
......@@ -5,14 +5,6 @@
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) !important;
}
.app-bar-title {
margin-right: auto !important;
}
.app-bar-menu-button {
display: none !important;
}
.app-bar-logo {
width: 30px;
height: 30px;
......@@ -23,6 +15,21 @@
color: #354052;
}
.app-bar-logo-name, .app-bar-search-menu {
display: flex;
align-items: center;
}
@media screen and (min-width: map-get($breakpoints, lg)) {
.app-bar-logo-name {
margin-right: auto !important;
}
.app-bar-menu-button {
display: none !important;
}
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.app-bar-link-button {
display: block !important;
......@@ -30,10 +37,6 @@
text-align: left;
}
.app-bar-menu-button {
display: inherit !important;
}
.app-bar-hide {
max-height: 0 !important;
overflow: hidden
......@@ -41,6 +44,7 @@
.app-bar-tool-bar {
flex-wrap: wrap;
justify-content: space-between;
}
.app-bar-link-container {
......
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