Skip to content
GitLab
Commit 5cf42397 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov Committed by Matija Obreza
Browse files

Mobile friendly 

- added some fix to sidebar view on mobile
parent 23eacf6a
Hide whitespace changes
Inline Side-by-side
src/constants/apiURLS.ts
View file @ 5cf42397
......@@ -6,7 +6,7 @@ const origin = typeof window !== 'undefined' ?
export const API_ROOT = `${origin}/proxy`;
export const API_BASE_URL = `${API_ROOT}/api/v0`;
export const SERVER_INFO_URL = `${API_BASE_URL}/info/version`;
export const SERVER_INFO_URL = `${API_ROOT}/api/v1/info/version`;
export const LOGIN_URL = `${API_ROOT}/oauth/token`;
export const LOGOUT_URL = `${API_BASE_URL}/me/logout`;
......
src/ui/common/Tabs.tsx
View file @ 5cf42397
......@@ -12,35 +12,47 @@ import { navigateTo } from 'actions/navigation';
import MuiTabs from '@material-ui/core/Tabs';
import MuiTab from '@material-ui/core/Tab';
import {withStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
/*tslint:disable*/
const styles = (theme) => ({
root: {
width: '100%',
height: '48px',
display: 'flex' as 'flex',
height: 'auto',
borderBottom: '1px #ccc solid',
[theme.breakpoints.down('md')]: {
height: '96px',
},
},
actionsArea: {
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
position: 'absolute' as 'absolute',
position: 'sticky' as 'sticky',
overflow: 'hidden' as 'hidden',
height: '48px',
right: 0,
left: '100%',
padding: '0 16px',
'& > * > *': {
margin: '0 8px',
margin: '8px',
[theme.breakpoints.down('sm')]: {
width: '100%',
margin: '8px 0',
},
},
[theme.breakpoints.down('md')]: {
right: 'auto' as 'auto',
[theme.breakpoints.down('sm')]: {
position: 'initial' as 'initial',
overflow: 'initial' as 'initial',
display: 'initial' as 'initial',
padding: '0',
height: 'auto' as 'auto',
marginTop: '48px',
width: '100%',
'& > *': {
width: '100%',
}
},
},
tabsArea: {
[theme.breakpoints.down('md')]: {
position: 'relative' as 'relative',
bottom: '-48px'
[theme.breakpoints.down('sm')]: {
position: 'absolute' as 'absolute',
},
}
});
......@@ -50,7 +62,6 @@ interface ITabProps extends React.Props<any> {
name?: string;
to: string;
children: any;
actions?: any;
}
class Tab extends React.Component<ITabProps, any> {
......@@ -83,16 +94,16 @@ class Tabs extends React.Component<any> {
};
return (
<div className={ classes.root }>
<div className={ `pr-20 pl-20 float-right ${classes.actionsArea}` }>
{ actions }
</div>
<div className={ `float-left ${classes.tabsArea}` }>
<Grid container className={ classes.root }>
<Grid item className={ `float-left ${classes.tabsArea}` }>
<MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }>
{ tabs.map((tab) => <MuiTab key={ tab.to } label={ tab.label } />) }
</MuiTabs>
</div>
</div>
</Grid>
<Grid item className={ `float-right ${classes.actionsArea}` }>
{ actions }
</Grid>
</Grid>
);
}
}
......
src/ui/common/filter/DateFilter.tsx
View file @ 5cf42397
......@@ -78,6 +78,7 @@ class DateFilterInternal extends React.Component<IDateFilterInternal, any> {
return (
<div>
<TextField
style={ {width: '50%'} }
label={ label }
type="date"
value={ this.toDateString(this.state.dateA) }
......@@ -85,6 +86,7 @@ class DateFilterInternal extends React.Component<IDateFilterInternal, any> {
InputLabelProps={ { shrink: true } }
/>
<TextField
style={ {width: '50%'} }
label={ label }
type="date"
value={ this.toDateString(this.state.dateB) }
......
src/ui/common/filter/FiltersBlock.tsx
View file @ 5cf42397
......@@ -12,14 +12,17 @@ import {cleanFilters} from 'utilities';
const styles = (theme) => ({
filtersBlock: {
marginBottom: '75px',
overflow: 'visible' as 'visible',
},
stickyButtonContainer: {
position: 'absolute' as 'absolute',
bottom: '10px',
position: 'sticky' as 'sticky',
bottom: '2rem',
width: 'calc(100% - 35px)',
backgroundColor: '#fff',
overflow: 'hidden' as 'hidden',
[theme.breakpoints.down('sm')]: {
bottom: '3rem',
},
},
btnGreen: theme.buttons.green,
btnReset: theme.buttons.reset,
......
src/ui/common/filter/NumberFilter.tsx
View file @ 5cf42397
......@@ -62,12 +62,14 @@ class NumberFilterInternal extends React.Component<INumberFilterInternal, any> {
return (
<div>
<TextField
style={ {width: '50%'} }
label={ label }
value={ this.state.textA }
placeholder={ 'From including' }
onChange={ this.textAChange }
/>
<TextField
style={ {width: '50%'} }
label={ label }
value={ this.state.textB }
placeholder={ 'To including' }
......
src/ui/layout/Header/index.tsx
View file @ 5cf42397
......@@ -10,7 +10,6 @@ import AppBar from '@material-ui/core/AppBar';
import { withStyles } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import {ROLE_ADMINISTRATOR, ROLE_CLIENT, ROLE_USER} from 'constants/userRoles';
import {saveCookies} from 'utilities';
......@@ -19,7 +18,7 @@ import UserMenuComponent from './UserMenuComponent';
import LeftMenu from './LeftMenu';
import LangListComponent from './LangListComponent';
const styleSheet = {
const styleSheet = (theme) => ({
root: {
marginTop: 90,
width: '100%',
......@@ -30,9 +29,15 @@ const styleSheet = {
headerRoot: {
backgroundColor: '#2b2924',
height: 'auto',
[theme.breakpoints.down('sm')]: {
height: '3.5rem',
},
},
blockHeader: {
padding: '0 20px',
[theme.breakpoints.down('sm')]: {
alignItems: 'baseline' as 'baseline',
},
},
/*tslint:disable*/
navLogo: {
......@@ -88,8 +93,13 @@ const styleSheet = {
backgroundColor: 'transparent' as 'transparent',
}
},
mobileHidden: {
[theme.breakpoints.down('sm')]: {
display: 'none'
},
},
/* tslint:enable */
};
});
interface IHeaderProps extends React.ClassAttributes<any> {
login: any;
......@@ -150,24 +160,24 @@ class Header extends React.Component<IHeaderProps | any, any> {
<Toolbar className={ classes.blockHeader }>
<div className="mobile-navigation-block">
<IconButton className={ classes.menuBtn } aria-label="Menu" color="secondary" onClick={ this.handleLeftMenuOpen } >
<MenuIcon />
<img src="images/GENESYS-ICON.svg" className={ classes.logoIcon } />
</IconButton>
<LeftMenu open={ this.state.open } closeMenu={ this.handleLeftMenuClose } />
</div>
<div className={ classes.flex }>
<Link to="/" className={ `float-left ${this.props.classes.navLogo}` }>
<Link to="/" className={ `float-left ${this.props.classes.navLogo} ${classes.mobileHidden}` }>
<img src="images/GENESYS-ICON.svg" className={ classes.mainIcon } />
<img src="images/GENESYS-LOGO.svg" className={ classes.logoIcon } />
</Link>
<div className="navigation-block">
<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="/wiews">{ t('menu.Institutes') }</NavLink>
</div>
</div>
<div>{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
<div className="float-right">{ this.renderLogin([ROLE_USER, ROLE_ADMINISTRATOR]) }</div>
<div>
<LangListComponent />
......
src/ui/layout/PageLayout.tsx
View file @ 5cf42397
......@@ -17,6 +17,9 @@ const styles = (theme) => ({
width: '100%',
overflow: 'visible' as 'visible',
position: 'absolute' as 'absolute',
[theme.breakpoints.down('sm')]: {
paddingTop: '3rem',
},
},
content: {
flexGrow: 1,
......
src/ui/layout/sidebar/SidebarDrawer.tsx
View file @ 5cf42397
import * as React from 'react';
import Drawer from '@material-ui/core/Drawer';
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
const SidebarDrawer = ({variant, className, isOpen, children}) => (
<Drawer
<SwipeableDrawer
variant={ variant }
className={ className }
open={ isOpen }
onClose={ () => console.log('Sidebar closed') }
onOpen={ () => console.log('Sidebar opened') }
>
{ children }
</Drawer>
</SwipeableDrawer>
);
export default SidebarDrawer;
src/ui/layout/sidebar/SidebarWrapper.tsx
View file @ 5cf42397
import * as React from 'react';
import {bindActionCreators} from 'redux';
import {bindActionCreators, compose} from 'redux';
import {connect} from 'react-redux';
import {withStyles} from '@material-ui/core/styles';
import SidebarDrawer from './SidebarDrawer';
......@@ -7,26 +7,45 @@ import ChevronRight from '@material-ui/icons/ChevronRight';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import { collapseSidebar } from 'actions/layout';
import withWidth from '@material-ui/core/withWidth/withWidth';
import {Breakpoint} from '@material-ui/core/styles/createBreakpoints';
interface ISidebarProps extends React.ClassAttributes<any> {
classes: any;
sidebarContent: any;
collapseSidebar: (isOpen: boolean) => void;
isOpen: boolean;
width: Breakpoint;
}
const mobile = ['sm', 'xs'] as Breakpoint[];
const styles = (theme) => ({
/* tslint:disable */
drawer: {
position: 'sticky' as 'sticky',
top: '72px',
zIndex: 10,
height: 'calc(100vh - 72px)',
'& > div': {
top: 'auto' as 'auto',
position: 'initial' as 'initial',
height: '100%' as '100%'
},
[theme.breakpoints.down('sm')]: {
height: 'calc(100vh - 3rem)',
top: '3rem',
maxWidth: '90%',
position: 'fixed' as 'fixed',
zIndex: 15,
}
},
drawerCollapsed: {
[theme.breakpoints.down('sm')]: {
width: 'auto',
position: 'sticky' as 'sticky',
}
},
sidebar: {
whiteSpace: 'nowrap' as 'nowrap',
......@@ -60,13 +79,21 @@ const styles = (theme) => ({
},
sidebarContents: {
width: '100%',
minHeight: 'calc(100% - 2rem - 75px)',
minHeight: 'calc(100% - 2rem)',
height: 'auto' as 'auto',
[theme.breakpoints.down('sm')]: {
minHeight: 'calc(100% - 3rem)',
},
},
sidebarContentsCollapsed: {
minHeight: 'calc(100% - 52px)',
[theme.breakpoints.down('sm')]: {
minHeight: 'calc(100% - 38px)',
},
},
/* tslint:disable */
collapseButton: {
width: '100%',
marginTop: '75px',
position: 'sticky' as 'sticky',
backgroundColor: '#e6e6e6',
height: '2rem',
......@@ -82,15 +109,22 @@ const styles = (theme) => ({
display: 'flex' as 'flex',
alignItems: 'center' as 'center',
height: '100%',
fontSize: '16px'
fontSize: '16px',
[theme.breakpoints.down('sm')]: {
fontSize: '1.5rem',
},
},
'& > span > svg':{
'html[dir="rtl"] &' : {
transform: 'rotate(180deg)',
},
}
},
[theme.breakpoints.down('sm')]: {
height: '3rem',
},
},
buttonCollapsed: {
top: '100%',
// width: '72px',
transition: theme.transitions.create('width', {
easing: theme.transitions.easing.sharp,
......@@ -101,7 +135,20 @@ const styles = (theme) => ({
transform: 'rotate(180deg)',
},
}
}
},
pageContent: {
zIndex: -2,
backgroundColor: '#878787',
opacity: 0.4,
position: 'fixed' as 'fixed',
width: '100%',
height: '100%',
top: 0,
left: 0,
[theme.breakpoints.up('md')]: {
display: 'none' as 'none',
},
},
});
class SidebarWrapper extends React.Component<ISidebarProps, any> {
......@@ -115,11 +162,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> {
}
public render() {
const { sidebarContent, classes, isOpen } = this.props;
const { sidebarContent, classes, isOpen, width } = this.props;
const isMobile = mobile.indexOf(width) !== -1;
return (
<SidebarDrawer
className={ classes.drawer }
className={ `${classes.drawer} ${!isOpen ? classes.drawerCollapsed : ''}` }
isOpen={ isOpen }
variant={ 'permanent' }
>
......@@ -133,11 +181,12 @@ class SidebarWrapper extends React.Component<ISidebarProps, any> {
className={ `${classes.collapseButton}` }>
<span><ChevronLeft /> Collapse</span>
</div>
<div className={classes.pageContent} onClick={() => { isMobile ? this.setIsCollapsed(true) : null; } }> </div>
</div>
}
{ !isOpen &&
<div className={ `${ classes.sidebar } ${classes.sidebarCollapsed}` }>
<div className={ classes.sidebarContents } onClick={() => { this.setIsCollapsed(false); }}>
<div className={ `${classes.sidebarContents} ${classes.sidebarContentsCollapsed}` } onClick={() => { this.setIsCollapsed(false); }}>
<p className={ classes.collapsedText }>Open sidebar</p>
</div>
<div
......@@ -161,4 +210,4 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
collapseSidebar,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(SidebarWrapper));
export default connect(mapStateToProps, mapDispatchToProps)(compose(withWidth(), withStyles(styles))(SidebarWrapper));
src/ui/pages/accessions/BrowsePage.tsx
View file @ 5cf42397
......@@ -62,9 +62,9 @@ class BrowsePage extends BrowsePageTemplate<Accession> {
tab={ currentTab }
actions={
<span>
<Button> Select all </Button>
<Button> Delete </Button>
<Button> Share </Button>
<Button variant="raised"> Select all </Button>
<Button variant="raised"> Delete </Button>
<Button variant="raised"> Share </Button>
</span>
}
>
......
styles/app.styles.scss
View file @ 5cf42397
......@@ -105,7 +105,7 @@ $mui-breakpoints: (
display: inline-block;
position: absolute;
height: 100%;
@media (max-width: 989px) {
@media (max-width: 959px) {
display: none;
}
a {
......@@ -128,7 +128,7 @@ $mui-breakpoints: (
}
.mobile-navigation-block {
display: none;
@media (max-width: 989px) {
@media (max-width: 959px) {
display: inline-block;
}
}
......
Supports Markdown
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