Commit 471eefe7 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

fixed mobile behavior of LeftMenu and Header

parent 0ef78e1b
import * as React from 'react';
import { withStyles} from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import { translate } from 'react-i18next';
import Drawer from '@material-ui/core/Drawer';
......@@ -7,11 +8,20 @@ import ListItem from '@material-ui/core/ListItem';
import { NavLink, Link } from 'react-router-dom';
import Close from '@material-ui/icons/Close';
import MyListCount from './MyListCount';
import {compose} from 'redux';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
const mobile = ['md', 'sm', 'xs'] as Breakpoint[];
const styleSheet = (theme) => ({
flex: {
flex: 1,
},
myListCount: {
[theme.breakpoints.up('lg')]: {
display: 'none' as 'none',
},
},
/* tslint:disable */
leftMenu: {
height: '100%',
......@@ -65,13 +75,22 @@ interface ILeftMenuProps extends React.ClassAttributes<any> {
myListItemsCount: number;
closeMenu: (flag) => any;
classes: any;
width: Breakpoint;
t: any;
}
class LeftMenu extends React.Component<ILeftMenuProps, any> {
public componentWillReceiveProps(nextProps) {
const {width, closeMenu, open} = nextProps;
const isMobile = mobile.indexOf(width) !== -1;
if (open && !isMobile) {
closeMenu();
}
}
public render() {
const { t, myListItemsCount } = this.props;
const { t, myListItemsCount, classes } = this.props;
const closeBtn = {
color: '#fff',
......@@ -107,7 +126,10 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
</ListItem>
<ListItem button>
<NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount style={ {float: 'right', margin: '4px 0', fontSize: 'initial'} } count={ myListItemsCount }/></NavLink>
<NavLink activeClassName="active" to="/sel">
{ t('menu.My List') }
<MyListCount count={ myListItemsCount } classes={ {root: classes.myListCount} }/>
</NavLink>
</ListItem>
</div>
</Drawer>
......@@ -116,4 +138,4 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
}
}
export default translate()((withStyles as any)(styleSheet)(LeftMenu));
export default translate()(compose(withStyles(styleSheet), withWidth())(LeftMenu));
......@@ -2,7 +2,7 @@ import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
const styles = () => ({
const styles = (theme) => ({
root: {
backgroundColor: 'grey',
borderRadius: '50%',
......@@ -10,9 +10,23 @@ const styles = () => ({
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '14px',
top: 'calc(50% - 9px)',
position: 'absolute' as 'absolute',
fontSize: '11px',
minHeight: '1.6em',
minWidth: '1.6em',
padding: '3px',
[theme.breakpoints.down('md')]: {
transform: 'scale(0.7)',
position: 'initial' as 'initial',
margin: '4px 0',
padding: '0 10px',
fontSize: 'initial',
minHeight: '2rem',
},
[theme.breakpoints.down('xs')]: {
float: 'right' as 'right',
},
},
});
......
......@@ -31,13 +31,13 @@ const styleSheet = (theme) => ({
headerRoot: {
backgroundColor: '#2b2924',
height: 'auto',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
height: '3.5rem',
},
},
blockHeader: {
padding: '0 20px',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
alignItems: 'baseline' as 'baseline',
},
},
......@@ -96,7 +96,7 @@ const styleSheet = (theme) => ({
}
},
mobileHidden: {
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
display: 'none'
},
},
......@@ -175,6 +175,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
<div className="navigation-block float-right">
<NavLink activeClassName="active" to="/a">{ t('menu.Accessions') }</NavLink>
<NavLink activeClassName="active" to="/subsets">{ t('menu.Subsets') }</NavLink>
<NavLink activeClassName="active" to="/countries">Countries</NavLink>
<NavLink activeClassName="active" to="/wiews">{ t('menu.Institutes') }</NavLink>
<NavLink activeClassName="active" to="/c">{ t('menu.Crops') }</NavLink>
<NavLink activeClassName="active" to="/sel">{ t('menu.My List') }<MyListCount count={ myListItemsCount }/></NavLink>
......
......@@ -17,7 +17,7 @@ const styles = (theme) => ({
width: '100%',
overflow: 'visible' as 'visible',
position: 'absolute' as 'absolute',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('md')]: {
paddingTop: '3rem',
},
},
......
......@@ -105,7 +105,7 @@ $mui-breakpoints: (
display: inline-block;
position: absolute;
height: 100%;
@media (max-width: 959px) {
@media (max-width: 1279px) {
display: none;
}
a {
......@@ -128,7 +128,7 @@ $mui-breakpoints: (
}
.mobile-navigation-block {
display: none;
@media (max-width: 959px) {
@media (max-width: 1279px) {
display: inline-block;
}
}
......
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