Skip to content
GitLab
Menu
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
471eefe7
Commit
471eefe7
authored
Oct 25, 2018
by
Viacheslav Pavlov
Browse files
fixed mobile behavior of LeftMenu and Header
parent
0ef78e1b
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/ui/layout/Header/LeftMenu.tsx
View file @
471eefe7
import
*
as
React
from
'
react
'
;
import
*
as
React
from
'
react
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
withWidth
from
'
@material-ui/core/withWidth
'
;
import
{
translate
}
from
'
react-i18next
'
;
import
{
translate
}
from
'
react-i18next
'
;
import
Drawer
from
'
@material-ui/core/Drawer
'
;
import
Drawer
from
'
@material-ui/core/Drawer
'
;
...
@@ -7,11 +8,20 @@ import ListItem from '@material-ui/core/ListItem';
...
@@ -7,11 +8,20 @@ import ListItem from '@material-ui/core/ListItem';
import
{
NavLink
,
Link
}
from
'
react-router-dom
'
;
import
{
NavLink
,
Link
}
from
'
react-router-dom
'
;
import
Close
from
'
@material-ui/icons/Close
'
;
import
Close
from
'
@material-ui/icons/Close
'
;
import
MyListCount
from
'
./MyListCount
'
;
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
)
=>
({
const
styleSheet
=
(
theme
)
=>
({
flex
:
{
flex
:
{
flex
:
1
,
flex
:
1
,
},
},
myListCount
:
{
[
theme
.
breakpoints
.
up
(
'
lg
'
)]:
{
display
:
'
none
'
as
'
none
'
,
},
},
/* tslint:disable */
/* tslint:disable */
leftMenu
:
{
leftMenu
:
{
height
:
'
100%
'
,
height
:
'
100%
'
,
...
@@ -65,13 +75,22 @@ interface ILeftMenuProps extends React.ClassAttributes<any> {
...
@@ -65,13 +75,22 @@ interface ILeftMenuProps extends React.ClassAttributes<any> {
myListItemsCount
:
number
;
myListItemsCount
:
number
;
closeMenu
:
(
flag
)
=>
any
;
closeMenu
:
(
flag
)
=>
any
;
classes
:
any
;
classes
:
any
;
width
:
Breakpoint
;
t
:
any
;
t
:
any
;
}
}
class
LeftMenu
extends
React
.
Component
<
ILeftMenuProps
,
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
()
{
public
render
()
{
const
{
t
,
myListItemsCount
}
=
this
.
props
;
const
{
t
,
myListItemsCount
,
classes
}
=
this
.
props
;
const
closeBtn
=
{
const
closeBtn
=
{
color
:
'
#fff
'
,
color
:
'
#fff
'
,
...
@@ -107,7 +126,10 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
...
@@ -107,7 +126,10 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
<
NavLink
activeClassName
=
"active"
to
=
"/c"
>
{
t
(
'
menu.Crops
'
)
}
</
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/c"
>
{
t
(
'
menu.Crops
'
)
}
</
NavLink
>
</
ListItem
>
</
ListItem
>
<
ListItem
button
>
<
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
>
</
ListItem
>
</
div
>
</
div
>
</
Drawer
>
</
Drawer
>
...
@@ -116,4 +138,4 @@ class LeftMenu extends React.Component<ILeftMenuProps, any> {
...
@@ -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
));
src/ui/layout/Header/MyListCount.tsx
View file @
471eefe7
...
@@ -2,7 +2,7 @@ import * as React from 'react';
...
@@ -2,7 +2,7 @@ import * as React from 'react';
import
withStyles
from
'
@material-ui/core/styles/withStyles
'
;
import
withStyles
from
'
@material-ui/core/styles/withStyles
'
;
const
styles
=
()
=>
({
const
styles
=
(
theme
)
=>
({
root
:
{
root
:
{
backgroundColor
:
'
grey
'
,
backgroundColor
:
'
grey
'
,
borderRadius
:
'
50%
'
,
borderRadius
:
'
50%
'
,
...
@@ -10,9 +10,23 @@ const styles = () => ({
...
@@ -10,9 +10,23 @@ const styles = () => ({
display
:
'
inline-flex
'
,
display
:
'
inline-flex
'
,
justifyContent
:
'
center
'
,
justifyContent
:
'
center
'
,
alignItems
:
'
center
'
,
alignItems
:
'
center
'
,
fontSize
:
'
14px
'
,
top
:
'
calc(50% - 9px)
'
,
position
:
'
absolute
'
as
'
absolute
'
,
fontSize
:
'
11px
'
,
minHeight
:
'
1.6em
'
,
minHeight
:
'
1.6em
'
,
minWidth
:
'
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
'
,
},
},
},
});
});
...
...
src/ui/layout/Header/index.tsx
View file @
471eefe7
...
@@ -31,13 +31,13 @@ const styleSheet = (theme) => ({
...
@@ -31,13 +31,13 @@ const styleSheet = (theme) => ({
headerRoot
:
{
headerRoot
:
{
backgroundColor
:
'
#2b2924
'
,
backgroundColor
:
'
#2b2924
'
,
height
:
'
auto
'
,
height
:
'
auto
'
,
[
theme
.
breakpoints
.
down
(
'
s
m
'
)]:
{
[
theme
.
breakpoints
.
down
(
'
m
d
'
)]:
{
height
:
'
3.5rem
'
,
height
:
'
3.5rem
'
,
},
},
},
},
blockHeader
:
{
blockHeader
:
{
padding
:
'
0 20px
'
,
padding
:
'
0 20px
'
,
[
theme
.
breakpoints
.
down
(
'
s
m
'
)]:
{
[
theme
.
breakpoints
.
down
(
'
m
d
'
)]:
{
alignItems
:
'
baseline
'
as
'
baseline
'
,
alignItems
:
'
baseline
'
as
'
baseline
'
,
},
},
},
},
...
@@ -96,7 +96,7 @@ const styleSheet = (theme) => ({
...
@@ -96,7 +96,7 @@ const styleSheet = (theme) => ({
}
}
},
},
mobileHidden
:
{
mobileHidden
:
{
[
theme
.
breakpoints
.
down
(
'
s
m
'
)]:
{
[
theme
.
breakpoints
.
down
(
'
m
d
'
)]:
{
display
:
'
none
'
display
:
'
none
'
},
},
},
},
...
@@ -175,6 +175,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
...
@@ -175,6 +175,7 @@ class Header extends React.Component<IHeaderProps | any, any> {
<
div
className
=
"navigation-block float-right"
>
<
div
className
=
"navigation-block float-right"
>
<
NavLink
activeClassName
=
"active"
to
=
"/a"
>
{
t
(
'
menu.Accessions
'
)
}
</
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/a"
>
{
t
(
'
menu.Accessions
'
)
}
</
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/subsets"
>
{
t
(
'
menu.Subsets
'
)
}
</
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
=
"/wiews"
>
{
t
(
'
menu.Institutes
'
)
}
</
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/c"
>
{
t
(
'
menu.Crops
'
)
}
</
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/c"
>
{
t
(
'
menu.Crops
'
)
}
</
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/sel"
>
{
t
(
'
menu.My List
'
)
}
<
MyListCount
count
=
{
myListItemsCount
}
/></
NavLink
>
<
NavLink
activeClassName
=
"active"
to
=
"/sel"
>
{
t
(
'
menu.My List
'
)
}
<
MyListCount
count
=
{
myListItemsCount
}
/></
NavLink
>
...
...
src/ui/layout/PageLayout.tsx
View file @
471eefe7
...
@@ -17,7 +17,7 @@ const styles = (theme) => ({
...
@@ -17,7 +17,7 @@ const styles = (theme) => ({
width
:
'
100%
'
,
width
:
'
100%
'
,
overflow
:
'
visible
'
as
'
visible
'
,
overflow
:
'
visible
'
as
'
visible
'
,
position
:
'
absolute
'
as
'
absolute
'
,
position
:
'
absolute
'
as
'
absolute
'
,
[
theme
.
breakpoints
.
down
(
'
s
m
'
)]:
{
[
theme
.
breakpoints
.
down
(
'
m
d
'
)]:
{
paddingTop
:
'
3rem
'
,
paddingTop
:
'
3rem
'
,
},
},
},
},
...
...
styles/app.styles.scss
View file @
471eefe7
...
@@ -105,7 +105,7 @@ $mui-breakpoints: (
...
@@ -105,7 +105,7 @@ $mui-breakpoints: (
display
:
inline-block
;
display
:
inline-block
;
position
:
absolute
;
position
:
absolute
;
height
:
100%
;
height
:
100%
;
@media
(
max-width
:
95
9px
)
{
@media
(
max-width
:
127
9px
)
{
display
:
none
;
display
:
none
;
}
}
a
{
a
{
...
@@ -128,7 +128,7 @@ $mui-breakpoints: (
...
@@ -128,7 +128,7 @@ $mui-breakpoints: (
}
}
.mobile-navigation-block
{
.mobile-navigation-block
{
display
:
none
;
display
:
none
;
@media
(
max-width
:
95
9px
)
{
@media
(
max-width
:
127
9px
)
{
display
:
inline-block
;
display
:
inline-block
;
}
}
}
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a 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