Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Genesys PGR
Genesys Website
Commits
5cf42397
Commit
5cf42397
authored
Sep 18, 2018
by
Viacheslav Pavlov
Committed by
Matija Obreza
Sep 21, 2018
Browse files
Mobile friendly
- added some fix to sidebar view on mobile
parent
23eacf6a
Changes
11
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
}
>
<
Menu
Icon
/>
<
img
src
=
"images/GENESYS-ICON.svg"
className
=
{
classes
.
logo
Icon
}
/>
</
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
Swipeable
Drawer
from
'
@material-ui/core/
Swipeable
Drawer
'
;
const
SidebarDrawer
=
({
variant
,
className
,
isOpen
,
children
})
=>
(
<
Drawer
<
Swipeable
Drawer
variant
=
{
variant
}
className
=
{
className
}
open
=
{
isOpen
}
onClose
=
{
()
=>
console
.
log
(
'
Sidebar closed
'
)
}
onOpen
=
{
()
=>
console
.
log
(
'
Sidebar opened
'
)
}
>
{
children
}
</
Drawer
>
</
Swipeable
Drawer
>
);
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
:
9
8
9px
)
{
@media
(
max-width
:
9
5
9px
)
{
display
:
none
;
}
a
{
...
...
@@ -128,7 +128,7 @@ $mui-breakpoints: (
}
.mobile-navigation-block
{
display
:
none
;
@media
(
max-width
:
9
8
9px
)
{
@media
(
max-width
:
9
5
9px
)
{
display
:
inline-block
;
}
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment