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 { ...@@ -32,20 +32,24 @@ class CustomAppBar extends React.Component {
<AppBar position="absolute" <AppBar position="absolute"
className={classNames('app-bar', this.state.isSearchExpanded && 'app-bar-search-expanded')}> 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'} /> <div className={'app-bar-logo-name'}>
<Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}> <img src={require('../images/SRCT_square.svg')} className={'app-bar-logo'}/>
What's Open <Typography type="title" className={classNames('app-bar-title', 'app-bar-text-color')}>
</Typography> What's Open
<SearchBar onSearchExpand={() => this.setState({ </Typography>
isSearchExpanded: true </div>
})} <div className={'app-bar-search-menu'}>
onSearchCollapse={() => this.setState({ <SearchBar onSearchExpand={() => this.setState({
isSearchExpanded: false isSearchExpanded: true
})} /> })}
<IconButton onClick={this.toggleExpand} aria-label="Menu" onSearchCollapse={() => this.setState({
className={classNames('app-bar-menu-button', 'app-bar-text-color')}> isSearchExpanded: false
<MenuIcon /> })}/>
</IconButton> <IconButton onClick={this.toggleExpand} aria-label="Menu"
className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
<MenuIcon/>
</IconButton>
</div>
<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 className={classNames('app-bar-link-button', 'app-bar-text-color')} <Button className={classNames('app-bar-link-button', 'app-bar-text-color')}
......
...@@ -5,14 +5,6 @@ ...@@ -5,14 +5,6 @@
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;
} }
.app-bar-title {
margin-right: auto !important;
}
.app-bar-menu-button {
display: none !important;
}
.app-bar-logo { .app-bar-logo {
width: 30px; width: 30px;
height: 30px; height: 30px;
...@@ -23,6 +15,21 @@ ...@@ -23,6 +15,21 @@
color: #354052; 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) { @media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.app-bar-link-button { .app-bar-link-button {
display: block !important; display: block !important;
...@@ -30,10 +37,6 @@ ...@@ -30,10 +37,6 @@
text-align: left; text-align: left;
} }
.app-bar-menu-button {
display: inherit !important;
}
.app-bar-hide { .app-bar-hide {
max-height: 0 !important; max-height: 0 !important;
overflow: hidden overflow: hidden
...@@ -41,6 +44,7 @@ ...@@ -41,6 +44,7 @@
.app-bar-tool-bar { .app-bar-tool-bar {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between;
} }
.app-bar-link-container { .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