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
Rex Dri
Rex Dri
Commits
ec8fbab1
Commit
ec8fbab1
authored
Sep 08, 2018
by
Florent Chehab
Browse files
Better handling of different width
parent
97f308c4
Pipeline
#27068
passed with stages
in 2 minutes and 22 seconds
Changes
4
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/university/UniversityTemplate.js
View file @
ec8fbab1
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
withWidth
,
{
isWidthUp
}
from
'
@material-ui/core/withWidth
'
;
import
{
compose
}
from
'
recompose
'
;
import
AppBar
from
'
@material-ui/core/AppBar
'
;
import
Tabs
from
'
@material-ui/core/Tabs
'
;
import
Tab
from
'
@material-ui/core/Tab
'
;
...
...
@@ -44,33 +47,18 @@ class UniversityTemplate extends React.Component {
value
:
0
,
};
handlerResize
()
{
this
.
forceUpdate
();
}
componentDidMount
()
{
window
.
addEventListener
(
"
resize
"
,
this
.
handlerResize
.
bind
(
this
));
}
componentWillUnmount
()
{
window
.
addEventListener
(
"
resize
"
,
this
.
handlerResize
.
bind
(
this
));
}
handleChange
=
(
event
,
value
)
=>
{
this
.
setState
({
value
});
};
render
()
{
const
{
classes
}
=
this
.
props
;
const
{
classes
,
univId
,
width
}
=
this
.
props
;
const
{
value
}
=
this
.
state
;
const
w
=
window
,
d
=
document
,
documentElement
=
d
.
documentElement
,
body
=
d
.
getElementsByTagName
(
'
body
'
)[
0
],
width
=
w
.
innerWidth
||
documentElement
.
clientWidth
||
body
.
clientWidth
,
height
=
w
.
innerHeight
||
documentElement
.
clientHeight
||
body
.
clientHeight
;
const
{
univId
}
=
this
.
props
;
let
scroll
=
true
;
if
(
isWidthUp
(
'
lg
'
,
width
))
{
scroll
=
false
;
}
return
(
<
div
>
...
...
@@ -83,8 +71,8 @@ class UniversityTemplate extends React.Component {
<
Tabs
value
=
{
value
}
onChange
=
{
this
.
handleChange
}
scrollable
=
{
width
<
1000
?
true
:
false
}
centered
=
{
width
>=
1000
?
true
:
false
}
scrollable
=
{
scroll
}
centered
=
{
!
scroll
}
scrollButtons
=
"
on
"
indicatorColor
=
"
primary
"
textColor
=
"
primary
"
...
...
@@ -113,4 +101,7 @@ UniversityTemplate.propTypes = {
univId
:
PropTypes
.
string
.
isRequired
,
};
export
default
withStyles
(
styles
)(
UniversityTemplate
);
\ No newline at end of file
export
default
compose
(
withWidth
({
noSSR
:
true
}),
withStyles
(
styles
)
)(
UniversityTemplate
);
frontend/src/components/university/modules/GenericModule.js
View file @
ec8fbab1
...
...
@@ -8,10 +8,13 @@ import Badge from '@material-ui/core/Badge';
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Paper
from
'
@material-ui/core/Paper
'
;
import
Chip
from
'
@material-ui/core/Chip
'
;
import
Avatar
from
'
@material-ui/core/Avatar
'
;
import
SettingsBackRestoreIcon
from
'
@material-ui/icons/SettingsBackupRestore
'
;
import
CreateIcon
from
'
@material-ui/icons/Create
'
;
import
VerifiedUserIcon
from
'
@material-ui/icons/VerifiedUser
'
;
import
LinkIcon
from
'
@material-ui/icons/Link
'
;
import
FullScreenDialog
from
'
../../shared/FullScreenDialog
'
;
...
...
@@ -25,6 +28,11 @@ const styles = theme => ({
padding
:
1
*
theme
.
spacing
.
unit
,
// marginBottom: 2 * theme.spacing.unit
},
rootLinks
:
{
display
:
'
flex
'
,
justifyContent
:
'
flex-start
'
,
flexWrap
:
'
wrap
'
,
},
badge
:
{
// margin: 0.5 * theme.spacing.unit,
top
:
-
0.5
*
theme
.
spacing
.
unit
,
...
...
@@ -44,10 +52,13 @@ const styles = theme => ({
color
:
theme
.
palette
.
action
.
disabled
},
button
:
{
width
:
5
*
theme
.
spacing
.
unit
,
height
:
5
*
theme
.
spacing
.
unit
,
width
:
5
*
theme
.
spacing
.
unit
,
height
:
5
*
theme
.
spacing
.
unit
,
// margin: 0.5 * theme.spacing.unit,
},
chip
:
{
margin
:
theme
.
spacing
.
unit
,
},
})
...
...
@@ -68,7 +79,7 @@ class GenericModule extends React.Component {
const
{
classes
,
title
}
=
this
.
props
;
return
(
<
div
>
<
FullScreenDialog
open
=
{
this
.
state
.
fullScreenDialogOpen
}
handleClose
=
{
this
.
handleCloseFullScreenDialog
}
/
>
<
FullScreenDialog
open
=
{
this
.
state
.
fullScreenDialogOpen
}
handleClose
=
{
this
.
handleCloseFullScreenDialog
}
/
>
<
Paper
className
=
{
classes
.
root
}
square
=
{
true
}
>
<
Grid
container
spacing
=
{
8
}
>
<
Grid
item
xs
>
...
...
@@ -76,7 +87,7 @@ class GenericModule extends React.Component {
<
Typography
variant
=
'
caption
'
>
Mis
à
jour
par
<
em
>
chehabfl
<
/em> le 08/
09
/
2018
à
15
h20
<
/Typography
>
<
/Grid
>
<
Grid
item
xs
=
{
4
}
style
=
{{
textAlign
:
'
right
'
}}
>
<
Tooltip
title
=
"
Informations sur la modération
"
placement
=
"
top
"
>
<
Badge
classes
=
{{
badge
:
classes
.
badge
}}
badgeContent
=
{
4
}
color
=
"
secondary
"
>
<
IconButton
aria
-
label
=
"
Modération
"
className
=
{
classes
.
button
}
>
...
...
@@ -104,6 +115,20 @@ class GenericModule extends React.Component {
<
div
>
{
this
.
props
.
children
}
<
/div
>
<
div
className
=
{
classes
.
rootLinks
}
>
<
Chip
avatar
=
{
<
Avatar
>
<
LinkIcon
/>
<
/Avatar
>
}
label
=
"
Site de l'EPFL
"
className
=
{
classes
.
chip
}
color
=
"
secondary
"
onClick
=
{()
=>
console
.
log
(
"
test
"
)}
variant
=
"
outlined
"
/>
<
/div
>
<
/Paper
>
<
/div
>
)
...
...
frontend/src/components/university/modules/UniversitySemestersDates.js
0 → 100644
View file @
ec8fbab1
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
Table
from
'
@material-ui/core/Table
'
;
import
TableBody
from
'
@material-ui/core/TableBody
'
;
import
TableCell
from
'
@material-ui/core/TableCell
'
;
import
TableHead
from
'
@material-ui/core/TableHead
'
;
import
TableRow
from
'
@material-ui/core/TableRow
'
;
import
Markdown
from
'
../../shared/Markdown
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
CloudQueueIcon
from
'
@material-ui/icons/CloudQueue
'
;
import
LocalFloristIcon
from
'
@material-ui/icons/LocalFlorist
'
;
import
MyComponent
from
'
../../MyComponent
'
;
import
TextLink
from
'
../../other/TextLink
'
;
import
GenericModule
from
'
./GenericModule
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Divider
from
'
@material-ui/core/Divider
'
;
const
styles
=
theme
=>
({
root
:
{
width
:
'
100%
'
,
overflowX
:
'
auto
'
,
},
tableCell
:
{
padding
:
'
2px
'
,
},
content
:
{
display
:
"
flex
"
,
alignItems
:
"
center
"
,
},
icon
:
{
paddingRight
:
theme
.
spacing
.
unit
}
});
const
comment
=
"
**Attention certaines activités commencent avant cette période**
"
;
class
UniversitySemestersDates
extends
React
.
Component
{
render
()
{
const
{
classes
,
theme
}
=
this
.
props
;
return
(
<
GenericModule
title
=
{
"
Date des semestres
"
}
>
<
div
className
=
{
classes
.
root
}
>
<
Table
>
<
TableHead
>
<
TableRow
key
=
{
0
}
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
th
"
>
Semestre
<
/TableCell
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
th
"
>
Date
de
début
<
/TableCell
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
th
"
>
Date
de
fin
<
/TableCell
>
<
/TableRow
>
<
/TableHead
>
<
TableBody
>
<
TableRow
key
=
{
1
}
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
<
div
className
=
{
classes
.
content
}
>
<
CloudQueueIcon
color
=
'
disabled
'
className
=
{
classes
.
icon
}
/
>
<
div
>
Automne
<
/div
>
<
/div
>
<
/TableCell
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
12
/
03
/
2018
<
/TableCell
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
12
/
03
/
2018
<
/TableCell
>
<
/TableRow
>
<
TableRow
key
=
{
2
}
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
<
div
className
=
{
classes
.
content
}
>
<
LocalFloristIcon
color
=
'
disabled
'
className
=
{
classes
.
icon
}
/
>
<
div
>
Printemps
<
/div
>
<
/div
>
<
/TableCell
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
12
/
03
/
2018
<
/TableCell
>
<
TableCell
className
=
{
classes
.
tableCell
}
component
=
"
td
"
>
12
/
03
/
2018
<
/TableCell
>
<
/TableRow
>
<
/TableBody
>
<
/Table
>
<
/div
>
<
Markdown
source
=
{
comment
}
/
>
<
/GenericModule
>
)
}
}
export
default
withStyles
(
styles
,
{
withTheme
:
true
})(
UniversitySemestersDates
);
frontend/src/components/university/tabs/GeneralInfoTab.js
View file @
ec8fbab1
...
...
@@ -2,45 +2,82 @@ import React from 'react';
import
PropTypes
from
'
prop-types
'
;
import
{
withStyles
}
from
'
@material-ui/core/styles
'
;
import
MyComponent
from
'
../../MyComponent
'
;
import
{
compose
}
from
'
recompose
'
;
import
GenericModule
from
'
../modules/GenericModule
'
;
import
UniversityGeneral
from
'
../modules/UniversityGeneral
'
;
import
Grid
from
'
@material-ui/core/Grid
'
;
import
Typography
from
'
@material-ui/core/Typography
'
;
import
Lorem
from
'
react-lorem-component
'
;
import
UniversityGeneral
from
'
../modules/UniversityGeneral
'
;
import
UniversitySemestersDates
from
'
../modules/UniversitySemestersDates
'
;
import
withWidth
,
{
isWidthUp
}
from
'
@material-ui/core/withWidth
'
;
const
styles
=
theme
=>
({
root
:
{},
root
:
{
flexGrow
:
1
,
},
});
class
GeneralInfo
extends
MyComponent
{
myRender
()
{
return
(
<
div
>
<
Grid
container
spacing
=
{
16
}
>
<
Grid
item
xs
=
{
8
}
>
<
UniversityGeneral
/>
<
/Grid
>
<
Grid
item
xs
=
{
4
}
>
<
GenericModule
title
=
{
"
Date des semestres
"
}
/
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
6
}
>
<
GenericModule
title
=
{
"
DRI
"
}
/
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
md
=
{
6
}
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
/
>
const
{
classes
}
=
this
.
props
;
// Resizing with the grid was causing weird gaps so we rerender depending on the width
if
(
isWidthUp
(
'
lg
'
,
this
.
props
.
width
))
{
return
(
<
div
className
=
{
classes
.
root
}
>
<
Grid
container
spacing
=
{
16
}
justify
=
'
center
'
alignItems
=
"
flex-start
"
>
<
Grid
item
lg
=
{
7
}
>
<
Grid
className
=
{
classes
.
root
}
container
spacing
=
{
16
}
direction
=
'
column
'
>
<
Grid
item
xs
>
<
UniversityGeneral
/>
<
/Grid
>
<
Grid
item
xs
>
<
GenericModule
title
=
{
"
DRI
"
}
/
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
Grid
item
lg
=
{
5
}
>
<
Grid
className
=
{
classes
.
root
}
container
spacing
=
{
16
}
direction
=
'
column
'
>
<
Grid
item
xs
>
<
UniversitySemestersDates
/>
<
/Grid
>
<
Grid
item
xs
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
/
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
>
<
GenericModule
title
=
{
"
Résumé Départs
"
}
/
>
<
Lorem
count
=
{
20
}
/
>
<
/div
>
);
}
else
{
return
(
<
div
className
=
{
classes
.
root
}
>
<
Grid
container
spacing
=
{
16
}
>
<
Grid
item
xs
=
{
12
}
>
<
UniversityGeneral
/>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
>
<
GenericModule
title
=
{
"
DRI
"
}
/
>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
>
<
UniversitySemestersDates
/>
<
/Grid
>
<
Grid
item
xs
=
{
12
}
>
<
GenericModule
title
=
{
"
Offres de départs
"
}
/
>
<
/Grid
>
<
/Grid
>
<
/Grid
>
<
Lorem
count
=
{
20
}
/
>
<
/div
>
);
<
Lorem
count
=
{
20
}
/
>
<
/div
>
);
}
}
}
...
...
@@ -50,4 +87,7 @@ class GeneralInfo extends MyComponent {
// univId: PropTypes.string.isRequired,
// };
export
default
withStyles
(
styles
)(
GeneralInfo
);
\ No newline at end of file
export
default
compose
(
withWidth
({
noSSR
:
true
}),
withStyles
(
styles
)
)(
GeneralInfo
);
\ No newline at end of file
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